PDA

View Full Version : [CLOSED] ComboBox Question



Timothy
Jun 08, 2012, 9:33 PM
Hello,

Was just wondering how one would do the following:

1. Add items to a combobox that is not bound to a store, after render
2. Remove all items from a combobox that is not bound to a store

I don't see a context for .items in JavaScript.

Cheers,
Timothy

Daniil
Jun 08, 2012, 10:10 PM
Hi,

If you set up Items for the ComboBox it will cause a simple Store will be created internally. So, all the same there is a Store and all ComboBox items should be there.

So, there are no items in ComboBox "that is not bound to a store".

Please provide more details about the requirement. Maybe we could suggest something.

geoffrey.mcgill
Jun 08, 2012, 10:16 PM
Hi Timothy,

I'll just a few comments to @daniil's.

The .Items Collection of a ComboBox creates a Store client-side. We just create the Store behind-the-scenes and there is always as Store+ComboBox if you add any .Items.

The Store is there (client-side), and you can always get an instance of that store by calling .getStore() on the ComboBox.

Example


var store = App.ComboBox1.getStore();

Hope this help.

Timothy
Jun 09, 2012, 12:59 PM
Thanks, I noticed this yesterday after I asked ... should have known from the Sencha docs, I didn't see any reference to items. What is the default structure of the store if you use items? For example, how would I get the text and value from a record in the store?

Cheers,
Timothy

Vladimir
Jun 09, 2012, 7:40 PM
Try this


var valueOfFirstRecord = combo.store.getAt(0).get(combo.valueField);
var textOfFirstRecord = combo.store.getAt(0).get(combo.displayField);

Daniil
Jun 10, 2012, 10:26 AM
Answering this question:

What is the default structure of the store if you use items?

The markup below:

<ext:ComboBox runat="server">
<Items>
<ext:ListItem Text="Item 1" Value="1" />
<ext:ListItem Text="Item 2" Value="2" />
</Items>
</ext:ComboBox>
produces the JavaScript code like this

Ext.onReady(function () {
Ext.create("Ext.form.field.ComboBox", {
id : "ctl04",
renderTo : "App.ctl04_Container",
queryMode : "local",
triggerAction : "all",
store : [
["1", "Item 1"],
["2", "Item 2"]
]
});
});

Please see the ComboBox store docs article how consider a multi-dimensional array as the value of the "store" config option.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.ComboBox-cfg-store

Timothy
Jun 15, 2012, 7:50 PM
How come the following doesn't work on the store:



store.add( [
record.get(parent.displayField),
record.get(parent.valueField)
] );




I see the store is defined as:



store:[["Value 1", "Item 1"]]


I thought the above code would have worked. Any suggestions?

Cheers,
Timothy

Daniil
Jun 15, 2012, 7:58 PM
I think the following should work.

var rec;
rec[parent.displayField] = record.get(parent.displayField);
rec[parent.valueField] = record.get(parent.valueField);
store.add(rec);

Please also clarify is the "record" not already bound to the ComboBox Store?

Timothy
Jun 15, 2012, 8:00 PM
Please also clarify is the "record" not already bound to the ComboBox Store?

Correct, at the moment the ComboBox is empty.

Cheers

Timothy
Jun 15, 2012, 8:03 PM
I think the following should work.

var rec;
rec[parent.displayField] = record.get(parent.displayField);
rec[parent.valueField] = record.get(parent.valueField);
store.add(rec);

Your example returns



can't convert undefined to object

temp[parent.displayField] = record.get(parent.displayField);Cheers

Daniil
Jun 15, 2012, 8:12 PM
Oops, please replace

var rec;
with

var rec = {};

Timothy
Jun 15, 2012, 8:30 PM
Thanks Daniil, I'm getting very confused ... when I have the following:



b.Add(Html.X().ComboBox()
.ID("drpLanguage")
.AllowBlank(false)
.AnchorHorizontal("100%")
.Editable(false)
.ForceSelection(true)
.SimpleSubmit(true)
.TypeAhead(false)
.ValueHiddenName("Customer.Language")
);


When I do the following:



alert(App.drpLanguage.displayField);
alert(App.drpLanguage.valueField);


It returns "field1" and "field1"? I thought it should be "field1" and "field2" or something?

Cheers,
Timothy

Daniil
Jun 15, 2012, 8:51 PM
Well, by default valueField matches displayField.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.ComboBox-cfg-valueField

If you initially populate the ComboBox with Items the displayField and valueField will be different.

You can just set up it manually if you don't initially set up neither Store or Items.

Timothy
Jun 17, 2012, 3:14 PM
If you define your own store for the ComboBox is there away to load the ComboBox in Razor using the items collection without having to do a remote call (proxy)?

Daniil
Jun 17, 2012, 6:32 PM
I think yes.

Example

<!DOCTYPE html>

<html>
<head>
<title>Ext.Net.MVC v2 Example</title>
</head>
<body>
@Html.X().ResourceManager()

@(Html.X().ComboBox()
.ID("ComboBox1")
.Store(store =>
store.Add(Html.X().Store()
.Model(model =>
model.Add(Html.X().Model()
.Fields(fields =>
{
fields.Add(Html.X().ModelField().Name("text"));
fields.Add(Html.X().ModelField().Name("value"));
})
)
)
)
)
.DisplayField("text")
.ValueField("value")
.Items(items =>
{
items.Add(new ListItem("Item 1", "1"));
items.Add(new ListItem("Item 2", "2"));
})
)
</body>
</html>