PDA

View Full Version : not able to set the combobox as per json data received



rushi2440
26 Mar 2012, 5:25 AM
hi.. sencha forum members

I am receiving the json data as below

{
"companydata": [{
"city": {
"cityname": "Patna",
"stateid": 2,
"cityid": 2,
"cityzipcode": null
},
"cmpname": "Kintu Designs Pvt ltd",
"cmptitle": "Kintu Designs Pvt ltd",
"cmpcontact": "8128812153",
"cmpdesc": "<b>?Kintu designs Surat</b>",
"cmpfax": "8128812153",
"cmpwebsite": "www.kintudesigns.com",
"cmpemail1": "yaryan997@gmail.com",
"cmpemail2": "yaryan997@gmail.com",
"cmplogo": "calendar.png",
"cmplogopath": "upload/images/",
"cmpaddress": "Kintu designs Surat",
"cmpcreatedby": 1,
"cmpcreatedon": 1199932743000,
"cmpmodifiedon": 1199932743000,
"cmpmodifiedby": 0,
"id": 1,
"state": {
"statename": "Bihar",
"countryid": 1,
"stateid": 2
},
"country": {
"countryid": 1,
"countryname": "India"
}
}],
"total": 1,
"success": true
}


my Edit form is like below code

Ext.define('rms.view.companymgt.companyEdit', {
extend: 'Ext.window.Window',
alias: 'widget.companyeditwindow',
id: 'companyeditwindow',
editform:1,
itemId: 'companyeditwindow',
store: 'companyStore',
closeAction: 'destroy',
constrain: true,
height: 595,
width: 875,
layout: {
type: 'column'
},
title: 'Company',


initComponent: function() {
var me = this;


Ext.applyIf(me, {
items: [
{
xtype: 'form',
itemId: 'editmainform',
frame: true,
height: 546,
margin: 2,
width: 838,
layout: {
type: 'column'
},
bodyPadding: 10,
preventHeader: true,
title: 'My Form',
items: [
{

xtype: 'fieldset',
height: 134,
margin: 2,
width: 400,
title: 'Company Information',
items: [
{
xtype: 'textfield',
id: 'cmptitle',
itemId: 'cmptitle',
margin: 5,
width: 366,
name: 'cmptitle',
fieldLabel: 'Company Title',
anchor: '100%'
},
{
xtype: 'textfield',
id: 'cmpname',
itemId: 'cmpname',
margin: 5,
name: 'cmpname',
fieldLabel: 'Company Name',
anchor: '100%'
},
{
xtype: 'textfield',
id: 'cmpwebsite',
itemId: 'cmpwebsite',
margin: 5,
name: 'cmpwebsite',
fieldLabel: 'Website',
anchor: '100%'
}
]
},
{
xtype: 'fieldset',
height: 138,
margin: 2,
width: 400,
title: 'Company Contact',
items: [
{
xtype: 'textfield',
id: 'cmpfax',
itemId: 'cmpfax',
margin: 5,
name: 'cmpfax',
fieldLabel: 'Fax No',
anchor: '100%'
},
{
xtype: 'textfield',
id: 'cmpcontact',
itemId: 'cmpcontact',
margin: 5,
name: 'cmpcontact',
fieldLabel: 'Contact No',
anchor: '100%'
},
{
xtype: 'textfield',
id: 'cmpemail1',
itemId: 'cmpemail1',
margin: 5,
name: 'cmpemail1',
fieldLabel: 'Email',
anchor: '100%'
},
{
xtype: 'textfield',
id: 'cmpemail2',
itemId: 'cmpemail2',
margin: 5,
name: 'cmpemail2',
fieldLabel: 'Other Email',
anchor: '100%'
}
]
},
{
xtype: 'fieldset',
height: 350,
margin: 2,
width: 397,
title: 'Company Address',
items: [
{
id: 'btn-add-country',
itemId: 'btn-add-country',
xtype: 'button',
margin: '4 0 0 303',
style: 'position:absolute;',
width: 71,
text: 'Add Country',
action: 'btn-add-country'
},
{
xtype: 'combobox',
id: 'countryname',
itemId: 'countryname',
name: 'countryname',
margin: 5,
width: 294,
fieldLabel: 'Country',
emptyText: 'Select Country...',
displayField: 'countryname',
store: 'country',
valueField: 'countryid'
},
{
xtype: 'button',
id: 'btn-add-state',
itemId: 'btn-add-state',
margin: '0 0 0 303',
style: 'position:absolute;',
width: 71,
text: 'Add State',
action: 'btn-add-state'
},
{
xtype: 'combobox',
id: 'statename',
itemId: 'statename',
margin: 5,
width: 294,
name: 'statename',
fieldLabel: 'State',
emptyText: 'Select State...',
displayField: 'statename',
store: 'state',
valueField: 'stateid'
},
{
id: 'btn-add-city',
itemId: 'btn-add-city',
xtype: 'button',
margin: '0 0 0 303',
style: 'position:absolute;',
width: 71,
text: 'Add City',
action: 'btn-add-city'
},
{
xtype: 'combobox',
id: 'cityname',
itemId: 'cityname',
margin: 5,
width: 294,
name: 'cityname',
fieldLabel: 'City',
emptyText: 'Select City...',
displayField: 'cityname',
store: 'city',
valueField: 'cityid'
},
{
xtype: 'textareafield',
height: 75,
id: 'cmpaddress',
itemId: 'cmpaddress',
margin: 5,
width: 380,
name: 'cmpaddress',
fieldLabel: 'Address',
anchor: '100%'
},
{
xtype: 'htmleditor',
height: 146,
id: 'cmpdesc',
itemId: 'cmpdesc',
margin: 5,
style: 'background-color: white;',
name: 'cmpdesc',
fieldLabel: 'Description',
hideLabel: true,
anchor: '100%'
}
]
},
{
xtype: 'fieldset',
height: 350,
margin: 2,
width: 398,
title: 'Company Logo',
items: [
{
xtype: 'form',
frame: true,
itemId: 'logoform',
id: 'logoform',
height: 320,
width: 375,
bodyPadding: 10,
preventHeader: true,
title: 'My Form',
items: [
{
xtype: 'image',
height: 158,
itemId: 'cmplogoimg',
margin: 10,
width: 287,
src:'http://www.sencha.com/img/sencha-large.png'
},
{
xtype: 'filefield',
margin: '10 0 0 15',
width: 296,
name: 'file',
id: 'file',
itemId: 'file',
fieldLabel: 'File',
labelWidth: 50,
msgTarget: 'side',
allowBlank: false,
emptyText: 'Select file',
buttonText: 'Select a File...'
}],

dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [
{
xtype: 'tbfill'
},
{
xtype: 'button',
text: 'Upload',
handler: function() {
var form = this.up('form').getForm();
alert('VALUE IS :'+form.getValues());
if(form.isValid()){
form.submit({
url: 'company/UploadFile.action',
waitMsg: 'Uploading your file...',
success: function(fp, o) {
Ext.Msg.alert('Success', 'Your file has been uploaded.');
Ext.Ajax.request({
url: 'company/GetImages.action',
scope: this,
success: function(response,opts) {
console.log('GET IMAGES');
}
});
}
});
}

}
},
{
xtype: 'tbseparator'
},
{
xtype: 'button',
text: 'Reset',
itemId: 'btn-reset',
action: 'btn-reset'
,
handler: function() {
this.up('form').getForm().reset();
}
}
]
}]
}
]
}
],
dockedItems: [
{
xtype: 'toolbar',
height: 27,
width: 804,
dock: 'bottom',
items: [
{
xtype: 'tbfill'
},
{
xtype: 'button',
text: 'Save',
action: 'btn-update-company'
},
{
xtype: 'tbseparator'
},
{
xtype: 'button',
text: 'Exit',
action: 'btn-exit-company'
}
]
}
]
}
]
});


me.callParent(arguments);
}
});


my companyStore is

Ext.define('rms.store.company', {
extend: 'Ext.data.Store',
model: 'rms.model.companyModel',
storeId: 'companyStore',
autoLoad: true,
proxy: {
type: 'ajax',
api: {
read : 'company/GetCompany.action',
create : 'company/CreateCompany.action',
update: 'company/UpdateCompany.action',
destroy: 'company/DeleteCompany.action'
},
reader: {
type: 'json',
root: 'companydata',
totalProperty: 'total',
successProperty: 'success'

},
writer: {
type: 'json',
writeAllFields: true,
encode: true,
root: 'companydata'
}
}
});


my companyModel is

Ext.define('rms.model.companyModel', { extend: 'Ext.data.Model',
fields : [
{ name: 'id', type: 'int', useNull: true, mapping: 'id'},
{ name: 'cmpname', type: 'string', mapping: 'cmpname'},
{ name: 'cmptitle', type: 'string', mapping: 'cmptitle'},
{ name: 'cmpdesc', type: 'string', mapping: 'cmpdesc'},
{ name: 'cmpfax', type: 'string', mapping: 'cmpfax'},
{ name: 'cmpcontact', type: 'string', mapping: 'cmpcontact'},
{ name: 'cmpwebsite', type: 'string', mapping: 'cmpwebsite'},
{ name: 'cmpemail1', type: 'string', mapping: 'cmpemail1'},
{ name: 'cmpemail2', type: 'string', mapping: 'cmpemail2'},
{ name: 'countryid', type: 'int', mapping: 'countryid'},
{ name: 'stateid', type: 'int', mapping: 'stateid'},
{ name: 'cityid', type: 'int', mapping: 'cityid'},
{ name: 'cmplogo', type: 'string', mapping: 'cmplogo'},
{ name: 'cmplogopath', type: 'string', mapping: 'cmplogopath'},
{ name: 'cmpaddress', type: 'string', mapping: 'cmpaddress'},
]
});


but don't know why my EditCompany form didn't set the combobox Country, combobox State, combobox City as per I am receiving the data above.

Please suggest me what's wrong in my above code, So I can solve my problem as soon as possible

Yogendra Singh
Sr. Programmer
Kintudesigns.com

mitchellsimoens
26 Mar 2012, 8:33 AM
Do you have separate stores for each combobox?

skirtle
26 Mar 2012, 5:11 PM
Please don't post so much code. Just post the relevant sections.

You have a combobox called countryname but there isn't a countryname field in your model. I assume it is supposed to be countryid, but that won't work either because your mapping is wrong. Try:


{name: 'countryname', type: 'int', mapping: 'country.countryid'},

rushi2440
26 Mar 2012, 9:38 PM
@skirtle

I had changed my company model to below

Ext.define('rms.model.companyModel', {
extend: 'Ext.data.Model',
fields : [
{ name: 'id', type: 'int', useNull: true, mapping: 'id'},
{ name: 'cmpname', type: 'string', mapping: 'cmpname'},
{ name: 'cmptitle', type: 'string', mapping: 'cmptitle'},
{ name: 'cmpdesc', type: 'string', mapping: 'cmpdesc'},
{ name: 'cmpfax', type: 'string', mapping: 'cmpfax'},
{ name: 'cmpcontact', type: 'string', mapping: 'cmpcontact'},
{ name: 'cmpwebsite', type: 'string', mapping: 'cmpwebsite'},
{ name: 'cmpemail1', type: 'string', mapping: 'cmpemail1'},
{ name: 'cmpemail2', type: 'string', mapping: 'cmpemail2'},
{ name: 'countryname', type: 'int', mapping: 'country'},
{ name: 'statename', type: 'int', mapping: 'state'},
{ name: 'cityname', type: 'int', mapping: 'city'},
{ name: 'cmplogo', type: 'string', mapping: 'cmplogo'},
{ name: 'cmplogopath', type: 'string', mapping: 'cmplogopath'},
{ name: 'cmpaddress', type: 'string', mapping: 'cmpaddress'},
]
});


and my json data I am receiving is below

{
"companydata": [{
"city": {
"cityname": "Patna",
"stateid": 2,
"cityid": 2,
"cityzipcode": null
},
"cmpname": "Kintu Designs Pvt ltd",
"cmptitle": "Kintu Designs Pvt ltd",
"cmpcontact": "8128812153",
"cmpdesc": "<b>?Kintu designs Surat</b>",
"cmpfax": "8128812153",
"cmpwebsite": "www.kintudesigns.com",
"cmpemail1": "yaryan997@gmail.com",
"cmpemail2": "yaryan997@gmail.com",
"cmplogo": "calendar.png",
"cmplogopath": "upload/images/",
"cmpaddress": "Kintu designs Surat",
"cmpcreatedby": 1,
"cmpcreatedon": 1199932743000,
"cmpmodifiedon": 1199932743000,
"cmpmodifiedby": 0,
"id": 1,
"state": {
"statename": "Bihar",
"countryid": 1,
"stateid": 2
},
"country": {
"countryid": 1,
"countryname": "India"
}
}],
"total": 1,
"success": true
}


on my Edit page there are different combo box like country, state, city I am receiving the proper json data but the combobox are not set with the correct values.

on my EditWindow country combobox code is like below

{
xtype: 'combobox',
id: 'countryname',
itemId: 'countryname',
name: 'countryname',
margin: 5,
width: 294,
fieldLabel: 'Country',
emptyText: 'Select Country...',
displayField: 'countryname',
store: 'country',
valueField: 'countryid'
},


in my model I am trying the to set my country combobox like below
{ name: 'countryname', type: 'int', mapping: 'country'},

I also change the model to
{ name: 'countryname', type: 'int', mapping: 'country.countryid'},

but that also didn't work.

my country combobox has countryStore having below code

Ext.define('rms.store.country', {
extend: 'Ext.data.Store',
model: 'rms.model.countryModel',
autoLoad : false,
storeId: 'countryStore',
proxy : {
type : 'ajax',
api: {
read: 'country/GetCountry.action',
//read: 'country/data/taskdata.js',
create: 'country/CreateCountry.action',
destroy: 'country/DeleteCountry.action',
update: 'country/UpdateCountry.action'
},
writer : new Ext.data.JsonWriter({
//type : 'json',
root : 'countrydata',
encode : true,
writeAllFields : true
}),
reader : new Ext.data.JsonReader({
totalPropery: 'total',
successProperty : 'success',
idProperty : 'id',
type : 'json',
root: 'countrydata'
})
}
});


countryModel is like below code

Ext.define('rms.model.countryModel', {
extend: 'Ext.data.Model',
fields : [
{ name: 'countryid', type: 'int', mapping: 'countryid'},
{ name: 'countryname', type: 'string', mapping: 'countryname'}
]
});


please suggest me some solution. How can I set the combobox country.

Yogendra Singh
Sr. Programmer
Kintudesigns.com

rushi2440
26 Mar 2012, 10:01 PM
@mitchellsimoens (http://www.sencha.com/forum/member.php?22216-mitchellsimoens)

yes I had separate stores for all the combobox. countryStore for combobox Country, stateStore for combobox State, cityStore for combobox City.

skirtle
27 Mar 2012, 3:49 AM
You need to break it down into logical steps, checking each one along the way.

First up, change the comboboxes to textfields. That way it'll be much easier to tell what's going on. Once you have the textfield populated with the correct value (it'll show the valueField value rather than the displayField value) then you can switch it back to a combobox.

Do a quick check to see whether the textfield gets populated.

If it doesn't, you need to check that the record you use to load the form is being populated. The first problem is getting the JSON read in correctly. There's no guesswork involved here, the mapping simply needs to correspond to the right position in your JSON. It looks to me like the correct mapping is 'country.countryid'. You should then check that the record is correctly populated:


console.log(record.get('countryname'));

The name of the field in the data needs to correspond with the name of the textfield/combobox. It seems they're now both called countryname so that should work fine.