Extjs学习笔记(十二) gridpane MVC

1.extjs中创建应用用到的方法

MVC文件结构

 
    Ext.application() 实际上是(类)Ext.app.Application
        例子
        Ext.application({
            name: 'MyApp',
            launch: function() {
                Ext.create('Ext.container.Viewport', {
                    items: {
                        html: 'My App'
                    }
                });
            }
        });
    Ext.app.Controller 控制器
    Ext.ComponentQuery 组建查询去(extjs4.0新特性) 实际上是(类) Ext.container.Containerxtype: container

 

app.js:

Ext.onReady(function(){
	Ext.QuickTips.init();
	Ext.Loader.setConfig({
		enabled:true
	});
	Ext.application({
		name : 'AM',//应用的名字
		appFolder : "app",//应用的目录
		launch:function(){//当前页面加载完成执行的函数
	        Ext.create('Ext.container.Viewport', { //简单创建一个试图
	        	layout:'auto',//自动填充布局
	            items: {
	            	xtype: 'userlist',
	                title: 'Users',
	                html : 'List of users will go here'
	            }
	        });
		},
		controllers:[
			'Users'
		]
	});
})

 controller/User.js

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',
	init:function(){
		this.control({
			'userlist button[id=delete]':{
				click:function(o){
					var gird = o.ownerCt.ownerCt;
						var data = gird.getSelectionModel().getSelection();
						if(data.length == 0){
							Ext.Msg.alert("提示","您最少要选择一条数据");
						}else{
							//1.先得到ID的数据(name)
							var st = gird.getStore();
							var ids = [];
							Ext.Array.each(data,function(record){
								ids.push(record.get('name'));
							})
							//2.后台操作(delet)
							Ext.Ajax.request({
								url:'/extjs/extjs!deleteData.action',
								params:{ids:ids.join(",")},
								method:'POST',
								timeout:2000,
								success:function(response,opts){
									Ext.Array.each(data,function(record){
										st.remove(record);
									})
								}
							})
							//3.前端操作DOM进行删除(ExtJs)
						}
				}
			}
		});
	},
	views:[
		'List'
	],
	stores :[
		"Users"
	],
	models :[
		"User"
	] 
});

 Model/User.js

//User类
Ext.define('AM.model.User', {
    extend: 'Ext.data.Model',
	fields: [
		{name: 'name',  type: 'string',sortable : true},
	    {name: 'age',   type: 'int',sortable : true},
	    {name: 'email',   type: 'string',sortable : true}
	]
});

 store/User.js

//User数据集合
Ext.define('AM.store.Users', {
	extend: 'Ext.data.Store',
	model: 'AM.model.User',
	storeId: 's_user',
	proxy:{
	    type:'ajax',
	    url:'/extjs/extjs!getUserList.action',
	    reader: {
	        type: 'json',
	        root: 'topics'
	    },writer:{
			type:'json'
		}
	},
	autoLoad: true //很关键
});

 view/List.js

//User数据集合
Ext.define('AM.store.Users', {
	extend: 'Ext.data.Store',
	model: 'AM.model.User',
	storeId: 's_user',
	proxy:{
	    type:'ajax',
	    url:'/extjs/extjs!getUserList.action',
	    reader: {
	        type: 'json',
	        root: 'topics'
	    },writer:{
			type:'json'
		}
	},
	autoLoad: true //很关键
});