PDA

View Full Version : How to dinamically Populate textfield after combobox select



pjamrisk
20 Nov 2009, 12:06 AM
Hello guys,
I have been working with Ext for a while now, and we have several options working already.
However, we are trying to do some fancy stuff. Here is the problem, we want to have a text field populate its content from a store value returned after we do a selection in a combobox. Here is what I got so far:


Ext.onReady(function(){
Ext.QuickTips.init();
//This is the datastore from a query
var PMNumber = new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields : ['PMNumber', 'Description'],
root: 'rows'
}),
proxy: new Ext.data.HttpProxy({
url: './PMNumberQ.php'
}),
autoLoad: true
});
var KNNumbers = new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields : ['ControlNumber', 'Insp_PMPerformed'],
root: 'rows'
}),
proxy: new Ext.data.HttpProxy({
url: './KNNumberQ.php'
})
});
var RKNNumbers = new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields : ['ControlNumber', 'Insp_ItemName'],
root: 'rows'
}),
proxy: new Ext.data.HttpProxy({
url: './Request_KNNumberQ.php'
})
});

/**********/
/*form panel*/
/**********/
var PMFORM = new Ext.FormPanel({
renderTo: document.body,
frame: true,
labelAlign: 'left',
labelWidth: 100,
width:'auto',
waitMsgTarget: true,
items:[{
xtype:'fieldset',
autoHeight: true,
layout: 'form',
cls: 'x-check-group-alt',
bodyCfg: {
tag:'center'
},
items:[
new Ext.form.ComboBox({
fields: ['PMNumber', 'Description'],
id: 'id_PMNumber',
store: PMNumber,
fieldLabel: 'PMNumber ',
hiddenName:'PMNumber',
valueField:'PMNumber',
displayField:'PMNumber',
typeAhead: true,
mode: 'remote',
triggerAction: 'all',
emptyText:'Please type or select a PM Number',
selectOnFocus:true,
allowBlank: false,
blankText:'error!',
/*********
* To populate the "KN" combo, we use listeners
* When the application is selected, we reload
* the store of the "formulaire" combo
/**********/
listeners: {
select:
function() {
var PM = Ext.getCmp('id_PMNumber').getValue();
var KN = Ext.getCmp('id_KNNumber');
KN.store.reload({params: {id_PMNumber: PM}});
}
},
anchor:'50%'
}),
new Ext.form.ComboBox({
id: 'id_KNNumber',
fieldLabel: 'KNNumber',
hiddenName:'KNNumber',
store: KNNumbers,
valueField:'ControlNumber',
displayField:'ControlNumber',
forceSelection: true,
mode: 'remote',
triggerAction: 'all',
emptyText:'Select a KN Number',
selectOnFocus:true,
allowBlank: false,
anchor:'50%',
lastQuery: '',
listeners: {
select:
function() {
var KN = Ext.getCmp('id_KNNumber').getValue();
var RKN = Ext.getCmp('ItemName');
RKN.store.reload({params: {id_KNNumber: KN}});
Ext.DomHelper.overwrite('ItemName', RKN);
}
}
}),
{
xtype: 'textfield',
id: 'ItemName',
store: RKNNumbers,
fieldLabel: 'Insp_ItemName',
name: 'Insp_ItemName',
valueField : 'Insp_ItemName'

}
]
}]
});
});


So the problem is that after the store is reloaded, the textbox remains empty still. Any suggestions or examples I can look into? I been searching all over the forums for this answer with no luck.

Thanks in advance.
Patrick

dlbjr
20 Nov 2009, 6:04 AM
RKNNumbers.on('load', function() {
var RKN = Ext.getCmp('ItemName');
if(RKNNumbers.count() > 0){
RKN.setValue(RKNNumbers.getAt(0).get('Insp_ItemName').toString().trim())
}
});


new Ext.form.ComboBox({
id: 'id_KNNumber',
fieldLabel: 'KNNumber',
hiddenName:'KNNumber',
store: KNNumbers,
valueField:'ControlNumber',
displayField:'ControlNumber',
forceSelection: true,
mode: 'remote',
triggerAction: 'all',
emptyText:'Select a KN Number',
selectOnFocus:true,
allowBlank: false,
anchor:'50%',
lastQuery: '',
listeners: {
select:
function() {
var KN = Ext.getCmp('id_KNNumber').getValue();
RKN.store.load({params: {id_KNNumber: KN}});
}
});

pjamrisk
21 Nov 2009, 9:00 AM
Awesome, it worked wonderfully.
Me and my co-worker did a small change to the code you provided. now it is working perfectly.

Here is the changes we did.


datastore.on('load', function() {
var locale = Ext.getCmp('LocationComments_id');
var iname = Ext.getCmp('Insp_ItemName_id');
var sname = Ext.getCmp('Insp_SuppName_id');
var mname = Ext.getCmp('Insp_ModelName_id');
var snumber = Ext.getCmp('Insp_SerialNumber_id');

if (this.getCount() > 0){
locale.setValue(this.getAt(0).get('LocationComments'));
iname.setValue(this.getAt(0).get('Insp_ItemName'));
sname.setValue(this.getAt(0).get('Insp_SuppName'));
mname.setValue(this.getAt(0).get('Insp_ModelName'));
snumber.setValue(this.getAt(0).get('Insp_SerialNumber'));
}
});

SO what this did is call the fields of our datastore and set them on the appropiate fields of the form.

Preety cool! thank you again for such a promt response!
Patrick