PDA

View Full Version : Dynamic loading combobox with different http request address.



inel0910
15 Sep 2010, 11:36 PM
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
16 Sep 2010, 12:12 AM
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
16 Sep 2010, 5:48 AM
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
16 Sep 2010, 5:52 AM
use beforeload event on second combobox :)

inel0910
16 Sep 2010, 8:29 PM
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
16 Sep 2010, 9:40 PM
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
16 Sep 2010, 10:15 PM
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
17 Sep 2010, 5:15 AM
modify this line please


otherComboStore.proxy.setUrl(url, true);


I apply this fix on my first code !