app.js
Ext.onReady(function() { Ext.QuickTips.init(); Ext.Loader.setConfig({ enabled : true//自动加载 }); Ext.application({ appFolder : 'app',//文件名 name : 'AM',//文件名对应的包名 launch : function() {//回调函数 Ext.create("Ext.container.Viewport", { loyout : 'auto',//自动布局 items : [{ xtype : 'userlist', title : 'users', html : 'list Form users will...' }] }) }, controllers : ["Users"]//控制器,对应继承Ext.app.Controller的控制器 }); });
controller/Users.js 控制层
Ext.define("AM.controller.Users",{ extend:'Ext.app.Controller', init:function(){ //this.control({}); //控制业务逻辑,如按钮事件业务逻辑 }, views:["List"],//视图层 stores:["Users"],//store 和model 共同被称为Ext mvc 的model层 models:["AM.model.User"] });
view/List.js
Ext.define("AM.view.List", { extend : 'Ext.grid.Panel', title : 'Dom', frame : true, width : 800, height : 400, alias : 'widget.userlist', multiSelect : true,// 是否可选多条记录 selType : 'checkboxmodel',// 设置选择模式 见Ext.selection包 store : "Users", columns : [Ext.create('Ext.grid.RowNumberer', {})//添加一列号 , { text : 'name', dataIndex : 'name'// 对应model里的fields的name }, { text : 'age', dataIndex : 'age' }, { text : 'email', dataIndex : 'email' }, { text : 'action', icon : '../img/delete.png', header : 'Action', handler : function(view, rowIndex, colIndex, item, e) {//单击时触发的函数 alert(view + rowIndex) }, xtype : 'actioncolumn',// 操作列 width : 60 }, { header : '拼装', xtype : 'templatecolumn',//模板列 tpl : '编辑{age} 邮箱{email}'//调用store,或model里的age,email变量 }, { header : '出生日期', xtype : 'datecolumn',//日期列 后台无论是yyyy-mm-dd日期还是外国日期都能识别 dataIndex : 'birthday', width : 80, format : 'Y-m-d'//日期格式 }, { text : 'isIt', dataIndex : 'isIt', width : 80, renderer : function(value) {//回调 if (value) { if (value == '是') { return "<font color=red>" + value + "</font>"; } else { return "<font color=green>" + value + "</font>"; } } } }], tbar : [{ xtype : 'button', text : '增加' }, { xtype : 'button', text : '修改' }, { xtype : 'button', text : '删除', handler : function(o, e) { // 得到grid var grid1 = o.findParentByType('grid'); var sModel = grid1.getSelectionModel();// 得到选择模型 var selectedModels = sModel.getSelection();// 得到选择的Ext。data。Model var names = []; Ext.each(selectedModels, function(model) { names.push(model.get('name')); }); // 访问后台 // 如果后台返回成功则移除 Ext.getCmp('grid_s').getStore() .remove(selectedModels); } }], dockedItems : [{// 停驻条目 dock : 'bottom',// 悬停方位 可是上、下、左、右 任意一个 xtype : 'pagingtoolbar',// 分页工具栏 store : 'Users',// 根据storeid查找store displayInfo : true // 显示 deisplayMsg }], initComponent : function() { this.callParent(arguments); } });
store/Users.js
Ext.define("AM.store.Users",{ extend:'Ext.data.Store', storeId:'user_store', model:'AM.model.User', autoLoad:true//很重要 })
model/User.js
Ext.define("AM.model.User", { extend : "Ext.data.Model", fields : [{ name : 'name', type : 'string' }, { name : 'age', type : 'int' }, { name : 'email', type : 'string' }, { name : 'birthday', type : 'string' }, "isIt"//此处可这样简写 ], proxy : { type : 'ajax',// 后台加载 url : 'lesson11.jsp', reader : { type : 'json', root : 'storeData' } } });
ext 列模式'Ext.grid.column.Column普通列,Ext.grid.column.Action行为列,'Ext.grid.column.Boolean 布尔型列,'Ext.grid.column.Date'日期列,'Ext.grid.column.Number'数字列,'Ext.grid.column.Template'模板列