PDA

View Full Version : Append items to Ext.toolbar.Toolbar



mkrakowski
1 Apr 2013, 10:34 AM
Hi I'm trying to append a search box to an existing top toolbar, but instead of being appended, (2) toolbars are being generated at 'top'.

The search is being initialized as a plugin,



if (options.searchPlugin) {
grid.initPlugin(Ext.create('Ext.ux.GridSearch', {
position : 'top',
iconCls : 'icon-zoom',
readonlyIndexes : options.searchReadonly,
disableIndexes : options.searchDisabled,
autoFocus : true
}));
}


and the plugin is finding the toolbar using the following code:



var tb = Ext.ComponentQuery.query('toolbar', grid)[0];


What I'm seeing..

42814

Desired result...

42815


Thanks!

existdissolve
1 Apr 2013, 4:32 PM
Can you share the code of how all the pieces fit together?

mkrakowski
1 Apr 2013, 4:44 PM
Here's the code I'm using to initialize the toolbar and plugin..



// Setup search plugin
if (options.searchPlugin) {
grid.initPlugin(Ext.create('Ext.ux.GridSearch', {
position : 'top',
iconCls : 'icon-zoom',
readonlyIndexes : options.searchReadonly,
disableIndexes : options.searchDisabled,
autoFocus : true
}));
}


// Create grid toolbar
var gridToolbar = Ext.create('Ext.toolbar.Toolbar', {
dock : 'top',
items : [{
text : options.addLabel,
iconCls : 'icon-add',
listeners : {
click : {
fn : function() {
TOP.load_tab(edit_url);
}, buffer: 200
}
}
},{
text : options.deleteLabel,
iconCls : 'icon-delete',
listeners : {
scope : grid.selModel,
click : {
fn : function() {
TOP.delete_item({
deleteTitle : options.deleteConfirm[0],
deleteMsgPrefix : options.deleteConfirm[1],
deleteMsgSuffix : options.deleteConfirm[2],
deleteMsgEmpty : options.deleteEmpty,
url : delete_url,
selected : (typeof this.getSelection() != 'undefined' ? this.getSelection() : []),
id_field : options.columns[0].dataIndex,
key_field : options.key_field,
afterSuccess : function() {
grid.getStore().load();
if (options.debug) TOP.debug('grid: delete success');
}
});
}, buffer: 200
}
}
}]
});


// Add the toolbar
grid.addDocked(gridToolbar);


The plug in code is from this forum (ext.ux.gridsearch) :




/*
* Ext.ux.GridSearch
* Based on [ Ext.ux.grid.Search ] http://gridsearch.extjs.eu
* Search plugin for Ext.grid.GridPanel, Ext.grid.EditorGrid
*
*/


Ext.define('Ext.ux.GridSearch', {
extend : 'Ext.util.Observable',
alias : 'plugin.gridsearch',
requires : ['Ext.form.field.VTypes'],
searchText : 'Search',
selectAllText : 'Select all',
clearIconCls : 'x-form-clear-trigger',
iconCls : 'x-form-search-trigger',
width : 250,
minChars : 2,
mode : 'local',


init : function(grid) {
this.grid = grid;
grid.on('render', this.onRender, this, { single : true });
grid.on('render', this.reconfigure, this, { single : true });
},


onRender : function(grid) {
var ptb = Ext.ComponentQuery.query('pagingtoolbar', grid)[0]; // paging toolbar object
var tb = Ext.ComponentQuery.query('toolbar', grid)[0]; // top toolbar object


var get_topToolbar = grid.dockedItems;
// var gridBar = Ext.getCmp('toolbar-1053')
console.log(get_topToolbar);

// Get position from admin.js param
if (this.position !== 'top' || this.position !== 'bottom') {
grid.addDocked({
xtype : 'toolbar',
dock : 'bottom'
});
this.tb = Ext.ComponentQuery.query('toolbar', grid)[0];
}
else if (this.position !== 'top') { this.tb = ptb; }
else { this.tb = tb; }


this.tb = tb; // force tb
if (0 < this.tb.items.getCount()) { this.tb.add('-'); }


// Build drop-down menu
this.menu = new Ext.menu.Menu();
this.tb.add({
text : this.searchText,
menu : this.menu,
iconCls : this.iconCls
});


// Build field
this.field = new Ext.form.TriggerField({
width : this.width,
selectOnFocus : true,
triggerCls : this.clearIconCls,
onTriggerClick : this.onTriggerClear(this),
minLength : this.minChars
});
this.field.on('render', function() {
this.field.el.on({
scope : this,
buffer : 700,
keyup : this.onKeyUp
});
}, this, {
single : true
});


this.tb.add(this.field);
},




onKeyUp : function(e, t, o) {
if (!this.field.isValid()) { return; }
var val = this.field.getValue();
var store = this.grid.store;
if ('local' === this.mode) {
store.clearFilter();
if (val) {
store.filterBy(function(r) {
var retval = false;
this.menu.items.each(function(item) {
if (!item.checked || retval) { return; }
var rv = r.get(item.dataIndex);
rv = rv instanceof Date ? Ext.Date.format(rv, this.dateFormat || r.fields.get(item.dataIndex).dateFormat) : rv;
var re = new RegExp(Ext.util.Format.escapeRegex(val), 'gi');
retval = re.test(rv);
}, this);
if (retval) { return true; }
return retval;
}, this);
}
} else {
var fields = [];
this.menu.items.each(function(item) {
if (item.checked) {
if (item.dataIndex) { fields.push(item.dataIndex); }
}
});


// Build extra params within the proxy to allow pagination to be
// passed to the remote query using the gridsearch fields and data.
store.proxy.extraParams = Ext.applyIf({
fields : Ext.encode(fields),
query : val
}, store.proxy.extraParams);
store.load();
}
},




onTriggerClear : function(el) {
return function() {
if (el.field.getValue()) {
el.field.setValue('');
el.field.focus();
el.onKeyUp();
}
};
},


reconfigure : function(grid) {
this.menu.add(new Ext.menu.CheckItem({
text : this.selectAllText,
checked : !(this.checkIndexes instanceof Array),
hideOnClick : false,
handler : function(item) {
var checked = !item.checked;
item.parentMenu.items.each(function(i) {
if (item !== i && i.setChecked && !i.disabled) {
i.setChecked(!checked);
}
});
}
}), '-');


// Column model
var cm = this.grid.columns;
Ext.each(cm, function(config) {
text = config.header || config.text;
searchable = config.searchable == undefined || config.searchable ? true : false;
if (text && config.dataIndex && searchable) {
this.menu.add(new Ext.menu.CheckItem({
text : text,
hideOnClick : false,
dataIndex : config.dataIndex,
checked : true
}));
}
}, this);
}
});

existdissolve
1 Apr 2013, 5:13 PM
Hmm, works okay for me. Which version are you using?

mkrakowski
1 Apr 2013, 5:16 PM
ext-4.1.1a

mkrakowski
1 Apr 2013, 5:23 PM
Strangely when I comment out grid.addDocked, the search box is still built.



grid.addDocked(gridToolbar);


Despite the fact that there's no code within the plugin to create a top bar.

mkrakowski
1 Apr 2013, 5:29 PM
Here's the output of grid.dockedItems




console.log(grid.dockedItems);

0 Object { items={...}, border="1px 1px 1px 1px", sortable=true, more...} //grid
1 Object { xtype="toolbar", items={...}, dock="top", more...} //Search bar
2 Object { id="merchants_merchants_listing_paging", ref="../pageBar", store={...}, more...} //paging bar
3 Object { xtype="toolbar", dock="bottom", isContained={...}, more...}
4 Object { dock="top", items={...}, initialConfig={...}, more...} // Add + Delete btn

mkrakowski
2 Apr 2013, 9:36 AM
I overlooked the fact that grid panel was setting tbar, which was being rendered as (display:none). The plugin the chose the tbar panel, whereas I was later creating a new toolbar. :\



var grid = Ext.create('Ext.grid.Panel', {
tbar : [],
})


Thanks.