Dynamic loading combobox with different http request address.

[inel0910]

I'm using two combobox in row editor.
If user select 1st combobox's specific item,
2nd combobox's has to be a dynamic loading(different data store or http request address).

Code below


var sapStore = new Ext.data.Store({ // Use in editor
proxy: new Ext.data.HttpProxy({
url: '/' + ses.config.contextUrl + '/ws/admin/sap/selectServiceList?_type=json',
method:'GET'
}),
reader: new Ext.data.JsonReader({
root: 'sapservice',
fields: [{name: 'serviceId'}]
})
});

var boeStore = new Ext.data.Store({ // Use in editor
proxy: new Ext.data.HttpProxy({
url: '/' + ses.config.contextUrl + '/ws/admin/boe/selectServiceList?_type=json',
method:'GET'
}),
reader: new Ext.data.JsonReader({
root: 'boeservice',
fields: [{name: 'serviceId'}]
})
});

var sapServiceIdEditor = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
lazyRender:true,
mode: 'remote',
editable: false,
autoSelect: true,
valueField: 'serviceId',
displayField: 'serviceId',
store: sapStore
});


var colModel = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{header: 'Report ID', dataIndex: 'reportId', width: 150, sortable: true,
editor: {xtype: 'textfield', allowBlank: false}},
{header: 'Report Name', dataIndex: 'reportName', width: 170, sortable: true,
editor: {xtype: 'textfield', allowBlank: false}},
{header: 'Status', dataIndex: 'status', width: 80, sortable: true,
renderer: function(value, metaData, record, rowIndex, colIndex, store) {
if(value == 1)
return 'Active';
else if(value == 0)
return 'Inactive';
},
editor: new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
lazyRender:true,
mode: 'local',
editable: false,
autoSelect: true,
store: [[1, 'Active'], [0, 'Inactive']]
})
},
{header: 'Service Type', dataIndex: 'serviceType', width: 100, sortable: true,
editor: new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
lazyRender:true,
mode: 'local',
editable: false,
autoSelect: true,
store: [['boequery', 'boequery'], ['sap', 'sap']],
listeners: {
'select': function(combo, r, idx) {
//serviceIdEditor.destroy();
serviceIdEditor.clearValue();
var temp = Ext.getDom('serviceIdEditor');
//var temp = serviceIdEditor.getEl();
//serviceIdEditor.store.load({});
if(combo.getValue() == 'sap') {
//serviceIdEditor.store.removeAll();
//serviceIdEditor.reset();
serviceIdEditor.store.destroy();
serviceIdEditor.store = sapStore;
serviceIdEditor.store.load();
//serviceIdEditor.store.reload({});
}
else if(combo.getValue() == 'boequery') {
//serviceIdEditor.store.removeAll();
//serviceIdEditor.reset();
serviceIdEditor.store.destroy();
serviceIdEditor.store = boeStore;
serviceIdEditor.store.load();
//serviceIdEditor.store.reload({});
}
}
}
})
},
{header: 'Service ID', dataIndex: 'serviceId', width: 150, sortable: true,
//editor: {xtype: 'textfield', allowBlank: false}},
editor: serviceIdEditor},
{header: 'Report Type', dataIndex: 'reportType', width: 90, sortable: true,
editor: {xtype: 'textfield', allowBlank: false}},
{header: 'Description', dataIndex: 'description', width: 240, sortable: true, id: 'description',
editor: {xtype: 'textfield', allowBlank: true}},
{header: 'Layout File', dataIndex: 'layoutFile', width: 400, sortable: true,
renderer: function(value, metaData, record, rowIndex, colIndex, store) {
if((value != "") && (value != null)) {
//var fileId = Ext.util.Format.substr(value, 32, value.length);
return '<a href="/' + ses.config.contextUrl + '/ws/attach/getAttachment/'+value+'">'+value+'</a>';
}
else
return "";
},
editor: {disabled: true}},
{header: 'Created', dataIndex: 'created', width: 120, sortable: true,
renderer: function(value, metaData, record, rowIndex, colIndex, store) {

if((value == "") || (value == null)) {
return;
}
value = Ext.util.Format.substr(value, 0, 19);
var dt = Date.parseDate(value, 'Y-m-d\\TH:i:s');
return dt.format('Y-m-d H:i:s');
},
editor: {disabled: true}}
]);
See a 'Service Type' & 'Service ID' in column model

Thanks in advance &
Sorry for bad English.

[laurentParis]

May be, you can config your combobox with an ArrayStore and use different Ext.Ajax request to loading your combobox manualy
or if you need more dynamism, use beforeload store event for switch proxy URL.

[inel0910]

Already I'm using different Ext.Ajax.requet method.
But it looks dirty and not good for logical flow.

Also, Using beforeload is impossible.
Because changing address of request is fire when select event in 1st combobox.

Do anyone can help?

[laurentParis]

use beforeload event on second combobox :)

[inel0910]

Thank you for your reply.
I try to handle a 'beforeload' event on 2nd combobox.
But, it can't catch a event.
I think it's more complex problem.

Already I tried several event like 'beforeload'(store event), 'beforequery', 'beforerender' and so on.
Some event could catch a event, but some event could not catch a event.
Most important things is not work at all.

Do you have any idea?
Plz help me somebody else!
Thanks.

[laurentParis]

don't pass params with string url


var sapStore = new Ext.data.Store({ // Use in editor
baseParams: {_type: 'json'},
proxy: new Ext.data.HttpProxy({
url: '/' + ses.config.contextUrl + '/ws/admin/sap/selectServiceList',
method:'GET'
}),
...

modify your listeners


listeners: {
'select': function(combo, r, idx) {
var otherComboStore = Ext.getCmp('otherCombo').getStore(), url = '';
switch(r.data.field1) {
case 'boequery':
url = 'http:url1';
break;
default:
url = 'http:url2';
}
otherComboStore.proxy.setUrl(url, true);
otherComboStore.load();
}
}

[inel0910]

Really thank you for your concern.
I tried your code, but it didn't work.
Result is 2nd combo box did not change.
It keep a first loaded value list.

I think problem is render or request.
Switching proxy url is ok. But,
if code request and received value, finally rendered,
it does not send a switched address request or not work expand.
Maybe combobox has a 'rendered' tag or like responded option.
Remove combobox's loaded value is possible, but request new data or render is not work.
(Maybe user click a arrow to expand, combobox does not send a request)
so, I can't see a switched data.

Do you have any idea?

Really thank you &
Sorry for bad English.

[laurentParis]

modify this line please


otherComboStore.proxy.setUrl(url, true);


I apply this fix on my first code !