EXT-JS4中的分页不起作用

时间:2014-01-23 19:01:20

标签: pagination grid extjs4

我对EXT js 4.1.0中的分页感到困惑。我实现了分页显示正确的计数,但网格没有根据刷新页面进行更新。

  Ext.define('person', {
                extend: 'Ext.data.Model',
                fields: [
                    // the 'name' below matches the tag name to read, except 'availDate'
                    // which is mapped to the tag 'availability'
                    {name: 'sso', type: 'string'},
                    {name: 'fname', type: 'string'},
                    // dates can be automatically converted by specifying dateFormat
                    {name: 'lname', type: 'string'},
                    {name: 'msso', type: 'string'},
                    {name: 'email_address', type: 'string'},
                    {name: 'person_status', type: 'string'}                     
                ]
            });

  var ds = new Ext.data.Store({
            model:'person',
              autoLoad: true, 
            //url:'/FormAction',
             actionMethods: {create: "POST", read: "POST", update: "POST", destroy: "POST"},
         proxy: {  
             type: 'ajax',      
             url: '/identityiq/FormAction',       
             reader: {      
                 type: 'xml',
                 record: 'record'
              },
           }                

            });

    ds.load({
    params:{
        start:0,
        limit: 25
    }
 });

   var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit: 1,
                listeners: {
                    validateedit: function(editor, e) {
                        //alert('New value (validateedit): ' + e.value);
                    },
                    edit: function(editor, e) {
                        //alert('Old value (edit): ' + e.value);
                    }
                }
            });

   // create the Grid
var grid = Ext.create('Ext.grid.Panel', {
    store: ds,
    dockedItems:[
{
    xtype: 'pagingtoolbar',
    pageSize: 25,
    store:ds,
    dock: 'bottom',
    displayInfo: true,
    displayMsg:'Displaying records {0} - {1} of {2}  ',
    emptyMsg:"No records to display ",
    flex:1
}
   ],           columns: [
        {
            text     : 'SSO',
            width:80,
            sortable : true,
            dataIndex: 'sso'
        },
        {
                    id: 'fname',
                    header: 'First Name',
                    dataIndex: 'fname',
                    width:100,                      
                    field: {
                        allowBlank: false
                    }
        },
        {

            id: 'lname',
            header     : 'Last Name',
            width:100,              
            sortable : true,
            dataIndex: 'lname',
            field: {
                        allowBlank: false
                    }
        },
        {
            text     : 'Manager SSO',
            width    : 80,
            sortable : true,               
            dataIndex: 'msso'
        },
        {
            text     : 'Email Address',
            width    : 200,
            sortable : true,               
            dataIndex: 'email_address'
        },
        {
            text     : 'Personstatus',
            width    : 80,
            sortable : true,               
            dataIndex: 'person_status'
        }
    ],
    selModel: {
        selType: 'cellmodel'
    },
    height: 400,
    width: 700,
    title: 'Array Grid',
    renderTo: 'myDiv',
    viewConfig: {
        stripeRows: true,
        enableTextSelection: true
    },
    frame: true,        
    plugins: [cellEditing],
    tbar: [
 {
     text: 'Save',


     handler: function ()
     {
        alert(ds.getModifiedRecords());
        console.log(ds.getModifiedRecords());

        var modified_data ={};
        modified_data = ds.getModifiedRecords();

        for (var i = 0; i < modified_data.length; i++) {
                var record = modified_data[i];                  
                alert(record.data.fname);
        }
}
 }
 ],
});

尝试在不同论坛中提供的不同版本,但没有运气。网格不会随着页面的变化而刷新。

服务器端也需要进行任何更改以实现分页。

先谢谢。

感谢您的回复。 请找到我的服务器端代码,它是一个简单的Servlet,具有这种处理方法 - 请建议我为了工作分页需要更改的内容。

尝试{

        ServletOutputStream  sos = response.getOutputStream();
        response.setHeader("Cache-Control","no-store"); 
        response.setHeader("Pragma","no-cache");
        response.setContentType("text/xml");

        String query="select * from table'";

        OracleDataSource ods = new OracleDataSource();

        Connection conn = ods.getConnection();
        Statement statement = conn.createStatement();

        ResultSet rs = statement.executeQuery(query);
        sos.println("<dataset>");
        while(rs.next()) {
            sos.println("<record>");
                sos.println("<sso>"+ rs.getString("person_num_sso") +"</sso>");
                sos.println("<fname>"+ rs.getString("first_name") +"</fname>");
                sos.println("<lname>"+ rs.getString("last_name") +"</lname>");
                sos.println("<msso>"+ rs.getString("manager_person_num") +"</msso>");
                sos.println("<email_address>"+ rs.getString("email_address") +"</email_address>");
                sos.println("<person_status>"+ rs.getString("person_status") +"</person_status>");
            sos.println("</record>");
        }
        sos.println("</dataset>");
        rs.close();
        conn.close();           
        sos.close();
        System.out.print("Done list servlet");
    } catch (IOException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    } catch (SQLException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    } 
}

2 个答案:

答案 0 :(得分:0)

虽然在没有看到服务器端代码的情况下我无法肯定地说,我的猜测是网格没有更新,因为下一页的每个请求都返回与第一页相同的数据。您的服务器端代码负责转换数据的“页面”,通常是通过向查询数据的任何内容发送限制/启动/页面。不过,首先要看的是Chrome Developer工具或Firebug,以确保您获得每页所需的数据。如果每页的数据相同,则表示您遇到服务器端代码问题。

但要记住的重要一点是,Ext JS并不负责分页数据。 “分页”工具栏所做的就是在AJAX请求中发送参数,该参数指示服务器如何转换所请求的数据......甚至此请求最终也基于服务器已经提供的信息(例如,总数)数据集大小)。在这方面,Ext JS与服务器的关系是“握手”:Ext JS请求数据并假设服务器将以它要求的格式返回。如果服务器不符合此请求,Ext JS无法知道(因为它不知道您在服务器上的数据),并且只会呈现它在响应中返回的任何数据。

这是我假设在你的情况下发生的事情:服务器为每个页面返回相同的记录。由于Ext JS无法区分这两者,因此它继续以其快乐的方式,根据服务器所存在的总数据集来分页数据。通过这种方式,您的网格正确刷新;它只是一个错误,因为刷新的数据不会改变。

答案 1 :(得分:0)

确实是您缺少的服务器端代码的变化。 您应该使用参数start和limit来限制查询,而不是select * from table,换句话说,您应该只返回网格页面所期望的记录集....而不是所有记录

* start和limit是商店默认发送的参数,在servlet上捕获它们

最好的问候@ code4jhon