javascriptextjsextjs4
ExtJS 4 change custom button position in paggingtoolbar
I have a paggination bar,and I have created a custom button,and added my custom button to the paggination bar,but I want this custom button next to the refresh default button in the paggination bar.
This is my view code:
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);
}
});
And this is my controller:
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
}
});
But I want it just next to the refreh button of the paggination bar,not like in the picture:
Any ideas on how can I do that?
Solution
old code:
Ext.getCmp('pagingtoolbarGrid').add(
new code:
Ext.getCmp('pagingtoolbarGrid').insert(
Ext.getCmp('pagingtoolbarGrid').items.getCount()-2,
or also
Ext.getCmp('pagingtoolbarGrid').insert(
Ext.getCmp('pagingtoolbarGrid').items.indexOf(
Ext.getCmp('pagingtoolbarGrid').down('tbspacer')
)-1,
Duckumentation here
- Apply :focus-visible when focusing element programatically
- Set the background color of the entire webpage (the browser's window)
- Javascript onload and onunload
- jQuery button click not showing/hiding content
- Force div to have an even width and height?
- How to auto-reload files in Node.js?
- How to specify an array of objects as a parameter or return value in JSDoc?
- Initializing an Array with a Single Value
- How to recursively read local files and directories in web browser using File System Access API
- Short circuit Array.forEach like calling break
- encrypt to multiple public keys with RSA using Webcrypto
- Pagination where the number of pages is automatically discovered from a specific folder on the server
- Binary Tree Level Order Traversal using Javascript
- How to wait until an element exists?
- stop iframe from affecting load times
- Is there a simple way to make a HTML relational selection?
- Use JavaScript Code to run Puppeteer from Laravel Controller
- Displaying the number of rows in footer of webix grid
- Javascript Memoization Explanation?
- Resize image with javascript canvas (smoothly)
- Keyboard shortcut to extract local variable in JS/TS in Visual Studio Code
- NextJS 15 loading.tsx not showing
- How to create a react native ios share extension app
- Alternative or polyfill for Array.from on the Internet Explorer
- Mocha and the this context
- How to define an array with conditional elements in react
- Firestore orderBy Timestamp DESC
- changing element in ngOnInit not working when changing route, but is able to access element
- React functional stateless component, PureComponent, Component; what are the differences and when should we use what?
- How to set onClick with JavaScript?