当前位置: 代码迷 >> Ajax >> 【ext js】如下代码(完整的,粘贴就可运行)的分页不成,求解~
  详细解决方案

【ext js】如下代码(完整的,粘贴就可运行)的分页不成,求解~

热度:464   发布时间:2012-03-07 09:13:51.0
【ext js】如下代码(完整的,粘贴就可运行)的分页不成,求解~ - Web 开发 / Ajax
如下代码(完整的,粘贴就可运行)的分页不成,求解~

右部隐去了,见下面截图


HTML code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>12.html</title>

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <link rel="stylesheet" type="text/css" href="extjs/ext-3.2.1/resources/css/ext-all.css" />
    <script type="text/javascript" src="extjs/ext-3.2.1/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="extjs/ext-3.2.1/ext-all.js"></script>
    <script type="text/javascript" src="extjs/ext-3.2.1/locale/ext-lang-zh_CN.js"></script>

    </head>
    <script>
    

    Ext.onReady(function(){
    
    var cm = new Ext.grid.ColumnModel([
                    {header:'编号',dataIndex:'id'},
                    {header:'性别',dataIndex:'sex'},
                    {header:'名称',dataIndex:'name'},
                    {header:'描述',dataIndex:'descn'}
                    ]);
    cm.defaultSortable = true;
    

    //JsonData
    var jsondata = { 
        'coders': [
            {'id':'1','sex':'male','name':'McLaughlin','descn':'brett@nance.com'},
            {'id':'2','sex':'male','name':'Hunter','descn':'jason@servlets.com'},
            {'id':'3','sex':'female','name':'Harold','descn':'elharo@macfaq.com'},
            {'id':'4','sex':'male','name':'Harolds','descn':'elhaross@macfaq.com'}
        ],
        'musicians':[
            {'id':'1','name':'Clapton','descn':'guitar'},
            {'id':'2','name':'Rachmaninoff','descn':'piano'}
        ]
    };
    

    
    // ArrayReader
    var ds = new Ext.data.Store({
        proxy: new Ext.data.MemoryProxy(jsondata),
        reader: new Ext.data.JsonReader({root: 'coders'}, [
            {name: 'id'},
            {name: 'sex'},
            {name: 'name'},
            {name: 'descn'}
        ])
    });
    
    ds.load({params:{start:0,limit:2}});

    
    
        var grid = new Ext.grid.GridPanel({
                                    el: 'grid',
                                    ds: ds,
                                    cm: cm,
                                    title: 'HelloWorld',
                                    autoHeight: true,//一定要写,否则显示的数据会少一行
                                    bbar: new Ext.PagingToolbar({
                                                                pageSize:2,
                                                                store: ds,
                                                                displayInfo: true,
                                                                displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
                                                                emptyMsg: "没有记录"
                                                                })                            
                                    
                                });
        grid.render();
        grid.getSelectionModel().selectFirstRow();
    });
   </script>
    <body>
        <div id='grid'></div>
    </body>
</html>



------解决方案--------------------
JScript code

///具体不知道楼主到底是什么问题,分页控件里有一个change事件
change:function(me,pagedata,opt){
   ///用火狐或谷歌打印出这些参数,看看你的分页参数是怎么变的
}

------解决方案--------------------
store = new Ext.data.JsonStore({ // gird的数据
root : 'info',
  相关解决方案