PDA

View Full Version : Proper way to setValue() of CB with a JsonStore?



veloper
9 Jul 2010, 6:10 AM
The Scenario:


User selects a row from the data grid and clicks the edit button.
The id of the passed record is sent to the server in order to get the field values.
The user is present with a Window -> FormPanel that has pre-populated fields.

The Problem:
One or more of those values returned from the server is an Id int (e.g., cs_id) and when setValue() is called on a combo box the Id shows up in the field. Now I know this is because it has no data yet and that can't link the id to anything, so it just displays the Id.
My Solution:
I ended up adding an event on load to "reset" the value... but it's kinda janky =/


// How values are loaded in
FormPanel.getForm().load({
url: 'index.php',
params: {
'do': 'record',
'id': record.id
}
});

// ComboBox -- NS = Replaced Namespace
NS.ComboBox.CaseStatus = Ext.extend(NS.ComboBox, {
initComponent: function(){
Ext.apply(this, this.initialConfig, {
fieldLabel: 'Case Status',
name: 'cs_id',
store: new NS.JsonStore.ComboBox({
baseParams: {
'do': 'caseStatusGetArr'
}
})
});
NS.ComboBox.CaseStatus.superclass.initComponent.apply(this, arguments);
this.store.addListener('load', function(){
this.setValue(this.getValue());
}, this);
}
});
Your/Better/Proper Solution: ???

Thanks in advance!

Condor
9 Jul 2010, 11:45 PM
I'd recommend this solution (http://www.sencha.com/forum/showthread.php?75751-OPEN-42-ComboBox-s-setValue-call-with-a-remotely-loaded-Store&p=400274#post400274).

MuffinBoy
19 Jul 2010, 5:46 PM
Condor,

Good Day!

I have also same issue with the Thread Starter...

I saw your recommended solution but I am still confuse how to use it...

I used the setValue and it worked for me but only for 1 time, whenever I press again the edit button error comes out from the debugger and says that "this.store is null or not an object.

here is my code:


function editUser(){

var emp_id = userGrid.getSelectionModel().getSelected().get('EMP_ID');

var editFormFields = [{name: 'EMP_ID', type: 'int'},
{name: 'EMP_NAME', type: 'string'},
{name: 'MOBILE', type: 'string'},
{name: 'EMAIL', type: 'string'},
{name: 'DEPT_CODE', type: 'int'}];

var userDetails = new Ext.data.JsonReader({
idProperty : 'emp_id',
root : 'details'
}, editFormFields);

var DepartmentStore = new Ext.data.JsonStore({
url: 'departments.php',
method: 'POST',
autoLoad: true,
root:'departments',
fields: ['old_dept_code', 'dept_desc']}
);

var txtemp_id = new Ext.form.TextField({
fieldLabel: 'Employee ID',
dataIndex: 'EMP_ID',
name: 'emp_id',
width: 70,
allowBlank: false,
blankText: 'Employee ID is required',
msgTarget: 'side',
maxLength: 8,
maskRe:/^([0-9])+$/,
readOnly: true
});

var txtemp_name = new Ext.form.TextField({
fieldLabel: 'Employee Name',
width: 200,
dataIndex: 'EMP_NAME',
name: 'emp_name',
allowBlank: false,
blankText: 'Employee Name is required',
msgTarget: 'side',
maxLength: 25,
maskRe:/^([ a-zA-Z0-9])+$/
});

var txtmobile = new Ext.form.TextField({
fieldLabel: 'Mobile Number',
width: 100,
dataIndex: 'MOBILE',
name: 'mobile',
allowBlank: false,
blankText: 'Mobile Number is required',
msgTarget: 'side',
maxLength: 13,
maskRe:/^([0-9])+$/
});

var txtemail = new Ext.form.TextField({
fieldLabel: 'Email Address',
width: 200,
dataIndex: 'EMAIL',
name: 'email',
allowBlank: false,
blankText: 'Email is required',
msgTarget: 'side',
maxLength: 35,
maskRe:/^([ _a-zA-Z0-9\.\,\+\?\@\=\:\|\\\/\(\)\[\]\&\-])+$/
});


var cbodept = new Ext.form.ComboBox({
fieldLabel: 'Department',
name: 'dept_desc',
width: 350,
disableKeyFilter: true,
forceSelection: true,
triggerAction: 'all',
allowBlank: false,
blankText: 'Please choose a department.',
editable: false,
emptyText:'Select a Department...',
selectOnFocus:true,
store: DepartmentStore,
mode: 'remote',
valueField: 'old_dept_code',
displayField: 'dept_desc'
});



var frmEditUser = new Ext.FormPanel({
labelWidth: 75,
id: 'editForm',
name: 'form',
frame:true,
title: 'Edit Recipient User',
width: 500,
labelWidth: 100,
align: 'left',
height:250,
reader: userDetails,
defaultType: 'textfield',
bodyStyle: 'padding-left:15px;padding-top:5px',
items: [txtemp_id,txtemp_name,cbodept,txtmobile,txtemail]
});

var displayPanel = new Ext.Panel({
width : 490,
height : 250,
items: [frmEditUser],
buttons:[
{text: 'Saved',
iconCls: 'icon-save'
},
{text: 'Cancel',
iconCls: 'silk-cross',
handler: function(){
Ext.MessageBox.confirm('Close Form', 'Are you sure you want to close this form?', function(btn, text){
if (btn == 'yes') {
wdwEditUser.close();
//cbodept.setValue(115); // Whenever I use this, it will give the corresponding displayValue.
}
});
}
}
]
});

wdwEditUser = new Ext.Window({
title: 'Edit User Form',
closable:true,
width: 500,
height: 250,
plain:true,
layout: 'fit',
items: displayPanel
});

frmEditUser.form.load({
url : 'usersdb.php',
params : {
task: 'EDIT_USER',
emp_id: emp_id
},
method : 'POST'
});


cbodept.setValue(115);
wdwEditUser.show();


}

Everytime Edit button is clicked, the editUser function will be called. I have also tried to declare the textfields in the upper most of my entire code just to declare it once but as I told, it only works for 1 time. maybe the store is not anymore recognized when editUser function is called....

Can you please give me some guide on how to manage this kind of issue?

thank you very much for the help...