EXT的初步搭建

最近中行项目中用到了Ext,自己尝试搭建了一下MVC框架

1.导入Ext相关的jar包 

2.在index.jsp中引用

3.创建目录结构如下图

4.编写测试代码ListView

Ext.define("MyProgram.view.test.ListView", {
extend: "Ext.grid.Panel",
alias: 'widget.userlist', //定义alias，这是为了方便我们通过xtype来创建该组件的实例
//store: "MyProgram.store.test.UserStore",
columnLines : true, //是否显示列表每行的每列中间的间隔线
initComponent: function () {
var me = this;

//var store = Ext.create("MyProgram.store.test.UserStore");
/*
var store = Ext.create('Ext.data.Store',{
fields : ['XXX','XXX'],
data : {items:[
{
"XXX" : "XXX"
},{
"XXX" : "XXX"
},{
"XXX" : "XXX"
}

],
'total':3
},
proxy:{
type : 'memory',
reader : {
type : 'json',
rootProperty : 'items',
totalProperty : 'total'

}

}

});*/


var data = [{
id : '1',
name : 'oye'
}, {
id : '2',
name : 'safd'
}, {
id : '3',
name : 'fd'
}];

var store = new Ext.data.Store({
fields : ['id', 'name'],
data : data
});


me.store = store;

/* this.columns = [
{ text: '姓名', dataIndex: 'name' },
{ text: '年龄', dataIndex: 'age', xtype: 'numbercolumn', format: '0' },
{ text: '电话', dataIndex: 'phone' }
];*/

Ext.apply(me,{

columns:[{
header : '姓名',
dataIndex : 'id',
align : 'center',
flex : 1.2
},{
header : '年龄',
dataIndex : 'name',
align : 'center',
flex : 1.2

}]/*,
dockedItems :[{
xtype : 'pagebar',
dock : 'bottom',
store : store

}]*/

});
store.load();

me.callParent(arguments);
}
});

5.编写controller

//将定义好的model、store、view作为配置项添加到controller中，controller会加载这些文件；Ext.define('MyProgram.controller.test.UserController', {    extend: 'Ext.app.Controller',    stores: ['MyProgram.model.test.UserModel'], //将定义好的model、store、view作为配置项添加到controller中，controller会加载这些文件；    models: ['MyProgram.store.test.UserStore'],    views: ['Viewport', 'MyProgram.view.test.ListView', 'MyProgram.view.test.EditView'],    init: function () { //在init方法中为view添加响应事件        this.control({            'userlist': {                itemdblclick: this.editUser            },            'useredit button[action=save]': {                click: this.saveUser            }        });    },    editUser: function (grid, record) {        var win = Ext.widget("useredit");         win.down("form").loadRecord(record);        win.show();    },    saveUser: function (btn) {        var win = btn.up("window"),            form = win.down("form"),            record = form.getRecord();        form.updateRecord();        record.commit();        win.close();    }});

6.app.js里使用  

Ext.application({    name: "MyProgram",//name: 应用程序名称    appFolder: 'MyProgram/app',//appFolder: 应用程序代码的目录，用来进行动态加载代码的    controllers: ["MyProgram.controller.test.UserController"],//controllers: 应用程序使用到的控制器    autoCreateViewport: true,//自动创建Viewport    launch: function () {        // 页面加载完成之后执行    }});//为使Ext.Loader动态加载开启，需进行如下设置：Ext.Loader.setConfig({enabled:true});

7.项目效果