Ext js 4 简单实现分页查询

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/icemaker88/article/details/18079977

参考官方api文档写的分页,原来分页也可以这么简单,(ext-4.2.1.883):


1,前台页面:

ValuePanel = new Ext.grid.GridPanel({
        // 下方参数值
        title: '参数值',
        split: true,
        region: "south",
        height: 300,
        xtype: 'grid',
        store: storeAnalysis,
        columns: ValuePanelColumns,
        dockedItems: [{
            xtype: 'pagingtoolbar',
            store: storeAnalysis,
            dock: 'bottom',
            emptyMsg: '没有数据',
            displayInfo: true,
            displayMsg: '当前显示{0}-{1}条记录 / 共{2}条记录 ',
            beforePageText: '第',
            afterPageText: '页/共{0}页'
        }]
  });
// 每页显示记录数
var itemsPerPage = 10;
// 分页查询store
var storeAnalysis = new Ext.data.ArrayStore({
    model: 'SelectFieldValueListModel',
    pageSize: itemsPerPage,
    proxy: {
        type: 'ajax',
        url: appPath + '/ExploredReserves/AddSelectFieldValueToGridPage',// 任意动态页面
        reader: {
            type: 'json',
            root: 'items',
            totalProperty: 'total'
        }
    }
});
function LoadStoreAnalysis() {
    storeAnalysis.load({
        params: {
            start: 0,// 这里的参数名不能改,是ext定死的
            limit: itemsPerPage
        }
    });
}

2 后台返回一个如下格式的json就行了


        /// <summary>
        ///  分页刷新下方属性值列表
        /// </summary>
        public ActionResult AddSelectFieldValueToGridPage(int start, int limit)
        {
            List<AnalyzeFieldBase> listFieldDataPage=new List<AnalyzeFieldBase>();
            for (int i = 0; i < m_listFieldData.Count; i++)
            {
                if (i >= start && i < start + limit)
                {
                    listFieldDataPage.Add(m_listFieldData[i]);
                }
            }
            string result = CommonFun.ConvertObjectToJson(listFieldDataPage);

            result = "{\"success\": true,\"total\": " + m_listFieldData.Count + ",\"items\":" + result + "}";
            return Content(result);
        }





展开阅读全文

ext初学者提问(EXT 4)

07-03

[code=JScript]rnvar selModel = Ext.create('Ext.selection.CheckboxModel');rnrn Ext.create('Ext.grid.Panel', rn title: '員工建檔',rn store: employeeStore,rn selModel: selModel,rn columnLines: true,rn columns: [rn Ext.create('Ext.grid.RowNumberer'),rn header: '員工編號', dataIndex: 'EMPNO', width: 80 ,rn header: '姓名', dataIndex: 'FULLNAME', width: 120 ,rn header: '地址', dataIndex: 'ADDRESS', flex: 1 ,rn header: '年齡', dataIndex: 'AGE', width: 60 ,rn header: '薪水', dataIndex: 'SALARY' ,rn header: 'Email', dataIndex: 'EMAIL', renderer: function (value) return Ext.String.format('1', value, value); ,rn header: '部門編號', dataIndex: 'DEPTNO', width: 60, renderer: function (value) rn return Ext.String.format('1', value, value);rn rn rn ],rn dockedItems: [rn rn dock: 'top',rn xtype: 'toolbar',rn items: [rn itemId: 'Button',rn text: '刪除',rn tooltip: '刪除用戶資料',rn iconCls: 'delete',rn handler: function () rn var record = grid.getSelectionModel().getSelection();rn if (record.length == 0) rn Ext.MessageBox.show(rn title: "提示",rn msg: "请先选择您要操作的行!"rn //icon: Ext.MessageBox.INFO rn )rn return;rn else rn var ids = "";rn for (var i = 0; i < record.length; i++) rn ids += record[i].get("id")rn if (i < record.length - 1) rn ids = ids + ",";rn rn rn Ext.MessageBox.show(rn title: "所选ID列表",rn msg: idsrn //icon: Ext.MessageBox.INFO rn )rn rn rn ]rn ,rn rn dock: 'bottom',rn xtype: 'pagingtoolbar',rn store: employeeStore,rn pageSize: 3,rn displayInfo: true,rn displayMsg: '顯示 0 - 1 條,共計 2 條',rn emptyMsg: '没有数据'rn ],rnrn height: 400,rn width: 800,rn disableSelection: false,rn renderTo: 'grid'rn );rn[/code]rnrn为什么一直出现 grid.getSelectionModel()没有定义。 论坛

没有更多推荐了,返回首页