Extjs分页工具栏:无法设置启动

时间:2013-03-01 12:59:59

标签: extjs

我的分页工具栏有问题。 我想给用户提供设置每页结果数(限制)的选项。我有一个下拉菜单。 我已将页面大小初始化为20。 当我从下拉列表中设置我的限制(例如50)时,n假设我得到90个结果,所以在第一页上它正确显示1-50个结果,但是在下一页上它显示的结果是21-70而不是51-90 。 因此,我无法根据下拉列表设置的限制重置页面大小。开始总是拿起初始化的页面大小。 有什么建议?  我附上我的代码......

linkCheckerUI = {

pageSize: 20,
    test:null,

    getPanel: function(config) {

        var fields = ["path","jcrObject","type","URL","response"];
        var rootpath = null;
        var term= null;
        var end=null;
        var internal_links=null;
        var external_links=null;
        var smart_links=null;
        var videoid_links=null;
        this.store = new CQ.Ext.data.Store({

            proxy: new CQ.Ext.data.HttpProxy({

                            url: '/bin/linkchecker',
                            method: 'GET'
                            }),
               reader: new CQ.Ext.data.JsonReader({
                                "root": "data",
                                "fields": fields,
                                "idProperty":'jcrObject',
                                 totalProperty: 'results'

                            }), 
                 baseParams: { searchterm: term,startpath: rootpath, endpath: end,
                      internal: internal_links,external: external_links,smart: smart_links,videoid: videoid_links}


            });
        test=this.store;

        this.store.on('beforeload',function(store, operation,eOpts){

        limit= CQ.Ext.getCmp('limit').getRawValue();
        limit = (limit=="") ? 15 : limit;
        pageSize = limit;
        start=operation.params.start;
        start = (start==null) ? 0 : start;
        searchterm = CQ.Ext.getCmp('searchterm').getValue();
        startpath = CQ.Ext.getCmp('startpath').getValue();
        endpath = CQ.Ext.getCmp('endpath').getValue();
        internal = CQ.Ext.getCmp('internal').getValue();
        external = CQ.Ext.getCmp('external').getValue();
        smart = CQ.Ext.getCmp('smart').getValue();
        videoid = CQ.Ext.getCmp('videoid').getValue();
        ebroken = CQ.Ext.getCmp('excludebroken').getValue();
        ehealthy= CQ.Ext.getCmp('excludehealthy').getValue();
        alert(start);
              operation.params={
                      searchterm: searchterm ,startpath: startpath , endpath: endpath ,
                      internal: internal ,external: external,smart: smart,videoid: videoid,start:start,
                      limit:limit,ebroken: ebroken,ehealthy: ehealthy
            };},this);

        this.loadGrid();
        this.loadForm();

        // create main panel
        this.panel = new CQ.Ext.Panel({
            region: 'center',
            layout: 'border',
            margins: '5 5 5 5',
           height:'100%',
            border: false,
            items: [this.form,this.grid]
        });

        // load grid data
        this.reload();

        // return outer panel
        return this.panel;
    },


    /**
     * Load form
     */
    loadForm: function() {
        var searchterm = null;


        this.form = new CQ.Ext.form.FormPanel({
            region: "north",

            title: "Link Control Center",
            width: 220,
            top: 50,
            height:350,
            collapsible: false,
            split: true,
            parent: this,
            padding:'10px',

            items: [
                    {
                        xtype: 'textfield',
                        name: 'searchterm',
                        id: 'searchterm',
                        fieldLabel:'Search Term',
                        emptyText:'Please enter a search term',
                        width: 583
                    },
                    {
                        xtype: 'pathfield',
                        name: 'startpath',
                        id: 'startpath',
                        fieldLabel: 'Start Path',
                        allowBlank: false,
                        width: 600
                    },
                    {
                        xtype: 'pathfield',
                        name: 'endpath',
                        id: 'endpath',
                        fieldLabel: 'End Path',
                        width: 600

                    },
                    {
                        xtype: 'combo',
                        name: 'limit',
                        id:'limit',
                        fieldLabel: 'Result Display',
                        emptyText:'Select # results per page',
                        typeAhead: true,
                        mode: 'local',
                        triggerAction: 'all',
                        store: [['val1','15'],['val2','100'],['val3','500'],['val4','1000'],['val5','All']]

                    },
                    {
                        fieldLabel: 'Link Type',
                        xtype: 'checkbox',
                        boxLabel: 'Internal',
                        checked   : true,
                        name: 'internal',
                        id:'internal'

                    },
                    {
                        xtype: 'checkbox',
                        boxLabel: 'External',
                        checked   : true,
                        name: 'external',
                        id:'external'

                    },
                    {
                        xtype: 'checkbox',
                        boxLabel: 'SMART',
                        checked   : true,
                        name: 'smart',    
                        id:'smart'

                    },
                    {
                        xtype: 'checkbox',
                        boxLabel: 'Video (Asset ID)',
                        checked   : true,
                        name: 'videoid',                        
                        id: 'videoid'
                    },
                    {
                        fieldLabel: 'Exclude',
                        xtype: 'checkbox',
                        boxLabel: 'Exclude broken links',
                        name: 'excludebroken',
                        id:'excludebroken'
                    },
                    {
                        xtype: 'checkbox',
                        boxLabel: 'Exclude healthy links',
                        name: 'excludehealthy',
                        id: 'excludehealthy'

                    }

                ],

                buttons:[{
                    text: 'Submit',
                    handler: function() {
                    searchterm = CQ.Ext.getCmp('searchterm').getValue();
                    startpath = CQ.Ext.getCmp('startpath').getValue();
                    endpath = CQ.Ext.getCmp('endpath').getValue();
                    internal = CQ.Ext.getCmp('internal').getValue();
                    external = CQ.Ext.getCmp('external').getValue();
                    smart = CQ.Ext.getCmp('smart').getValue();
                    videoid = CQ.Ext.getCmp('videoid').getValue();
                    limit = CQ.Ext.getCmp('limit').getRawValue();
                    pageSize=15; 
                    alert("2");
                   test.clearFilter(false);
                   if(startpath){

                       if (endpath.substring(0, startpath.length) == startpath || endpath=="")
                       {
                           test.load();
                       } 
                       else
                       {
                           alert('Specified End Path is not within Start Path node!\nSelect an End Path within and below Start Path hierarchy node');

                       }
                   }

                   else{
                       alert('Fill in all required fields before submitting the query');
                   }           

                }  
                        }

                ]


        });         
    },

    /**
     * Load grid
     */
    loadGrid: function() {

    // export to CSV button
    this.exportCSVButton = new CQ.Ext.Button({iconCls: 'icon-csv', text: 'Export as CSV'});
    this.exportCSVButton.setHandler(function() {
                    searchterm = CQ.Ext.getCmp('searchterm').getValue();
                    startpath = CQ.Ext.getCmp('startpath').getValue();
                    endpath = CQ.Ext.getCmp('endpath').getValue();
                    internal = CQ.Ext.getCmp('internal').getValue();
                    external = CQ.Ext.getCmp('external').getValue();
                    smart = CQ.Ext.getCmp('smart').getValue();
                    videoid = CQ.Ext.getCmp('videoid').getValue();
                    ebroken = CQ.Ext.getCmp('excludebroken').getValue();
                    ehealthy= CQ.Ext.getCmp('excludehealthy').getValue();

                   var url = "/bin/linkchecker.csv?searchterm="+searchterm +"&startpath="+startpath +"&endpath="+endpath+ "&internal="+internal +"&external="+external+
                   "&smart="+smart+"&videoid"+videoid+"&ebroken="+ebroken +"&ehealthy="+ehealthy+"&start=0&limit=-1" ;

                    window.location=(url);
    }, this);

    var body = CQ.Ext.getBody();
     this.grid = new CQ.Ext.grid.GridPanel({
        region: "center",
        border:false,
        store: this.store,
        //parent:this,
        loadMask: new CQ.Ext.LoadMask(body, {msg: 'Loading please wait...'}),
        tbar: ['Result List',
               '->', this.exportCSVButton 
           ],

           columns: [
                     {header: "Path", width: 80,dataIndex: 'path', sortable: true},                                 
                     {header: "JCR Object Node", width: 80,dataIndex: 'jcrObject', sortable: true},
                     {header: "Type", width: 15, dataIndex: 'type', sortable: true},
                     {header: "URL", width: 70, dataIndex: 'URL', sortable: true},
                     {header: "Error Type", width:15, dataIndex: 'response', sortable: true, 
                                            renderer: function(value){ if (value =='200')return '<span style="color:green;">'+value+'</span>'; else return '<span style="color:red;">'+value+'</span>';}}
                     ],
                     renderTo:this.grid,
           stripeRows: true,         
        viewConfig: {
            forceFit: true
        },
        bbar: new CQ.Ext.PagingToolbar({
            store: this.store,
            pageSize:this.pageSize,
            displayInfo: true

        }),
        sm: new CQ.Ext.grid.RowSelectionModel({singleSelect:true}),
        iconCls:'icon-grid'
    });
     alert("3");
        this.grid.loadMask.show();

    },

    /**
     * Reload grid data (reset to first page)
     */
    reload: function() {
        alert("4");
       this.store.load({ baseParams: {start: 0, limit: this.pageSize}});
    }

}

1 个答案:

答案 0 :(得分:0)

尝试在商店中使用extraParams。

this.store.getProxy().extraParams = { start: 0, limit: this.pageSize};
this.store.load();