How do I add a listener that will work on individual Fieldset in Extjs? Clicking the "Add" button sh
- by Nair
Testing Window
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* [email protected]
* http://www.extjs.com/license
*/
Ext.onReady(function(){
Ext.override( Ext.data.Store, {
findExact: function( fld, val ) {
var hit = null;
this.each( function(rec) { if( rec.get(fld) == val ) { hit = rec; return false; }; } );
return hit;
}
});
var listAdded = 0;
var addListBtn = {
text: 'Add',
handler: function() {
Ext.getCmp('tab_list').add(getList());
Ext.getCmp('tab_list').doLayout();
}
}
var testData = new Ext.data.SimpleStore({
fields: ['no', 'name', 'address','phone','businessPhone'],
data: [['68', 'Target','123 Valley Road','(345) 908-9087','(345) 908-9087'],
['69', 'Walmart','456 Main Road','(345) 908-9999','(345) 908-9990']]
});
var getList = function() {
listAdded++;
var items = new Ext.form.FieldSet(
{
id:listAdded,
title: listAdded,
collapsible: true,
layout: 'form',
autoHeight: true,
defaults: {width: 300},
defaultType: 'textfield',
bodyStyle: 'padding:5px',
labelWidth: 225,
items: [
{
xtype: 'combo',
fieldLabel: 'Customer No',
name: 'changescustomerNo',
hiddenName: 'changescustomerNo',
store: new Ext.data.SimpleStore({
fields: ['id','value'],
data: [['68','Test1'],['69','Test2']]
}),
displayField: 'value',
valueField: 'id',
selectOnFocus: true,
mode: 'local',
editable: false,
triggerAction: 'all',
value: ' ',
listeners:{select:{ fn:function(combo, value) {
var m = testData.findExact( 'no', this.value );
if(m) {
//alert(this.id);
Ext.getCmp('currentName').setValue(m.get('name'));
Ext.getCmp('currentAddress').setValue(m.get('address'));
Ext.getCmp('currentTelephoneNumber').setValue(m.get('phone'));
Ext.getCmp('currentBusTelephoneNumber').setValue(m.get('businessPhone'));
}
}//function
}//select
}//listeners
},{
id: 'currentName',
fieldLabel: 'Current Name',
name: 'currentName',
value: ''
},{
id: 'currentAddress',
width: 298,
xtype: 'textarea',
fieldLabel: 'Current Address',
name: 'currentAddress',
value: ''
},{
id:'currentTelephoneNumber',
fieldLabel: 'Current Telephone Number',
name: 'currentTelephoneNumber',
value: ''
},{
id: 'currentBusTelephoneNumber',
fieldLabel: 'Current Business Telephone Number',
name: 'currentBusTelephoneNumber',
value: ''
}
]
}
);
return items;
}
var pnlMain = new Ext.Panel({
id: 'theForm',
title: 'Sample List',
bodyStyle:'padding:5px',
autoWidth: true,
frame: true,
items: [{
xtype: 'tabpanel',
id: 'tabpanel',
activeTab: 0,
height: 540,
width: '100%',
resizeTabs: true,
tabWidth: 125,
minTabWidth: 125,
layoutOnTabChange: true,
deferredRender: false, // Create all form elements on load
defaults: {
bodyStyle: 'padding:10px',
autoScroll: true,
layout: 'form',
defaultType: 'textfield',
labelWidth: 160
},
items:[{
id: 'tab_list',
title: 'List',
items: getList(),
buttons: [
addListBtn
]
}]
}]
});
pnlMain.render('main');
});
