首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

关于EXTjs的 grid分页有关问题

2013-06-26 
关于EXTjs的 grid分页问题新上手ext,按照示例自己做了一个grid分页,但结果分页toolbar是出来了,也能用,但

关于EXTjs的 grid分页问题
新上手ext,按照示例自己做了一个grid分页,但结果分页toolbar是出来了,也能用,但页面内数据却是很长一大节,设定高度后还有个滚动轴滑块出来,跟没有分页栏没什么区别,请问我是哪里写错了,还是少了什么。


    Ext.onReady(function(){
         
        function createFakeData(count) {
            var firstNames   = ['Ed', 'Tommy', 'Aaron', 'Abe', 'Jamie', 'Adam', 'Dave', 'David', 'Jay', 'Nicolas', 'Nige'],
                lastNames    = ['Spencer', 'Maintz', 'Conran', 'Elias', 'Avins', 'Mishcon', 'Kaneda', 'Davis', 'Robinson', 'Ferrero', 'White'],
                ratings      = [1, 2, 3, 4, 5],
                salaries     = [100, 400, 900, 1500, 1000000];

            var data = [];
            for (var i = 0; i < (count || 25); i++) {
                var ratingId    = Math.floor(Math.random() * ratings.length),
                    salaryId    = Math.floor(Math.random() * salaries.length),
                    firstNameId = Math.floor(Math.random() * firstNames.length),
                    lastNameId  = Math.floor(Math.random() * lastNames.length),

                    rating      = ratings[ratingId],
                    salary      = salaries[salaryId],
                    name        = Ext.String.format("{0} {1}", firstNames[firstNameId], lastNames[lastNameId]);

                data.push({
                    rating: rating,
                    salary: salary,
                    name: name
                });
            }
            return data;
        }

        createModel('Employee', 


        [
                   {name: 'rating', type: 'int'},
                   {name: 'salary', type: 'float'},
                   {name: 'name'}
                ],
                'name');

        var mystore = Ext.create('Ext.data.Store', {  
         pageSize: 10, 
       data: createFakeData(200),  
            model: 'Employee',
            proxy: {
                type: 'memory',
                url:'',
                reader:{root:'items',totalProperty:'total'}
            }, 
            sorters: [{   property: 'rownumberer',   direction: 'ASC'  }] 

        }) 
  var grid = Ext.create('Ext.grid.Panel', { 
            title:'测试分页表单',
            width:600,
            // height:400,
          
            store:mystore,
            loadMask:true,
            collapsible:false,
            selModel:new Ext.selection.CheckboxModel, 
            columns:[{ 
                    xtype: 'rownumberer',
                    width: 40,
                    sortable: false
                },{
                    text: 'Name',
                    flex:1 ,
                    sortable: true,
                    dataIndex: 'name'
                },{


                    text: 'Rating',
                    width: 125,
                    sortable: true,
                    dataIndex: 'rating'
                },{
                    text: 'Salary',
                    width: 125,
                    sortable: true,
                    dataIndex: 'salary',
                    align: 'right',
                    renderer: Ext.util.Format.usMoney
                }],
              
       dockedItems:[{
           xtype: 'pagingtoolbar',
                    store: mystore,  // same store GridPanel is using
                    dock: 'bottom', //分页 位置
                    emptyMsg: '没有数据',
                    displayInfo: true,
                    displayMsg: '当前显示{0}-{1}条记录 / 共{2}条记录 ',
                    beforePageText: '第',
                    afterPageText: '页/共{0}页'
       }], 
        
                renderTo:'demo'
         } );
         mystore.loadPage(1); 
    });


<div id='demo'></div>


[解决办法]
和你的后台的取数据的查询语句有关系,你需要取到分页信息(如:当前页,每页条数),然后传递到后台,进行分页查询
[解决办法]
每页20条数据
grid.store.load({params:{start: 0, limit: 20}});

热点排行