Extjs-PagingToolbar对GridPanel进行分页的处理

posted by David Chen at April 21, 2008, 2:02 AM    

paramNames, 是一个PagingToolbar的public property，
默认是有 start, limit 这两个参数名字，如果想改变参数名字，可以使用ptb.paramNames = { start: 'p1', limit: 'p2' }

以下这几个函数和grid结合可以实现搜索和分页
    function resizeable() {
        new Ext.Resizable("grid", {
                handles: 's',
                /* 'n' north, 's' south,'e' east,'w' west,'nw' northwest,
                   'sw' southwest,'se' southeast,'ne' northeast,'all'
                */
                pinned:true, //总是显示,false,就当鼠标移上时显示
                dynamic: true
        });
    }

    // 的两个按纽和一个input 处理grid数据的搜索和清除
    function butHander(searchName, blClean) {
        if( blClean )
            store.load( {
                params: { start: 0, limit: 10, id: '0' }
                // 因为数据库id是1开始的，设置为0,就当于是空列表了
            } );
        else
            store.load( {
                params: {start: 0, limit: 10, name: searchName}
                // 通过searchName参数查 name为searchName的记录
            } );
    }

    // 这个store用于grid和PagingToolbar
    var store = new Ext.data.Store({ // 记住不能是 SimpleStore
        fields: ['id', 'name', 'occupation', 'date1', 'image'],
        url: './testaction.do?method=search',
        reader: new Ext.data.XmlReader(
                {
                totalRecords: 'TotalCount', // xml 对应
                record: 'Item',
                id: 'id'
                },
                [ {name:'id', mapping: 'id'}, {name:'name', mapping: 'name'}, 
                  {name:'occupation'}, {name:'date1'}, {name:'image'}]
                )
    });
    store.addListener('load', function(st, rds, opts) {
                for( var c=0; c<rds.length; c++ ) {
                    var d = Date.parseDate(rds[c].get('date1'), 'Y-m-d');
                    rds[c].set('date1', d); // 有一个date型的数据,转化为js的date型
                }
                resizeable(); // 假设gridPanel是可以resize的，在这里重新设一次
    });

    // 在grid中添加 bbar, 在bbar 为显示分页栏,也可以不放在bbdr中,直接放到panel中显示,
除了Store,bar与grid没有什么关联
        bbar: new Ext.PagingToolbar({
            id: 'ptbar',
            store: store, // 与和GridPanel的store应该一样
            pageSize: 10, // 默认是25,会给sotre的url传送 limit=10的参数
            displayInfo: true, // 显示信息
            displayMsg: 'Topics {0} - {1} of {2}',
            // beforePageText: '', // 设置 page文字出现位置前面的字, defaults to "Page"
            // afterPageText: '', //设置 page文字出现位置后面的字, defaults to "of %0"
            //firstText: '',
            //prevText: '',
            //nextText: '',
            //lastText: '',
            //refreshText: '',
            // {0} grid中的第一条的编号, {1} grid中最后一条的编号, {2} 总的记录数，与XML中
               的totalRecords对应
            emptyMsg: "No topics to display" // 如果grid没有记录，显示的信息
        })