PDA

View Full Version : problem with Ext.getCmp



xjaroo
12 Jul 2010, 6:43 PM
var Grid = new Ext.FormPanel({
title: 'xxx',
id: 'xxx-panel',
layout: 'border',

region:'north',

layout: 'fit',
id: 'north_companyGrid',
bodyStyle:'padding:5px',
items: [{
layout:'column',
border:false,
items:[{
columnWidth:.3,
layout: 'form',
border:false,

},{
columnWidth:.36,
layout: 'form',
border:false,
items: [{
xtype:'compositefield',
id: 'annual_field',
fieldLabel: 'Annual Revenue',
items: [
{
xtype: 'combo',
id: 'annual_field_combo',
mode: 'local',
value: 'between',
triggerAction: 'all',
displayField: 'afValue',
editable: false,
store: new Ext.data.JsonStore({
fields : ['afName', 'afValue'],
data : [
{afName : 'l', afValue: 'less_than'},
{afName : 'm', afValue: 'more_than'},
{afName : 'b', afValue: 'between'}
]
}),
listeners:{select:{fn:function(combo, value) {

if(combo.getValue() != 'between' ){
Ext.getCmp('annual_field_delimiter').hide();
Ext.getCmp('annual_revenue_to').hide();
}else{
Ext.getCmp('annual_field_delimiter').show();
Ext.getCmp('annual_revenue_to').show();
}
}}
} ,
width: 85
},
{
name : 'annual_revenue_from',
xtype: 'numberfield',
width: 78
},
{
xtype: 'displayfield',
id: 'annual_field_delimiter',
value: '~'
},
{
id: 'annual_revenue_to',
name : 'annual_revenue_to',
xtype: 'numberfield',
width: 78
}
]
}]
}]
}]
},{
region:'center',
layout: 'fit',
margins:{left:3,top:0,right:3,bottom:3},
items: yyyPanel
}] // end of items

});

Ext.getCmp('annual_field_delimiter').hide();
Ext.getCmp('annual_revenue_to').hide();



I would like to access id "annual_field_delimiter" or "annual_revenue_to" from out of the Grid. I was calling the id using Ext.getCmp, but I am having error said "undefined.". Is there any way to access the id?

Elijah
12 Jul 2010, 7:55 PM
Best to just copy and run it to see it work. Not sure what you had wrong but this shows and hides for me.

/**
*
*/
Ext.onReady(function(){
// UPDATE THIS PATH
Ext.BLANK_IMAGE_URL = '../resources/images/default/s.gif';
var tempTP = new Ext.TabPanel({
activeTab: 0,
layoutOnTabChange: true
});


var Grid = new Ext.FormPanel({
title: 'xxx',
id: 'xxx-panel',
layout: 'border',
region:'north',
layout: 'fit',
id: 'north_companyGrid',
bodyStyle:'padding:5px',
items: [{
layout:'column',
border:false,
items:[
{
columnWidth:.3,
layout: 'form',
border:false,
},{
columnWidth:.36,
layout: 'form',
border:false,
items: [
{
xtype: 'combo',
id: 'annual_field_combo',
mode: 'local',
value: 'between',
triggerAction: 'all',
displayField: 'afValue',
editable: false,
store: new Ext.data.JsonStore({
fields : ['afName', 'afValue'],
data : [
{afName : 'l', afValue: 'less_than'},
{afName : 'm', afValue: 'more_than'},
{afName : 'b', afValue: 'between'}
]
}),
listeners:{
select:{
scope:this,
fn:function(combo, value) {
if(combo.getValue() != 'between' ){
console.info('inside if');
console.info(Ext.getCmp('annual_field_delimiter'));
console.info(Ext.getCmp('annual_revenue_to'));
Ext.getCmp('annual_field_delimiter').hide();
Ext.getCmp('annual_revenue_to').hide();
}else{
console.info('inside else');
console.info(Ext.getCmp('annual_field_delimiter'));
console.info(Ext.getCmp('annual_revenue_to'));
Ext.getCmp('annual_field_delimiter').show();
Ext.getCmp('annual_revenue_to').show();
}
}
}
},
width: 85
},
{
xtype: 'numberfield',
id : 'annual_revenue_from',
value: '22',
width: 78
},
{
xtype: 'displayfield',
id: 'annual_field_delimiter',
value: '33',
width: 78
},
{
xtype: 'numberfield',
id: 'annual_revenue_to',
value: '44',
width: 78
},
{
region:'center',
layout: 'fit',
margins:{left:3,top:0,right:3,bottom:3},
items: tempTP
} // end of items
]
}
]
}]
});

var myWin = new Ext.Window({
id : 'myWin',
title:'Main',
height : 400,
width : 800,
layout: 'fit',
items : Grid
});
myWin.show();
Ext.getCmp('annual_field_delimiter').hide();
Ext.getCmp('annual_revenue_to').hide();
}) // Ext.onReady