//============下面是MyGridPanel.jsp=============== Ext.onReady(function (){ var _checkboxs = new Ext.grid.CheckboxSelectionModel({}); var _rowNumber = new Ext.grid.RowNumberer(); var _columns = [_rowNumber , _checkboxs , {header:'id' , dataIndex:'id' , sortable:true , align:'center'},//sortable这个是设置允许排序 {header:'userName' , dataIndex:'userName' , sortable:true , align:'center'}, {header:'password' , dataIndex:'password' , sortable:true , align:'center'}, {header:'age' , dataIndex:'age' , sortable:true , align:'center'}, {header:'sex' , dataIndex:'sex' , sortable:true , align:'center'}, {header:'remark' , dataIndex:'remark' , sortable:true , align:'center'} ]; var config = { sm:_checkboxs, columns:_columns, url:'<%=basePath%>/com.lxitedu.ibattis.action/queryUser' } var myGridPanel = new MyGridPanel({},config); //===========其实把gridpanel放在window窗口中会更好看=============== var window = new Ext.Window({ title:'Window', width:660, height:300, frame:true, renderTo:Ext.getBody(), items:[myGridPanel] }); window.show(); }); //============下面是MyGridPanel.js,通用版的=============== function MyGridPanel(view , config){ Ext.apply(this , view);//继承Ext this.init(config); MyGridPanel.superclass.constructor.call(this,{//使用继承的关系把GridPanel的构造体给MyGridPanel height:200, //autoWidth:true, width:'450', id:'grid', renderTo:Ext.getBody()//把面板渲染到那个位置 }); } Ext.extend(MyGridPanel , Ext.grid.GridPanel,{//第一个参数是子类,第二个是要继承的父类,第三个是重写的一些属性 init : function(config){// var tempArray = [];//一个用来存储数据的数组 var element = config.columns;//拿到字段信息的头信息 for(var i = 0 ; i < element.length ; i++ ){ if(element[i].dataIndex != '' && element[i].dataIndex != null){ tempArray.push({name:element[i].dataIndex});//把要显示的字段信息解析并封装成一个数组 } } var store = new Ext.data.Store({ url:config.url,//请求后台的路径 method:'POST',//提交的方式 baseParams:{limit:5 , start:0},//设置分页的个数 reader:new Ext.data.JsonReader( { root:'result',//数据的结果集 totalProperty:'totleCount'//数据的总数量 }, Ext.data.Record.create(tempArray)//通过传入的数组把数据遍历显示在页面 ), autoLoad:true //这个是设置框中内容是否显示默认为true }); this.columns = config.columns;//字段信息 this.sm =config.sm;//这个是checkbox的多选框 this.store = store;// this.loadMask = true,//当页面没有加载完之前锁定页面 //显示在窗口下面的分页按钮及信息 this.bbar = new Ext.PagingToolbar({store:store,pageSize:5,displayInfo:true,displayMsg:'显示第{0}条到{1}条记录,一共{2}条'}); } });
MyGridPanel
最新推荐文章于 2017-11-02 11:56:01 发布