Ext Js简单Grid分页及选择器的使用
1.Ext Js的GridPanel的分页处理
对于数据处理的组件GridPanel可能会用到它的分页处理功能，对于GridPanel的分页处理需要加上Ext.PagingToolbar对象来对数据进行分页处理。
Ext Js的前台代码：
(对于GridPanel的分页处理,还添加了对于数据的增、删、改操作，这次的添加、修改操作是使用的Window弹出框处理的，加载一条记录，提交表单保存一条记录；删除操作还是上篇的删除代码，没有修改；又增加了对于一条记录的上移、下移操作，是将一条选中的记录取出来，获取其索引，然后删除该记录，在指定位置(上移一条记录或下移一条记录)插入该记录。对于后台的相应还是前一篇文章的.ashx文件，对应与GetPagingData\SaveSingle\DeleteData的AJAX操作。)
Ext.onReady(function () { gridAjaxPaging(); }); function gridAjaxPaging() { var pageSize = 2; //分页页大小 var checkSelModel = new Ext.grid.CheckboxSelectionModel(); //单行选中singleSelect\checkOnly复选框选中 var cm = new Ext.grid.ColumnModel([//设置列的结构 new Ext.grid.RowNumberer(), //行号,也可加入配置{ header: '行号', width: 35 } checkSelModel, //checkbox显示 {header: '学生ID', dataIndex: 'StuID', align: 'center', width: 80 }, //align: 'center',列和内容居中 {header: '学生姓名', dataIndex: 'StuName' }, { header: '学生年龄', dataIndex: 'StuAge'}, { header: '学生性别', dataIndex: 'StuSex' }, { header: '学生描述', dataIndex: 'StuDesp'}, { header: '入学日期', dataIndex: 'StuDate' } ]); var ds = new Ext.data.JsonStore({//设置数据绑定 url: 'TestGridAjax.ashx', //请求地址 root: 'Datas', //要显示数据的根 totalProperty: 'TotalCount', //总记录数 baseParams: { Option: 'GetPagingData', start: 0, limit: pageSize }, //传值参数,start\limit初次加载显示记录区间 fields: ['StuID', 'StuName', 'StuAge', 'StuSex', 'StuDesp', 'StuDate']//绑定字段 }); ds.load(); //对于store的load\reload可以在任何需要的地方进行配置,如:{ params: { Option: 'GetPagingData', start: 0, limit: 3} }//Option:'GetData' //可能第一次加载是全部信息,在某处需要分页操作,或显示指定的数据 var gridAjax = new Ext.grid.GridPanel({//可编辑GridPanel width: 800, height: 500, renderTo: Ext.getBody(), style: { marginLeft: 100, marginTop: 100 }, store: ds, //数据 colModel: cm, //列显示结构 sm: checkSelModel, loadMask: true, stripeRows: true, autoExpandColumn: 'StuDesp', //设置一列自动填充剩余部分 clicksToEdit: 2, //双击触发修改 tbar: new Ext.Toolbar([ { text: '添加', handler: function () { var record = new Ext.data.Record({ StuID: '0', StuName: '', StuAge: 10, StuSex: '男', StuDesp: '', StuDate: new Date().format('Y-m-d H:m:s') }); addAndUpdateData('add', record, ds); //添加,也可以指定一条记录的默认值 } }, '-', { text: '修改', handler: function () { if (gridAjax.selModel.getCount() > 0) { var record = gridAjax.selModel.getSelected(); addAndUpdateData('update', record, ds); } else { Ext.MessageBox.alert('信息提示', '请选择你要修改的记录！'); } } }, '-', //修改操作 {text: '删除', handler: function () {//删除操作 Ext.MessageBox.confirm('信息提示', '你确定要删除吗？', function (btn) { if (btn == 'yes') { delData(gridAjax); } }); } }, '-', { text: '上移', handler: function () { upRecord(gridAjax); } }, '-', { text: '下移', handler: function () { downRecord(gridAjax); } } ]), bbar: new Ext.PagingToolbar({ store: ds, pageSize: pageSize, displayInfo: true, displayMsg: '显示{0}-{1}条记录,共{2}条', emptyMsg: '没有记录' }) }); } function addAndUpdateData(type, record, ds) {//数据处理类型:add\update var win = new Ext.Window({ title: 'Window Title', width: 300, height: 500, layout: 'form', renderTo: Ext.getBody(), items: [//form表单创建一些组件对象集合 {xtype: 'form', id: 'formSubmit', labelWidth: 50, labelAlign: 'right', border: false, bodyStyle: 'padding:10px', defaults: { width: 200 }, items: [ { xtype: 'textfield', fieldLabel: 'StuID', name: 'StuID' }, { xtype: 'textfield', fieldLabel: 'StuName', name: 'StuName' }, { xtype: 'numberfield', fieldLabel: 'StuAge', name: 'StuAge' }, { xtype: 'combo', fieldLabel: 'StuSex', name: 'StuSex', mode: 'local', displayField: 'Value', valueField: 'Id', editable: false, triggerAction: 'all', autoSelect: true, forceSelection: false, store: new Ext.data.SimpleStore({ fields: ['Id', 'Value'], data: [['1', '男'], ['2', '女']] }) }, { xtype: 'textfield', fieldLabel: 'StuDesp', name: 'StuDesp' }, { xtype: 'datefield', fieldLabel: 'StuDate', name: 'StuDate', format: 'Y-m-d H:m:s', editable: false } ], buttons: [ { text: '保存', handler: function () { win.get(0).getForm().submit({ clientValidation: true, //进行客户端验证 url: 'TestGridAjax.ashx', params: { Option: 'SaveSingle' }, success: function (form, action) { win.close(); ds.reload(); Ext.MessageBox.alert('信息提示', action.result.Msg); }, failure: function (form, action) { Ext.MessageBox.alert('信息提示', action.result.Msg) } }); } }, { text: '重置', handler: function () { win.get(0).getForm().reset(); } }, { text: '取消', handler: function () { win.close(); } } ] } ] }).show(); win.get(0).getForm().loadRecord(record); //加载单条记录,这里很不错 } //删除操作和前一个一样,一点没修改 function delData(gridAjax) {//删除数据(实现单行\多行记录删除) if (gridAjax.selModel.getCount() > 0) {//获取选中的行总数 //var record = gridAjax.selModel.getSelected(); //获取选中的单条记录 var records = gridAjax.selModel.getSelections(); //获取选中的所有记录 var stuIDS = ""; //要删除学生ID集合 for (var i = 0; i < records.length; i++) { stuIDS += records[i].data.StuID + ","; } if (stuIDS.indexOf(',')) { stuIDS = stuIDS.substring(0, stuIDS.lastIndexOf(',')); } //去掉最后一个"," Ext.Ajax.request({ method: 'POST', //请求方式大小写敏感 url: 'TestGridAjax.ashx', params: { Option: 'DeleteData', JsonData: stuIDS }, success: function (response, options) {//执行成功 gridAjax.store.remove(records); //数据库删除成功,前台删除选中的所有记录 gridAjax.reconfigure(gridAjax.store, gridAjax.colModel); //绑定对象并刷新 Ext.MessageBox.alert('信息提示', Ext.util.JSON.decode(response.responseText).Msg); //获取后台返回的Json数据Msg键的值 }, failure: function (response, options) { Ext.MessageBox.alert('信息提示', Ext.util.JSON.decode(response.responseText).Msg); } }); } else { Ext.MessageBox.alert('信息提示', '请选择你要删除的数据！'); } } function upRecord(gridAjax) {//记录上移 if (gridAjax.selModel.getCount() > 0) { var record = gridAjax.selModel.getSelected(); //获取当前选中记录 var index = gridAjax.store.indexOf(record); //获取当前记录所在索引 if (index > 0) { gridAjax.store.removeAt(index); //将选中的该行删除 gridAjax.store.insert(index - 1, record); //在改行上一行处插入该记录 gridAjax.getView().refresh(); //刷新一下,主要刷新行号 gridAjax.selModel.selectRow(index - 1); //新插入一行被选中 } else { Ext.MessageBox.alert('信息提示', '已是最顶部记录,不能再移动了!'); } } } function downRecord(gridAjax) {//记录下移 if (gridAjax.selModel.getCount() > 0) { var record = gridAjax.selModel.getSelected(); //获取当前选中记录 var index = gridAjax.store.indexOf(record); //获取当前记录所在索引 if (index < gridAjax.store.getCount() - 1) { gridAjax.store.removeAt(index); //将选中的该行删除 gridAjax.store.insert(index + 1, record); //在改行下一行处插入该记录 gridAjax.getView().refresh(); //刷新一下,主要刷新行号 gridAjax.selModel.selectRow(index + 1); //新插入一行被选中 } else { Ext.MessageBox.alert('信息提示', '已是最底部记录,不能再移动了!'); } } }
2.Ext Js的DomQuery选择器：
发现内容有些少，简单写一下对于Ext Js的DomQuery选择器(有些类似于JQuery的选择器)，也是一些常用的选择器，基础选择器，根据对象ID、元素名称、css类选择器、层次选择器、节点便利选择器、还有伪选择器等等。还有一些类似JQuery的动画特效等等，Ext Js的封装的也挺不错的。
//测试淡出淡隐 // var myDiv = Ext.get("myDiv"); // myDiv.highlight(); // myDiv.addClass("Purple"); // myDiv.center(); // myDiv.setOpacity(0.5); // Ext.getCmp("btnOk").on("click", function () { // var divShow = Ext.get("divMsg"); // divShow.load({ // url: "", // params: 'name=' + Ext.get("txtUserName").dom.value, // text: "Updating......" // }); // divShow.show(); // }); //DomQuery(ExtJs实现对于对象的查询操作) //Ext.query("span");//这是包含span的标签的所有元素的数组 //Ext.query("span","span1");//这是查询所有的span标签数组，返回id为"span1"的对象 //Ext.query("#span1");//根据id查询一个对象数组，使用“#”号，查询使用该ID的对象 //Ext.query(".sp");//根据样式为sp的查询一组对象，使用“.”号，查询该样式的所有对象 //Extt.query("*");//返回一个数组，包含文档的所有元素 //Ext.query("div p");//按照指定的显示层级来显示所有的符合对象集合 //属性选择器 //Ext.query("*[class=bar]");//得到class等于“bar”的所有元素 //Ext.query("*[class!=bar]");//得到class不等于“bar”的所有元素 //Ext.query("*[class^=b]");//得到class从“b”字头开始的所有元素 //Ext.query("*[class$=r]");//得到class由“r”结尾的所有元素 //Ext.query("*[class*=a]");//得到在class中抽出“a”字符的所有元素 //样式选择器 //Ext.query("*{color=red}");//获取所有红色的元素 //Ext.query("*{color=red} *{color=pink}");//获取所有粉红颜色的并且是有红色子元素的元素 //Ext.query("*{color^=yel}");//获取所有颜色属性是从“yel”开始的元素 //Ext.query("*{color$=ow}"); //获取所有颜色属性是以“ow”结束的元素 //Ext.query("*{color*=ow}"); //获取所有颜色属性包含“ow”字符的元素 //伪类选择符Pseudo Classes selectors //Ext.query("span:first-child"); //Ext.query("a:last-child"); //Ext.query("li:nth-child(even)"); //Ext.query("a:only-child"); //Ext.query("input:checked");
