ExtJS 4 更改 paggingtoolbar 中的自定义按钮位置

Question

我有一个分页栏，我创建了一个自定义按钮，并将我的自定义按钮添加到分页栏中，但我希望这个自定义按钮位于分页栏中刷新默认按钮的旁边。

这是我的查看代码：

Ext.define('DEMO.view.mantenimientos.organismos.viewGridMtoOrganismos', {
extend: 'Ext.grid.Panel',
alias: 'widget.viewGridMtoOrganismos',
requires: [
],
initComponent: function() {
    var toolbar2 = {
            xtype: 'toolbar',
            dock: 'top',
            items: [
                    {
                        xtype:'label',
                        text:'Estado',
                        margin: '0 5 0 5',
                        style:{
                            color:'#C85E00',
                            font: 'normal 11px'
                        }
                    },
                    {
                        xtype: 'combo',
                        id: 'comboEstados',
                        value: 'Todos',
                        queryMode: 'local',
                        editable: false,
                        displayField: 'label',
                        valueField: 'value',
                        store: 'filtros.strEstadosMtoOrganismos'
                    },
                    {
                        xtype:'label',
                        text:'CCAA',
                        margins: '0 5 0 5',
                        style:{
                            font: 'normal 11px'
                        }
                    },
                    {
                        xtype: 'combo',
                        id: 'comboCCAA',
                        value: 'Todas',
                        queryMode: 'local',
                        editable: false,
                        displayField: 'label',
                        valueField: 'value',
                        store: 'filtros.strComunidadesAutonomas',
                        matchFieldWidth: false
                    },
                    {
                        xtype:'label',
                        text:'Provincia',
                        margins: '0 5 0 5',
                        style:{
                            font: 'normal 11px'
                        }
                    },
                    {
                        xtype: 'combo',
                        id: 'comboProvincias',
                        value: 'Todas',
                        queryMode: 'local',
                        editable: false,
                        displayField: 'label',
                        valueField: 'value',
                        store: 'filtros.strProvincias',
                        matchFieldWidth: false,
                        disabled: true
                    },
                    '-',
                    '-',
                    {
                        xtype: 'buttongroup',
                        cls: 'estilosBG',
                        layout: {
                            type: 'hbox',
                            align: 'center'
                        },
                        items:[
                               {
                                   xtype:'label',
                                   text:'Referencia',
                                   margins:'4 10 0 10',
                                   style:{
                                       font:'normal 11px'
                                   }
                               },
                               {
                                   xtype: 'textfield',
                                   id: 'tfReferencia',
                                   width: 80
                               },
                               {
                                   xtype: 'label',
                                   text:'Nombre',
                                   margins:'4 10 0 10',
                                   style:{
                                       font:'normal 11px'
                                   }
                               },
                               {
                                   xtype: 'textfield',
                                   id: 'tfNombre',
                                   width: 180
                               },
                               {
                                   iconCls: 'goto',
                                   id: 'btnBuscar'
                               }
                        ]
                    },
                    '->',
                    {
                        xtype:'label',
                        text:'Empresa',
                        margins:'0 5 0 5',
                        style:{
                            font:'normal 11px'
                        }
                    },
                    {
                        xtype: 'combo',
                        id: 'comboEmpresas',
                        value: 'Todas',
                        queryMode: 'local',
                        editable: false,
                        displayField: 'label',
                        valueField: 'value',
                        store: 'filtros.strEmpresas'
                    }
            ]
    }   

    Ext.apply(this, {
        frame: true,
        fieldDefaults: {
            labelAlign: 'top',
            msgTarget: 'side'
        },
        forceFit: true,
        height: 330,
        stripeRows: true,
        loadMask: true,
        scroll:'vertical',
        store:'mantenimientos.organismos.strMtoOrganismos',
        dockedItems: [{
               xtype: 'pagingtoolbar',
               id:'pagingtoolbarGrid',
               store:'mantenimientos.organismos.strMtoOrganismos',
               dock: 'bottom',
               displayInfo: true
        }],
        tbar: {
            xtype: 'container',
            layout: 'anchor',
            defaults: {anchor: '0'},
            defaultType: 'toolbar',
            items: [
                    toolbar2
            ]           
        },
        columns:{
                defaults:{
                    hideable:false,
                    sortable: false
                },
                items:[

                ]
        }
    });
    this.callParent(arguments);
}
});

这是我的控制器：

Ext.define('DEMO.controller.ctrlMtoOrganismos', {
extend: 'Ext.app.Controller',
models:[
        some models
],
stores:[
        some stores
],
views: [ 
        some views
],
refs: [
],
init: function() {
    var Despliegue;
    var idEstado;
    var CCAA;
    var Provincia;
    var Referencia;
    var Nombre;
    var Empresa;
    Ext.getStore('mantenimientos.organismos.strMtoOrganismos').addListener('beforeload',this.BeforeLoadGrid,this);

    this.control({
        'viewModuloMtoOrganismos':{
            afterrender:this.cargarStores
        },
        'viewGridMtoOrganismos #comboEstados':{
            select:this.onSelectEstado
        },
        'viewGridMtoOrganismos #comboCCAA':{
            select:this.onSelectCCAA
        },
        'viewGridMtoOrganismos #comboProvincias':{
            select:this.onSelectProvincia
        },
        'viewGridMtoOrganismos #btnBuscar':{
            click:this.onPulsarBuscar
        },
        'viewGridMtoOrganismos #comboEmpresas':{
            select:this.onSelectEmpresa
        },
        'viewGridMtoOrganismos #btnpaggingLimpiar':{
            click:this.onPulsarLimpiar
        }
    });

},

cargarStores:function(){
    //HERE I ADD THE BUTTON TO THE PAGGINATION BAR
    Ext.getCmp('pagingtoolbarGrid').add('-',{
        text: 'Limpiar Filtros',
        id:'btnpaggingLimpiar',
        iconCls:'limpiar-icon2'
    });
},

onPulsarLimpiar:function(){
    //Aqui la funcionalidad para cuando pulsamos el boton de limpiar
}   
});

但是我想要它就在分页栏的刷新按钮旁边，而不是像图片中那样：

关于我该怎么做的任何想法？

Answer 1

旧代码：

Ext.getCmp('pagingtoolbarGrid').add(

新代码：

Ext.getCmp('pagingtoolbarGrid').insert(
    Ext.getCmp('pagingtoolbarGrid').items.getCount()-2,

或

Ext.getCmp('pagingtoolbarGrid').insert(
    Ext.getCmp('pagingtoolbarGrid').items.indexOf(
        Ext.getCmp('pagingtoolbarGrid').down('tbspacer')
    )-1,

文档化 here

ExtJS 4 更改 paggingtoolbar 中的自定义按钮位置

ExtJS 4 change custom button position in paggingtoolbar

javascript

extjs

extjs4