I've two combobox in a form page. I receive the data to populate my first combobox. Basicly my first combobox will have a list of tables from SQL Server. My second combobox must have the list of columns which a table has.
I've already made two services which are working to give me the data that I need. The thing is I'm failing to populate the second combo box, right after I select the first one. Any ideias?
Code:
onNewEntityClick: function (button, model) {
var store = button.up('backendpanel').down('settingsgrid').getStore();
var instance = button.up('backendpanel').down('instanceform');
instance.setVisible(true);
instance.setTitle('New Map');
var checkDirty = function (field) {
if (field.isDirty() && instance.isEdit && instance.canSave) {
instance.saveButton.enable();
field.addClass('AppDirtyField1');
}
}
instance.store = null;
instance.store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'inputType', 'propName'],
listeners: {
load: function (store, records, loaded) {
var values = store.proxy.reader.rawData.data;
instance.getForm().setValues(values);
instance.setLoading(false);
instance.add({
bbar: [
{
xtype: 'button', itemID: 'saveButton', text: 'Guardar',
listeners: {
click: function () {
var settingID = button.up('backendpanel').down('settingsgrid').getSelection()[0].data.SettingsID;
Ext.Ajax.request({
url: 'Services/SaveInstance.ashx',
method: 'POST',
params: {
id: settingID,
data: instance.getValues(true, false, false, true)
},
success: function (response, opts) {
//update ui
var intancesStore = button.up('backendpanel').down('entitiesgrid').getStore();
intancesStore.getProxy().setExtraParam('id', settingID);
intancesStore.load();
instance.setVisible(false);
}
});
}
}
},
{
xtype: 'button', itemID: 'deleteButton', text: 'Apagar',
listeners: {
click: function () {
instance.getForm().reset();
instance.update();
}
}
}
]
});
},
metachange: function (store, meta) {
instance.removeAll();
Ext.each(meta.fields, function (field) {
switch (field.inputType) {
case 1:
instance.add({
xtype: 'textfield',
labelSeparator: '',
labelWidth: 110,
inputWidth: 300,
width: 400,
fieldLabel: field.name,
name: field.propName,
enableKeyEvents: true,
listeners: { dirtychange: checkDirty }
});
break;
case 2:
var field = Ext.create('SGS.view.field.Checkbox', {
labelSeparator: '',
labelWidth: 110,
fieldLabel: field.name,
name: field.propName,
listeners: { dirtychange: checkDirty }
});
instance.add(field);
break;
case 3:
var comboStore = null;
//if (values[record.data.propName]) {
comboStore = Ext.create('Ext.data.Store', {
fields: ['ID', 'Name', 'isChecked'],
data: field.values
});
//}
console.log(comboStore);
var comboboxField = Ext.create('SGS.view.field.ComboBox', {
listeners: {
select: function(combo, record, index) {
var comboStore = null;
// var settingID = button.up('backendpanel').down('settingsgrid').getSelection()[0].data.SettingsID;
Ext.Ajax.request({
url: 'Services/DBSourceService.ashx',
method: 'POST',
params: {
id: record[0].data.ID
},
/*success: function (response, opts) {
//update ui
var intancesStore = button.up('backendpanel').down('entitiesgrid').getStore();
intancesStore.getProxy().setExtraParam('id', settingID);
intancesStore.load();
instance.setVisible(false);
},*/
})
/*comboStore = Ext.create('Ext.data.Store', {
fields: ['ID', 'Name', 'isChecked'],
data: field.values
});
console.log(comboStore);
var comboboxField = Ext.create('SGS.view.field.ComboBox', {
cls: 'ACombo2',
labelSeparator: '',
labelWidth: 110,
width: 400,
fieldLabel: field.name,
name: field.propName,
displayField: 'Name',
valueField: 'ID',
forceSelection: true,
editable: false,
store: comboStore
});
if (comboStore != null) {
var selected = null;
Ext.each(comboStore.data.items, function (item) {
if (item.data.Checked) { selected = item; }
});
if (selected) comboboxField.select(selected);
}
comboboxField.addListener('select', checkDirty);
instance.add(comboboxField);*/
}
},
cls: 'ACombo2',
labelSeparator: '',
labelWidth: 110,
width: 400,
fieldLabel: field.name,
name: field.propName,
displayField: 'Name',
valueField: 'ID',
forceSelection: true,
editable: false,
store: comboStore
});
if (comboStore != null) {
var selected = null;
Ext.each(comboStore.data.items, function (item) {
if (item.data.Checked) { selected = item; }
});
if (selected) comboboxField.select(selected);
}
comboboxField.addListener('select', checkDirty);
instance.add(comboboxField);
break;
case 4:
var unselectedData = [];
var selectedData = [];
Ext.each(values[record.data.propName], function (entry) {
if (entry.Checked) {
selectedData.push(entry);
} else {
unselectedData.push(entry);
}
});
var optionsStore = new Ext.data.Store({
fields: ['ID', 'Name', 'isChecked'],
data: unselectedData
});
var selectedStore = new Ext.data.Store({
fields: ['ID', 'Name', 'isChecked'],
data: selectedData
});
var field = Ext.create('SGS.view.field.MultiSelect', {
fieldLabel: record.data.name,
name: record.data.propName,
border: false,
optionsStore: optionsStore,
selectedStore: selectedStore,
listeners: { dirtychange: checkDirty }
});
instance.add(field);
break;
case 5:
instance.add({
xtype: 'textfield',
inputType: 'password',
labelSeparator: '',
labelWidth: 110,
inputWidth: 300,
width: 400,
fieldLabel: field.name,
name: field.propName,
enableKeyEvents: true,
listeners: { dirtychange: checkDirty }
});
break;
}
});
}
},
proxy: {
type: 'ajax',
url: 'Services/FormService.ashx',
reader: {
type: 'json',
rootProperty: 'data', successProperty: 'success'
//root: 'items'
}
},
});
instance.store.load({
params: {
id: button.up('backendpanel').down('settingsgrid').getSelection()[0].data.SettingsID,
type: button.up('backendpanel').down('settingsgrid').getSelection()[0].data.Value
}
});
},
Populate combobox after another
