extjs分页以及查询分页

妖狐艹你老母 2022-08-08 06:13 389阅读 0赞

1、List.js ：view

Ext.define('RCP.view.customer.List', {
        extend: 'Ext.grid.Panel',
        alias: 'widget.customerList',
    
        padding: 5,
        autoScroll: true,
        title: '客户信息',
        emptyText: '无客户信息',
    
        initComponent: function () {
            var me = this;
    
            var store = Ext.create('Ext.data.Store', {
                model: 'RCP.model.Customer',
                pageSize:10,                    ///分页需要添加：每页显示多少行
                proxy: {
                    type: 'ajax',
                    url: 'customer/ListAction.action',
                    reader: {
                        type: 'json',
                        root: 'List',
                        successProperty: 'success',
                        totalProperty: 'total' //分页需要添加：总数 }
                },
                autoLoad:{
      params: {
      start: 0, limit:10}},///分页需要添加：开始数，每页多少
                autoLoad: true });
    
            this.columns = [
                {
                    header: 'cusId',
                    dataIndex: 'cusId',
                    hidden:true,
                    flex: 1
                },
                {
                    header: '姓名',
                    dataIndex: 'name',
                    flex: 1
                },
                {
                    header:'电话',
                    dataIndex:'mobile',
                    flex:1
                }
    
            ];
    
            this.store = store;
    
    
    
            var refreshAction = Ext.create('Ext.Action', {
                text: '刷新',
                handler: function () {
                    store.reload();
                }
            });
            var editAction=Ext.create('Ext.Action',{
                text:'编辑',
                handler:function(){
                    var record = me.getSelectionModel().getSelection()[0];
                    if(record){
                        showEditInvitation(record);
                    }
                }
            });

//查询按钮
            var searchContractAction = Ext.create('Ext.Action', {
                text: '查 询',
                store: this.store,
                width:100,
                handler: function () {  /事件监听
                    //添加beforeload事件 用于传递参数 var name = searchForm.getForm().findField('name').getValue();/查询参数
                    store.on('beforeload', function (store, options) {
                        var new_params = {
                            name:name
                        };
                        Ext.apply(store.proxy.extraParams, new_params);
                    });
                    store.load({
                        callback: function (records, options, success) {
                        }
                    });
    
    
                }
            });
            //创建搜索表单 var searchForm = Ext.create('Ext.form.Panel', {
                xtype: 'form',
                bodyPadding: 5,
                border: false,
                fieldDefaults: {
                    labelAlign: 'right',
                    msgTarget: 'side' },
                defaults: {
                    anchor: '100%' },
                items: [
    
                    {
                        xtype: 'toolbar',
                        dock: 'top',
                        layout: 'hbox',
                        items: [
                            {
                                layout : 'column',
                                frame : true,
                                xtype: 'container',
                                border: false,
                                items: [
                                    {
                                        fieldLabel: '名称',
                                        labelWidth: 70,
                                        xtype: 'searchfield',
                                        width:180,
                                        name: 'name',
                                        emptyText: '请输入客户名称',
                                        id:'name' }
                                ]
                            },
                            searchContractAction,
                            '-',
                            editAction,
                            '-',
                            refreshAction
    
                        ]
                    }
    
                ]
            });
    
            function showEditInvitation(record) {
                var view = Ext.widget('customerEditWindow', {
                    cusId: record.get('cusId')
                });
                view.on("close", function () {
                    if (view.ok)
                        store.reload();
                });
            }
            this.dockedItems = [
                {
                    dock: 'top',
                    xtype: 'toolbar',
                    items: [
                        searchForm
                    ]
                },
                {
                    xtype: 'pagingtoolbar',
                    store: store,   // same store GridPanel is using dock: 'bottom',
                    displayInfo: true ,
                    displayMsg:"显示第{0}条到第{1}条数据，共{2}条数据",
                    align:'right' }
            ];
    
    
            this.callParent(arguments);
        }
    });
    2、customer.java

添加

private int start;
    private int limit; public int getStart() { return start; }
    public void setStart(int start) { this.start = start; }
    public int getLimit() { return limit;}
    public void setLimit(int limit) { this.limit = limit;} 3、action.java private int total;
    private String name; private List<Customer> List; public String getName() {
         return name;}
    public void setName(String name) {
         this.name = name;}
    public int getTotal() {
         return total;}
    public void setTotal(int total) {
         this.total = total;} public List<Customer> getList() {
          return List;}
    public void setList(List<Customer> List) {
          this.List = List;} public String execute() throws ParseException {
        Customer c=new Customer(); isNotEmpty:判断字符串是否非空，isNotBlank：判断是否不为空且长度不为0且不由空白符（whitespace）构成    if (StringUtils.isNotBlank(name)){  
            c.setName(name);    }    c.setStart(super.getStart()+1);    c.setLimit(super.getStart()+super.getLimit());    List=customerServiceImpl.selectList(c);    total=customerServiceImpl.selectCount(c);    return SUCCESS;} 4、daoImpl @Override
    public List<Customer> selectList(Customer customer){
        List<Customer> list=sqlMapClientTemplate.queryForList("customerSqlMap.selectList",customer);
        return list;
    } @Override
    public int selectInvitationCount(Customer customer){
        Integer i =(Integer)sqlMapClientTemplate.queryForObject("customerSqlMap.selectCount", customer);
        return i.intValue();
    } 5、ibatis   <select id="selectList" resultClass="customerObj" parameterClass="customerObj">
        select * from (select c.*,ROWNUM rn  from(select * from (select * from customer cc
        <dynamic prepend="WHERE">
            <isNotEmpty prepend="AND" property="name">
                cc.NAME like '%$name$%'
            </isNotEmpty>
        </dynamic>
        )  where #limit#>=ROWNUM) c )where rn>=#start#
    </select>
    <select id="selectCount" parameterClass="customerObj" resultClass="int">
        select count(*)  from customer
    </select>