Extjs4 gridPanel 例子

编程技术  /  houtizong 发布于 3年前   74

Ext.namespace("PROJECT.SYS.USER");Ext.define('PROJECT.SYS.USER.GridPanel', {extend : 'Ext.panel.Panel',layout : 'border',pageSize : 10,border : false,initComponent : function() {var t = this;Ext.define('dataModel', {extend : 'Ext.data.Model',fields : ['id', 'name', 'userName', 'passWord','age'],idProperty : 'id'});var store = new Ext.create('Ext.data.Store', {pageSize : t.pageSize,model : 'dataModel',remoteSort : true,proxy : {type : 'jsonp',url : 'sys/user-list.action',reader : {root : 'data',totalProperty : 'totalCount'}}});store.load({params : {start : 0,limit : t.pageSize}});var pagingBar = Ext.create('Ext.PagingToolbar', {store : store,displayInfo : '当前记录 {0} - {1} of {2}',emptyMsg : "暂无记录"});var columns = [{text : '编号',dataIndex : 'id',tooltip : '编号',sortable : true}, {text : '姓名',dataIndex : 'name',tooltip : '姓名',sortable : true}, {text : '用户名',dataIndex : 'userName',tooltip : '用户名',sortable : true}, {text : '密码',dataIndex : 'passWord',tooltip : '密码',sortable : true}, {text : '年龄',dataIndex : 'age',tooltip : '年龄',sortable : true}];var tb = Ext.create('Ext.toolbar.Toolbar');tb.add({text : '新增',iconCls : 'save',handler : Ext.Function.bind(t.addFn, t)});tb.add({text : '刷新',iconCls : 'refesh',handler : Ext.Function.bind(t.refeshFn, t)});this.gridPanel = Ext.create('Ext.grid.Panel', {title : '用户管理',columns : columns,bbar : pagingBar,region:'center',margins:'5 5 5 5',store : store,loadMask : true,viewConfig : {stripeRows : true,enableTextSelection : true}});this.items = [t.gridPanel]this.callParent(arguments);},addFn : function() {},refeshFn : function() {}});