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: '行号',  35 }
            checkSelModel, //checkbox显示
            {header: '学生ID', dataIndex: 'StuID', align: 'center',  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
         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',  300, height: 500, layout: 'form', renderTo: Ext.getBody(),
        items: [//form表单创建一些组件对象集合
                    {xtype: 'form', id: 'formSubmit', labelWidth: 50, labelAlign: 'right', border: false,
                    bodyStyle: 'padding:10px', defaults: {  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");