ExtJs学习新手入门实战
程序员文章站
2022-08-04 13:25:37
extjs学习（六）~~入门实战
一、开发一个“玩家信息”的功能~~ 效果图
【思路分析：】
这里需要一个grid去展示数据，grid组件需要一个columns数组显示返回...
extjs学习（六）~~入门实战
一、开发一个“玩家信息”的功能~~ 效果图【思路分析：】
这里需要一个grid去展示数据，grid组件需要一个columns数组显示返回结果，同时grid需要一个store，store需要一个model。同时grid也需要一个toolbar和queryform。grid表格是放在主视图里面的。这里一共就有8个组件。
我们约定好，除了store、main view是create，其他组件都采用define模式。个人习惯吧。
二、整理开发过程
需要组件推导过程如上，但是开发时反过来操作：
first：model -- 提供模板，只需要改字段+类型，根据java的实体。
seconde：store -- 只需要修改url、跟model即可。若后台无完成，先写静态数据，让表格数据显示出来即可。
third: columns -- 因为显示的列比较多，这里把columns单独成一个数组来写。只需要修改表头。render对返回的值进行自定义输出。
four: toolbar – 几乎每一个功能都会附带一个查询框。这里先写好该queryform组件。修改表单的name值跟字段名即可。
five: grid – 修改columns+store名+toolbar名。将所有组件放到grid即可。
six: main view -- 主视图在onready里面，加载grid主键即可。
seven: function – 根据你的业务需求写 所有的事件函数
三、开发代码 ~~ 以下采用mvc分层的开发模式。
first:model
/*-----------------------------1. model start-------------------------*/
ext.define('user', {
extend: 'ext.data.model',
fields: [
{ name : 'channel', type : 'string' },
{ name : 'channel_name', type : 'string' },
{ name: 'id',type:'long'},
{ name: 'createdate',type:'string'}
]
});
/*-----------------------------model end-------------------------*/
seconde：store
/*-----------------------------2.store star-------------------------*/
var simpsonsstore = ext.create('ext.data.store', {
model: 'user', //这里的model直接引用上面定义的model
pagesize: 1000,
storeid:'simpsonsstore',
remotesort : true,
/* data : [
{channel: '管道一', channel_name: '腾讯', id: 1001, createdate: '2018-08-06 09:04:04'},
{channel: '管道二', channel_name: 'ios', id: 1002, createdate: '2018-08-06 09:04:04'},
{channel: '管道三', channel_name: '百度', id: 1003, createdate: '2018-08-06 09:04:04'},
{channel: '管道四', channel_name: '测试管道', id: 1004, createdate: '2018-08-06 09:04:04'},
]*/
proxy: {
type: 'ajax',
actionmethods:'create',
extraparams: {},
url: project+'/game/userinfo/roledemo',
reader: {
type: 'json',
root: 'data',
totalproperty: 'count'
}
},
pagesize: 14,
autoload: true,
remotesort: true,//全局排序
sorters: {
direction: 'asc',
property: 'id'
}
});
/*-----------------------------store end-------------------------*/
third: columns
/*-----------------------------3.columns star-------------------------*/
var colunmarray=new array(
{ text: '渠道', dataindex: 'channel' },
{ text: '渠道名称', dataindex: 'channel_name',renderer:function(value,meta,record){
return value+"("+record.data.channel+")";
}},
{ text: '渠道id', dataindex: 'id',
renderer : function(value){
if(value == 1001)
return '腾讯1001';
else if(value == 1002)
return 'ios1002';
else if(value == 1003)
return '百度1003';
else if(value == 1004)
return '测试渠道1004';
else
return 'pc';
}
},
{
text: '创建时间', dataindex: 'createdate'
}
);
/*-----------------------------columns end-------------------------*/
four: toolbar
/*-----------------------------4.toolbar star-------------------------*/
/*
var xxxpanelform1 = ext.create('ext.form.panel',{
id:'xxxpanelform',
layout: {
type:'hbox',
//控件横向拉伸，宽度为最控件的宽
/!*align:'stretchmax'*!/
},
border:'10 5 3 10',
bodypadding: 5,
scrollable: false,
defaults: {
/!*labelwidth: 35,*!/
labelseparator: ':'
},
items: [{
xtype: 'hidden',
fieldlabel: 'id',
//allowblank: false,
name:'pid'
},{
xtype: 'combobox',
fieldlabel: '等级1',
labelwidth:40,
matchfieldwidth:false,
name:'level',
width:150,
store: ext.create('ext.data.store', {
fields: ['value', 'name'],
data : [
{"value":"high", "name":"高"},
{"value":"medium", "name":"中"},
{"value":"low", "name":"低"}
]
}),
querymode: 'local',
displayfield: 'name',
valuefield: 'value'
},{
xtype: 'textfield',
fieldlabel: '商品编号',
labelwidth:60,
margin:'0 0 0 10',
reference: 'productsearchform-pnumber',
name:'pnumber',
//allowblank : false,
},{
xtype: 'button',
margin:'0 0 0 10',
text: '查询',
}],
});
*/
ext.define('admin.view.mytoolbar', {
extend:'ext.toolbar.toolbar',
id:"myfirstdefine",
xtype: 'myfirstdefine',
dock: 'top',
autoscroll:true,
items: [ {
xtype: 'combobox',
fieldlabel: '等级1',
labelwidth:40,
matchfieldwidth:false,
name:'level',
width:150,
store: ext.create('ext.data.store', {
fields: ['value', 'name'],
data : [
{"value":"high", "name":"高"},
{"value":"medium", "name":"中"},
{"value":"low", "name":"低"}
]
}),
querymode: 'local',
displayfield: 'name',
valuefield: 'value'
},{
fieldlabel : '角色昵称',
labelwidth : 60,
xtype : 'textfield',
id : 'rolename',
name :'rolename',
// allowblank : false, // 不能为空
emptytext : '昵称'
}, "-", {
fieldlabel : '手机号',
labelwidth : 60,
xtype : 'textfield',
id : 'phone',
name :'phone',
emptytext : '手机号'
}, "-", {
fieldlabel : '设备型号',
labelwidth : 60,
xtype : 'textfield',
id : 'devicemodel',
name :'devicemodel'
}, {
xtype : 'button',
text :'查询',
handler: function() {
fileselect();
}
}]
});
/*-----------------------------toolbar end-------------------------*/
five: grid
/*-----------------------------5.grid star-------------------------*/
ext.define('admin.view.product.productgrid', {
extend: 'ext.grid.panel',
xtype: 'productgrid',
viewconfig:{
enabletextselection:true
},
id:'productgrid',
store: ext.data.storemanager.lookup('simpsonsstore'),
//store:aastore,
columns: colunmarray,
height: 400,
bbar : new ext.pagingtoolbar({
store : ext.data.storemanager.lookup('simpsonsstore'),
displayinfo : true,
displaymsg : '第 {0} - {1} 条 共 {2} 条 000',
emptymsg : "没有记录"
}),
dockeditems: [
{xtype:"myfirstdefine"}
//xxxpanelform1
]
});
/*var roleinfogrid=ext.create('ext.grid.panel', {
viewconfig:{
enabletextselection:true
},
id:'gridpanel',
store: ext.data.storemanager.lookup('simpsonsstore'),
//store:aastore,
columns: colunmarray,
height: 400,
bbar : new ext.pagingtoolbar({
store : ext.data.storemanager.lookup('simpsonsstore'),
displayinfo : true,
displaymsg : '第 {0} - {1} 条 共 {2} 条 ',
emptymsg : "没有记录"
}),
dockeditems: [
xxxpanelform1,{xtype:"myfirstdefine"}
]
});*/
/*-----------------------------grid end-------------------------*/
six: main view
/*-----------------------------6.main view star-------------------------*/
ext.onready(function() {
var roleurl=project+"/report/roleinfo.jsp";
var dourl=project+"/report/speakforbidden.jsp";
ext.create('ext.container.viewport', {
title:'角色帐号信息',
layout: {
type: 'fit'
},
items: [
//roleinfogrid
{xtype:'productgrid'}
]
});
if(window.parent.stealpage){
ext.getcmp("roleid").setvalue(window.parent.tabroleid);
window.parent.tabroleid=null;
window.parent.stealpage=false;
fileselect();
}
});
/*-----------------------------main view end-------------------------*/
seven: function
ext.define('admin.view.product.productviewcontroller', {
extend: 'ext.app.viewcontroller',
alias: 'controller.productviewcontroller',
productgridopenaddwindow : function(){
//alert("添加商品的方法");
//alert("添加商品的方法");
var cfg = ext.apply({
xtype: 'productgridwindow'
,items: [ext.apply({xtype: 'productgridform'})]
},{
title:'添加商品'//,width: 800//,height: 600
});
ext.create(cfg);
},
productgridwindowclose:function(btn){
//alert("关闭");
var win = btn.up('window');
if(win){
win.close();
}
},
productgridformsubmit:function(btn){
//alert("保存");
var productgridform = btn.up('form').getform();
var win = btn.up('window');
productgridform.submit( {
//waittitle : '请稍后...',
//waitmsg : '正在保存订单信息,请稍后...',
url : 'product/saveorupdate',
method : 'post',
success : function(form, action) {
ext.msg.alert("提示",action.result.msg);
win.close();
//必须suppliergrid中增加对应id:'suppliergrid'属性
ext.getcmp('productgrid').store.reload();
},
failure : function(form, action) {
ext.msg.alert("提示",action.result.msg);
}
});
},
productgriddeletedate:function(btn){
//alert("11");
var grid = btn.up('gridpanel');
var selmodel = grid.getselectionmodel();
if (selmodel.hasselection()) {
ext.msg.confirm("警告", "确定要删除吗？", function (button) {
if (button == "yes") {
var selected = selmodel.getselection();
var selectids = []; //要删除的id
ext.each(selected, function (record) {
//alert(record.data.pid);
selectids.push(record.data.pid);
})
ext.ajax.request({
url : 'product/deletebyids',
method : 'post',
params : {
ids:selectids
},
success: function(response, options) {
ext.getcmp('productgrid').store.reload();
var json = ext.util.json.decode(response.responsetext);
if(json.success){
ext.msg.alert('操作成功', json.msg);
grid.getstore().reload();
}else{
ext.msg.alert('操作失败', json.msg);
}
}
});
}
});
}else{
ext.msg.alert('提示',"请选择一行数据进行删除!");
}
},
productgridopeneditwindow:function(btn){
//alert("xiugai");
var grid = btn.up('gridpanel');//获取grid视图
var selmodel = grid.getselectionmodel();//获取grid的selectionmodel
if (selmodel.hasselection()) {//判断是否选中记录
var record = selmodel.getselection()[0];//获取选中的第一条记录.
//alert(record);
//console.log(record);
//创建修改window和form
var productgridwindow = ext.widget('productgridwindow',{
title:'修改商品',
items: [{xtype: 'productgridform'}]
});
//让form加载选中记录
productgridwindow.down("form").getform().loadrecord(record);
}else{
ext.msg.alert('提示',"请选择一行数据进行修改!");
}
},
productsearchformsubmit:function(btn){
//alert("你好");
var store = btn.up('gridpanel').getstore();
//2.按照所选字段进行查询参数（条件）的扩展
var formvalues=btn.up('form').getform().getvalues();
//alert(formvalues["pname"]);
//alert(formvalues["pnumber"]);
//alert(formvalues["level"]);
//alert(formvalues["wname"]);
if (formvalues["pname"]==''&&formvalues["pnumber"]==''&&formvalues["level"]=='' && formvalues["wname"]=='') {
store.getproxy().extraparams ={ };
store.reload();
}else{
//alert("失败");
//1.清空所有查询条件
ext.apply(store.proxy.extraparams, {
pname:'',
pnumber:'',
level:'',
wname:''
});
ext.apply(store.proxy.extraparams, {
pname:this.lookupreference('productsearchform-pname').getvalue(),
pnumber:this.lookupreference('productsearchform-pnumber').getvalue(),
level:this.lookupreference('productsearchform-level').getvalue(),
wname:this.lookupreference('productsearchform-wname').getvalue()
});
store.load({params: {start:0,limit:14,page:1}});
}
},
productgridexportxls:function(){
//alert("商品导出");
window.location.href = "product/exportexcel";
}
});
基于上面的七大组件即可快速开发一个模块。而且写了自动生成model跟store的工具类，可以更快写出一个模块。
如果说，你理解好上面七个组件的使用关系的话，那么根据上面的理解，直接copy一份代码，直接改store、url即可
四、文件架构
这里，我把每个组件单独成一个文件，通过在主jsp中引入所有的组件的js即可互相使用。这种架构是mvc的。
可以看我的mvvc的文件架构 ~~ 第一个项目，拆分更细
虽然看着是很多的组件，如果说对这个框架熟悉的话，直接copy一份，然后把product改成order，这样就完成一个模块的开发。这个mvvm的代码会在下一篇博客去分享，有需要的可以一下。