PDA

View Full Version : Ext.form.field.ComboBox.setValue() doesn't work after input of non-existent value



Ex_Soft
18 Jul 2012, 12:05 AM
Ext.onReady(function() {
Ext.QuickTips.init();

if(window.console && console.clear)
console.clear();

if(window.console && console.log)
console.log("core: %s, extjs: %s", Ext.versions.core.version, Ext.versions.extjs.version);

var
store = Ext.create("Ext.data.Store", {
fields: [
{ name: "id", type: "string" },
{ name: "name", type: "string" }
],
data: [
{ id: "ID1", name: "Record# 1" },
{ id: "ID2", name: "Record# 2" },
{ id: "ID3", name: "Record# 3" },
{ id: "ID4", name: "Record# 4" },
{ id: "ID5", name: "aaa" },
{ id: "ID6", name: "aaabbb" },
{ id: "ID7", name: "aaabbbccc" }
]
}),
fieldComboBox = Ext.create("Ext.form.field.ComboBox", {
store: store,
valueField: "id",
fieldLabel: "ComboBox",
displayField: "name",
queryMode: "local",
editable: true,
typeAhead: true,
forceSelection: true,
valueNotFoundText: "blah-blah-blah"
}),
f = Ext.create("Ext.form.Panel", {
frame: true,
items: [
fieldComboBox
],
dockedItems: [{
xtype: "toolbar",
dock: "top",
items: [{
text: "setValue()",
handler: function(btn, e) {
fieldComboBox.setValue("ID2");
}
}]
}]
}],
}),
w = Ext.create("Ext.window.Window", {
title: "Test Ext.form.Panel",
autoScrol: true,
layout: "fit",
autoDestroy: true,
border: 0,
buttons: [
{
text: "Close",
handler: function(btn, e) {
w.close();
}
}
],
items: [f]
});

w.show();
});

1. Click "setValue()" -> "Record# 2"
2. Input "ddd"
3. Click "setValue()" -> "blah-blah-blah"
Is this a bug?

P.S. 4.0.7/4.1.1

tvanzoelen
18 Jul 2012, 1:10 AM
The value you set must be in the store. So add it to the store if it doesn exist.

Or set forceSelection to false.

For only display you could use setRawValue

Ex_Soft
18 Jul 2012, 1:27 AM
The value you set must be in the store


...
store = Ext.create("Ext.data.Store", {
fields: [
{ name: "id", type: "string" },
{ name: "name", type: "string" },
{ name: "smthfield", "type": "string" }
],
data: [
{ id: "ID1", name: "Record# 1" },
{ id: "ID2", name: "Record# 2" },
{ id: "ID3", name: "Record# 3" },
{ id: "ID4", name: "Record# 4" },
{ id: "ID5", name: "aaa" },
{ id: "ID6", name: "aaabbb" },
{ id: "ID7", name: "aaabbbccc" }
]
}),
...
items: [{
text: "setValue()",
handler: function(btn, e) {
fieldComboBox.setValue("ID2");
}
}]
...



1. Click "setValue()" -> "Record# 2"

tvanzoelen
18 Jul 2012, 1:37 AM
It probably looks to the inputfield and tries to force a selection. What if you clear the input first and then set your value?

Cause what has priority? The user input or your setValue?

Ex_Soft
18 Jul 2012, 2:27 AM
This is fully standalone example http://jsfiddle.net/5BJ4K/


<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Test Ext.form.field.ComboBox</title>
<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.1.0-gpl/resources/css/ext-all.css"/>
<script charset="utf-8" src="http://dev.sencha.com/deploy/ext-4.1.0-gpl/ext-all-debug.js"></script>
<script>
Ext.Loader.setConfig({
enabled: true,
disableCaching: false
});

Ext.onReady(function() {
Ext.QuickTips.init();

if(window.console && console.clear)
console.clear();

if(window.console && console.log)
console.log("core: %s, extjs: %s", Ext.versions.core.version, Ext.versions.extjs.version);

var
store = Ext.create("Ext.data.Store", {
fields: [
{ name: "id", type: "string" },
{ name: "name", type: "string" }
],
data: [
{ id: "ID1", name: "Record# 1" },
{ id: "ID2", name: "Record# 2" },
{ id: "ID3", name: "Record# 3" },
{ id: "ID4", name: "Record# 4" },
{ id: "ID5", name: "aaa" },
{ id: "ID6", name: "aaabbb" },
{ id: "ID7", name: "aaabbbccc" }
]
}),
fieldComboBox = Ext.create("Ext.form.field.ComboBox", {
store: store,
valueField: "id",
fieldLabel: "ComboBox",
displayField: "name",
queryMode: "local",
editable: true,
typeAhead: true,
forceSelection: true,
valueNotFoundText: "blah-blah-blah",
width: 250
}),
f = Ext.create("Ext.form.Panel", {
frame: true,
items: [
fieldComboBox
],
dockedItems: [{
xtype: "toolbar",
dock: "top",
items: [{
text: "setValue()",
handler: function(btn, e) {
fieldComboBox.setValue("ID2");
}
}]
}],
}),
w = Ext.create("Ext.window.Window", {
title: "Test Ext.form.Panel",
autoScrol: true,
layout: "fit",
autoDestroy: true,
border: 0,
buttons: [
{
text: "Close",
handler: function(btn, e) {
w.close();
}
}
],
items: [f]
});

w.show();
});
</script>
</head>
<body>
</body>
</html>

If you follow this (http://www.sencha.com/forum/showthread.php?230993-Ext.form.field.ComboBox.setValue%28%29-doesn-t-work-after-input-of-non-existent-value&p=856151&viewfull=1#post856151) steps at the third step you may be seen that at the beginning the record is found and displayed but immediately is replaced by valueNotFoundText.

P.S. Why http://dev.sencha.com/deploy/ext-4.1.1-gpl/ext-all-debug.js - 404 (Not found)

tvanzoelen
18 Jul 2012, 3:02 AM
Its like I said before. You must reset userinput before you set your value.

Somewhere at the road rawvalue is evaluated, and thats before rawvalue is set by setValue. They conflict


Below works fine.




Ext.onReady(function() {
Ext.QuickTips.init();

if (window.console && console.clear)
console.clear();

if (window.console && console.log)
console.log("core: %s, extjs: %s", Ext.versions.core.version, Ext.versions.extjs.version);

var
store = Ext.create("Ext.data.Store", {
fields: [
{ name: "id", type: "string" },
{ name: "name", type: "string" }
],
data: [
{ id: "ID1", name: "Record# 1" },
{ id: "ID2", name: "Record# 2" },
{ id: "ID3", name: "Record# 3" },
{ id: "ID4", name: "Record# 4" },
{ id: "ID5", name: "aaa" },
{ id: "ID6", name: "aaabbb" },
{ id: "ID7", name: "aaabbbccc" }
]
}),
fieldComboBox = Ext.create("Ext.form.field.ComboBox", {
store: store,
valueField: "id",
fieldLabel: "ComboBox",
displayField: "name",
queryMode: "local",
editable: true,
typeAhead: true,
forceSelection: true,
valueNotFoundText: "blah-blah-blah"
}),
f = Ext.create("Ext.form.Panel", {
frame: true,
items: [
fieldComboBox
],
dockedItems: [{
xtype: "toolbar",
dock: "top",
items: [{
text: "setValue()",
handler: function(btn, e) {
fieldComboBox.reset();
fieldComboBox.setValue("ID2");
}
}]
}]
}),
w = Ext.create("Ext.window.Window", {
title: "Test Ext.form.Panel",
autoScrol: true,
layout: "fit",
autoDestroy: true,
border: 0,
buttons: [
{
text: "Close",
handler: function(btn, e) {
w.close();
}
}
],
items: [f]
});

w.show();
});

Ex_Soft
18 Jul 2012, 3:49 AM
You must reset userinput before you set your value
I assumed that the setValue() is indifferent to what was entered, but you are right


...
beforeReset: function() {
this.callParent();
this.clearFilter();
},
...