0
私のフォームパネルにコンボボックスがあります。当初は、私のデータベースに会社に関する新しい情報を追加するためにそのフォームを使用しました。extjsで受信したストアデータからコンボボックスIDを設定する方法4
私は会社に関する情報を含むグリッドを持っています。Idクエリに基づいてそれをクリックすると、会社の店に関する完全な情報が返されます。これで
は、すべてのデータ私もコンボボックスの国、州、都市のIDを取得していますし、私は国ID、状態IDに基づいて、私のコンボボックスの値を設定することはできませんよ、都市のIDがを受けました。
私のJSON companydataは、以下の私は私の編集フォームの値を設定することに基づいて、今
{
"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": "[email protected]",
"cmpemail2": "[email protected]",
"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
}
を述べています。すべての値が完全に設定されており、コンボボックスの値だけが完全に設定されていません。
私の編集ウィンドウのコードは、グリッドがクリックされたときに実行する私のコントローラ機能が
Ext.define('rms.view.companymgt.companyEdit', {
extend: 'Ext.window.Window',
alias: 'widget.companyeditwindow',
id: 'companyeditwindow',
editform:1,
itemId: 'companyeditwindow',
store: 'companyStore',
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: 'countryid',
margin: 5,
width: 294,
fieldLabel: 'Country',
emptyText: 'Select Country...',
displayField: 'countryid',
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: 'stateid',
fieldLabel: 'State',
emptyText: 'Select State...',
displayField: 'stateid',
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: 'cityid',
fieldLabel: 'City',
emptyText: 'Select City...',
displayField: 'cityid',
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-save-company'
},
{
xtype: 'tbseparator'
},
{
xtype: 'button',
text: 'Exit',
action: 'btn-exit-company'
}
]
}
]
}
]
});
me.callParent(arguments);
}
});
を下回っている
editCompany: function(grid, no, rowindex,colindex,temp) {
alert('EDIT COMPANY BUTTON PRESSED');
var rec = this.getCompanyDetail().store.getAt(rowindex);
console.log(rec);
var actionid = grid.getCellByPosition({row:rowindex,column:colindex }).id;
this.getCompanyEdit().animateTarget=actionid;
this.getCompanyEdit().editform=1;
//this.getCompanyEditForm().getForm().reset();
this.getCompanyEditForm().loadRecord(rec);
this.getCompanyEdit().show();
},
私の会社の店は
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'
}
}
}）;
と私の会社のモデルは）
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'},
]
}です。
とサーバーの応答から、countryid、stateid、cityidを受信しています。しかし、私は私が受け取ったidでコンボボックスを設定することはできません。 この問題を解決するのを手伝ってください。
...念のために、各コンボボックスの項目にプロパティ
queryMode: localを設定してみてください。私に問題解決のための解決策を提案してください –コンボボックスの店舗はどこにありますか？ロードプロシージャは非同期であり、他のストア値をフォームにロードするときにロードするだけで済みます。 – sha
私は質問を更新し、companyStoreとcompanyModelを追加しました。それを見て、EditWindowで国、州、市のコンボボックスを設定するのを手伝ってください。 –