How do I add a listener that will work on individual Fieldset in Extjs? Clicking the "Add" button sh

Posted by Nair on Stack Overflow See other posts from Stack Overflow or by Nair
Published on 2010-03-03T23:56:42Z Indexed on 2010/03/13 18:25 UTC
Read the original article Hit count: 822

Filed under:

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'); });

© Stack Overflow or respective owner

Related posts about extjs