PDA

View Full Version : tabpanel problem



mgulden
21 Oct 2010, 7:25 AM
hi

cannot add a listener for a button which is inside of 2nd panel of tabpanel.
Here is the code;

var tabpanel1 = Ext.extend(Ext.TabPanel, {
id : tabpanel1, activeTab : 0, width : 400, height : 250, autoScroll : true, draggable : true, initComponent : function() {
this.items = [ {
xtype : 'panel', id : 'panel1', title : 'Tab 1', items : [ {
xtype : 'textfield', id : 'text1'}
, {
xtype : 'textfield', id : 'text2', enableKeyEvents : true}
, {
xtype : 'textfield', id : 'text3', enableKeyEvents : true}
, {
xtype : 'textfield', id : 'text4', enableKeyEvents : true}
, {
xtype : 'textfield', id : 'text7', enableKeyEvents : true}
, {
xtype : 'button', id : 'button1', text : 'dŁ?me 1'}
, {
xtype : 'button', id : 'button2', text : 'dŁ?me 2'}
]}
, {
xtype : 'panel', id : 'panel2', title : 'Tab 2', items : [ {
xtype : 'textfield', id : 'text5'}
, {
xtype : 'textfield', id : 'text6'}
, {
xtype : 'button', id : 'button3'}
]}
], tabpanel1.superclass.initComponent.call(this); }
}
);

Ext.onReady(function() {
var tabpanel1Ui = new tabpanel1( {
renderTo : Ext.getBody()}
); }
);

until here everything fine. if i do not add listener for button2,there will be no problem.
When i add it firebug says "uncaught exception: Error listening for "click". Element "button3" doesn't exist.".But
it is rendered and seem on the 2nd tab.

Ext.onReady(function() {
Ext.EventManager.addListener('button1', 'click', HttpReq, Ext.get('button1'),cmd : 'button1_click'});
Ext.EventManager.addListener('button2', 'click', HttpReq, Ext.get('button2'),{cmd : 'button2_click'});
Ext.EventManager.addListener('button3', 'click', HttpReq, Ext.get('button3'),{cmd : 'button3_click'});
Ext.EventManager.addListener('text1', 'change', HttpReq, Ext.get('text1'), {cmd : 'text1_change'});
Ext.EventManager.addListener('text1', 'keypress', HttpReq2, Ext.get('text1'), {cmd : 'text1_keypress'}
}); thanks for any suggestion ...

tryanDLS
21 Oct 2010, 8:54 AM
http://sencha.com/learn/Ext_Forum_Help#How_to_post_code_properly

Condor
22 Oct 2010, 3:37 AM
WRONG!!! You are adding click handlers to the button elements instead of to the buttons.

Use:

Ext.getCmp('button3').on('click', HttpReq, Ext.getCmp('button3'), {cmd : 'button3_click'});

ps. Why are you passing parameters in the options object? I would have used:

Ext.getCmp('button3').on('click', HttpReq.createDelegate(Ext.getCmp('button3'), ['button3_click'], true));

mgulden
22 Oct 2010, 5:15 AM
hi Condor,

i see you answer after fix problem. I just add deferredRender:false config option to TabPanel. Then everything works.

Thank you

mgulden
22 Oct 2010, 5:16 AM
Thank you for useful link