PDA

View Full Version : Dependent combobox is showing the old filtered data when focussed



sanjayarrk1
20 Dec 2011, 5:16 AM
Hi,

I am having multiple combo-box in the UI. they all are dependent once we select any thing from any combo. If don't then they all displays the separate full data. If i clear all the combo-box and again click on any combo then it is showing the older filtered data for couple of second before showing full separate data.

Is there any property where using that I can always load a latest value in the dependent combo without and flickr problem.

Any help will be highly appreciated !!

mitchellsimoens
20 Dec 2011, 5:45 AM
What version of Ext JS so I can move to the appropriate forum?

sanjayarrk1
20 Dec 2011, 8:53 PM
I am very glad to see the quick response - Here is the version 4.0.7

skirtle
20 Dec 2011, 9:15 PM
Without seeing your code it's almost impossible to guess what's going wrong. Could you post a complete, minimal test case? Please be sure to wrap any code you post in [CODE] tags (# button on the editor toolbar).

sanjayarrk1
20 Dec 2011, 9:27 PM
Hello skirtle, Sorry I posted the code before your post so couldn't follow the instruction posted by you.
I am putting it aging in the code format so it will be easy for you to debug.

skirtle
20 Dec 2011, 9:34 PM
There's no need to repost. You can edit your posts after you submit them using the link at the bottom of each post.

That is far too much code for us to help you. Ideally it needs to be a complete, minimal test case: what you've posted is neither. Even if that isn't possible you're going to have to reduce it down. It isn't fair to expect other community members to invest time extracting a proper test case, you need to do that yourself.

sanjayarrk1
20 Dec 2011, 10:09 PM
// I reduced it as much as I can - Please take a look


initComponent: function() {
Ext.apply(this, {
items: [{
layout: 'vbox',
autoScroll: true,
items: [{
layout: 'hbox',
border: false,
cls: 'config_window_addseries',
items: [{
xtype: 'combo',
id: 'hostCombo',
store: new Ext.create('DSHB.store.PerformanceGaugeFilter'),
editable: true,
valueField: 'name',
displayField: 'name',
emptyText: 'Host',
hideTrigger: true,
cls: 'config_window_text_field_addseries',
queryMode: 'local',
triggerAction: 'all',
typeAhead: true,
hiddenName: 'host',
forceSelection: true,
listConfig: {
loadMask: false
},
enableKeyEvents: true,
listeners: {
'render': function(e, eopts) {
var host1 = Ext.getCmp("hostCombo");
host1.setRawValue(host);
storeLoadFun.init('host', e);
},
'select': function() {
var hostCombo1 = Ext.getCmp('hostCombo');
hostCombo1.removeCls('validation-button-red');
if (error) validate();
var serviceCombo = Ext.getCmp('serviceCombo');
var metricCombo = Ext.getCmp('metricCombo');
if (serviceCombo !== null && metricCombo !== null) {
storeLoadStatusFun.init(hostCombo1.getValue(), serviceCombo.getValue(), metricCombo.getValue());
}
textHostVal = hostCombo1.getValue();
storeLoadFun.init('service', serviceCombo);
storeLoadFun.init('metric', metricCombo);
},
'change': function() {
maxChangeStatusFun.init();
},
'focus': function(e, eopts) {
var hostCombo1 = Ext.getCmp('hostCombo');
var serviceCombo = Ext.getCmp('serviceCombo');
var metricCombo = Ext.getCmp('metricCombo');
if (hostCombo1.getValue() == null) {
storeLoadFun.init('host', e);
} else if (serviceCombo.getValue() == null && metricCombo.getValue() == null) {
storeLoadFun.init('host', e);


}
e.expand();
},
'keyup': function(e, eve, obj) {
if (e.getValue() !== null) {
e.forceSelection = true;
textHostVal = e.getValue();
}
else {
e.forceSelection = false;
textHostVal = "";
e.setValue(null);
storeLoadFun.init('host', e);
e.expand();
}
//textHostVal = e.getValue();
},
'blur': function(e) {
var hostCombo = Ext.getCmp("hostCombo");
if (hostCombo.getValue() == null) {
storeLoadFun.init('host', e);
}
if (textHostVal === null || textHostVal === "") {
hostCombo.setValue(null);
}
else {
var serviceCombo = Ext.getCmp('serviceCombo');
var metricCombo = Ext.getCmp('metricCombo');
if (serviceCombo !== null && metricCombo !== null) {
storeLoadStatusFun.init(hostCombo.getValue(), serviceCombo.getValue(), metricCombo.getValue());
}
}
}
}
},
{
xtype: 'combo',
id: 'serviceCombo',
store: new Ext.create('DSHB.store.PerformanceGaugeFilter'),
editable: true,
emptyText: 'Service',
valueField: 'name',
displayField: 'name',
hideTrigger: true,
cls: 'config_window_text_field_addseries',
queryMode: 'local',
triggerAction: 'all',
typeAhead: true,
hiddenName: 'service',
forceSelection: true,
enableKeyEvents: true,
listConfig: {
loadMask: false
},
listeners: {
'render': function(e, opts) {
var service1 = Ext.getCmp("serviceCombo");
service1.setRawValue(service);
storeLoadFun.init('service', e);
},
'beforequery': function(options) {
options.forceAll = true;
},
'select': function() {
var serviceCombo1 = Ext.getCmp('serviceCombo');
serviceCombo1.removeCls('validation-button-red');
if (error) validate();
var hostCombo = Ext.getCmp('hostCombo');
var metricCombo = Ext.getCmp('metricCombo');
if (hostCombo !== null && metricCombo !== null) {
storeLoadStatusFun.init(hostCombo.getValue(), serviceCombo1.getValue(), metricCombo.getValue());
}
textServiceVal = serviceCombo1.getValue();
storeLoadFun.init('host', hostCombo);
storeLoadFun.init('metric', metricCombo);
},
'change': function(e) {
var serviceCombo = Ext.getCmp('serviceCombo');
if (serviceCombo.getValue() == null) {
storeLoadFun.init('service', e);
}
},
'focus': function(e, opts) {
var hostCombo1 = Ext.getCmp('hostCombo');
var serviceCombo = Ext.getCmp('serviceCombo');
var metricCombo = Ext.getCmp('metricCombo');
if (serviceCombo.getValue() == null) {
storeLoadFun.init('service', e);
} else if (hostCombo1.getValue() == null && metricCombo.getValue() == null) {
storeLoadFun.init('service', e);
}
e.expand();
},
'keyup': function(e, eve, obj) {
var serviceCombo = Ext.getCmp('serviceCombo');
if (e.getValue() !== null) {
e.forceSelection = true;
textServiceVal = e.getValue();
}
else {
e.forceSelection = false;
textServiceVal = "";
e.setValue(null);
serviceCombo.setValue(null);
e.expand();
}
},
'blur': function(e) {
var serviceCombo = Ext.getCmp('serviceCombo');
var metricCombo = Ext.getCmp('metricCombo');
if (serviceCombo.getValue() == null) {
storeLoadFun.init('service', e);
}
var serviceCombo = Ext.getCmp("serviceCombo");
if (textServiceVal === null || textServiceVal === "") {
serviceCombo.setValue(null);
}
else {
var hostCombo = Ext.getCmp('hostCombo');
var metricCombo = Ext.getCmp('metricCombo');
if (hostCombo !== null && metricCombo !== null) {
storeLoadStatusFun.init(hostCombo.getValue(), serviceCombo.getValue(), metricCombo.getValue());
}
}
}
}
},
{
xtype: 'combo',
id: 'metricCombo',
store: new Ext.create('DSHB.store.PerformanceGaugeFilter'),
editable: true,
emptyText: 'Metric',
valueField: 'name',
displayField: 'name',
hideTrigger: true,
queryMode: 'local',
triggerAction: 'all',
typeAhead: true,
hiddenName: 'metric',
forceSelection: true,
cls: 'config_window_text_field_addseries',
listConfig: {
loadMask: false
},
enableKeyEvents: true,
listeners: {
'render': function(e, opts) {
var metric1 = Ext.getCmp("metricCombo");
metric1.setRawValue(metric);
storeLoadFun.init('metric', e);
},
'select': function() {
var metricCombo1 = Ext.getCmp('metricCombo');
metricCombo1.removeCls('validation-button-red');
if (error) validate();
var hostCombo = Ext.getCmp("hostCombo");
var serviceCombo = Ext.getCmp("serviceCombo");
if (hostCombo !== null && serviceCombo !== null) {
storeLoadStatusFun.init(hostCombo.getValue(), serviceCombo.getValue(), metricCombo1.getValue());
}
textMetricVal = metricCombo1.getValue();
storeLoadFun.init('host', hostCombo);
storeLoadFun.init('service', serviceCombo);
},
'change': function() {
maxChangeStatusFun.init();
},
'focus': function(e, opts) {
var hostCombo1 = Ext.getCmp('hostCombo');
if (hostCombo1.getValue() == null) {
storeLoadFun.init('metric', e);
}
e.expand();
},
'keyup': function(e, eve, obj) {
if (e.getValue() !== null) {
e.forceSelection = true;
textMetricVal = e.getValue();
}
else {
e.forceSelection = false;
textMetricVal = "";
e.setValue(null);
e.expand();
}
},
'blur': function() {
var metricCombo = Ext.getCmp("metricCombo");
if (textMetricVal === null || textMetricVal === "") {
metricCombo.setValue(null);
}
else {
var hostCombo = Ext.getCmp("hostCombo");
var serviceCombo = Ext.getCmp("serviceCombo");
if (hostCombo !== null && serviceCombo !== null) {
storeLoadStatusFun.init(hostCombo.getValue(), serviceCombo.getValue(), metricCombo.getValue());
}
}
}
}
}]
}]
}]
});

sanjayarrk1
20 Dec 2011, 11:19 PM
Hi Skirtle,

does this code (which i posted after removing extra code) helping you in debugging?
(Today we have a demo to client it will help us to remove this defect before demo)

thanks in advance !!

skirtle
21 Dec 2011, 12:14 AM
// I reduced it as much as I can

Beg to differ. Look at all the settings on those comboboxes. There's no way you need all of them to reproduce this problem: some of them aren't even real settings.

I understand that you're under time pressure to fix this problem before your demo but if you can't extract a proper test case then I can't help you. Extracting a proper test case does not mean simply deleting a random section of your code and posting it again.

One observation I would make is that your code is so complicated it's little wonder that you're having problems. It is in desperate need of some refactoring just to make it intelligible.

I also notice the following recurring mistake:


store: new Ext.create('DSHB.store.PerformanceGaugeFilter'),

It should either be:


store: Ext.create('DSHB.store.PerformanceGaugeFilter'),

or:


store: new DSHB.store.PerformanceGaugeFilter(),