PDA

View Full Version : How to remove tools in panel while doing collapsible when panel in expand mode



mrprabu
17 Jan 2014, 1:31 AM
Hi Friends,

I created panel which having tools. I need to remove the tools while doing collapsible when panel in exapand mode. can anyone give me the idea,

herewith I have pasted my code & screen shot
47615


Ext.define('Test.ux.panel.TestPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.test-panel',


componentCls:'test-panel',
tools: [],
collapseDirection : 'top',
initComponent: function (config) {
var me = this;
if(me.collapsible == true){
var mycollapse = {
type:'collapsiblebt',
componentCls:'test-collapsiblebt',
handler: function(event, toolEl, panel){
me.toggleCollapse();
}
}
me.tools.unshift(mycollapse);
}


Ext.apply(this, {
hideCollapseTool: true
});


this.initConfig(config);
this.callParent(arguments);


},tools: [{
type: 'testMenu',
handler: function (e, toolEl) {
var me = this,
menuItems = [],
menuItem;
var buttonArr = ['pdf', 'notepad', 'wizard', 'email', 'print', 'doc', 'excel', 'refresh', 'userManual', 'assign', 'info', 'delete', 'approvalChain', 'cmap', 'auditTrail', 'cct'];
if (!me.columnsMenu) {
me.columnsMenu = Ext.create('test.ux.menu.OneClientMenu', {
maxHeight: 200,
width: 150,
plain: true,
ui: 'test-action-menu'
});


for (i = 0; i < 13; i++) {
menuItem = Ext.create('test.ux.button.OneClientButtons', {
type: 'link',
iconCls: 'test-' + buttonArr[i],
text: '' + buttonArr[i]
});
menuItems.push(menuItem);
if (i < 12)
menuItems.push('-');
}
me.columnsMenu.add(menuItems);
}
me.columnsMenu.showBy(toolEl);
}
}],
toggleCollapse: function() {
console.log(this.collapsed);
var me=this;
return (this.collapsed || this.floatedFromCollapse) ? this.expand() : this.collapse();
}
});

mdnaveed42
17 Jan 2014, 6:02 AM
Hi,

You can write "beforecollapse (http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.panel.Panel-event-beforecollapse)" event in which you can handle show/hide of tools.

Eg:


p (http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.panel.Panel-event-beforecollapse)anel.on(
'beforecollapse (http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.panel.Panel-event-beforecollapse)', function() {
Ext.ComponentQuery.query(panelId)[0].tools[0].hide(); // hides the first tool
Ext.ComponentQuery.query(panelId)[0].tools[0].show(); // shows the first tool
});


Thanks,
Md Naveed

mrprabu
19 Jan 2014, 6:41 PM
Hi Naveed,

thanks for your reply and suggestions, while using your suggested code, I am getting below error

Uncaught TypeError: Cannot read property 'tools' of undefined



Regards,
Prabu

Misiu
20 Jan 2014, 7:06 AM
@mrprabu could You please post code for that nice menu?
I've tried adding menu to panel tools but without any luck.

mrprabu
20 Jan 2014, 7:21 AM
Hi Naveed,

because of my code that error occurred.

Your code is working fine, thanks a lot.
instead of component query I used panel object which is available as a default argument(pls refer below)


p (http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.panel.Panel-event-beforecollapse)anel.on('beforecollapse (http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.panel.Panel-event-beforecollapse)', function(p) { p.tools[0].hide(); // hides the first tool p.tools[0].show(); // shows the first tool});
Regards,
Prabu

mrprabu
20 Jan 2014, 7:23 AM
Hi Misiu,

Thanks for reply. I have pasted my code and screenshot already. kindly refer that


Regards,
Prabu

Misiu
20 Jan 2014, 8:20 AM
I already seen Your code and screenshot, but I see 2 classes that You are using: test.ux.menu.OneClientMenu and test.ux.menu.OneClientButtons.

What I would like to do is to add this kind of menu to my own panel.
So maybe You could consider posting this in User Extensions and Plugins forum with CSS that You use, so we all could try this.
Thanks :)

mrprabu
20 Jan 2014, 6:53 PM
I am creating that menu based on that mock up. work in progress. Once done I will post the code

Misiu
21 Jan 2014, 1:57 AM
Thank You :)

Misiu
20 Feb 2014, 2:34 AM
@mrprabu hows development going? Could You share Your partial code? I'll be grateful.

mrprabu
20 Feb 2014, 6:53 PM
Hi Misu,

development completed. due to busy I cant place the code.

Give me time..

Regards,
Prabu

Misiu
21 Feb 2014, 6:41 AM
No problem :)
I started developing something similar, my code is described here: http://www.sencha.com/forum/showthread.php?281658-add-dropdown-menu-to-panel-tool
but I'll wait for Your code to be able to see how You did it :)