extjs mvc简单示例

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'模板列