Is there a way to add an option to a combobox without modifying the underlying data store in any way? I have 2 combobox elements in my form. The only difference between the two comboboxes is that one has an additional 'All' option. For example:
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}]
});
//The first combobox should load the data as is from the store above
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody()
});
//There should be a second combobox here that is almost identical
//to the one above, just appending an additional option (that says "All")
//to the top of the list
I'm aware that there are various ways to alter the store such as:
states.insert(0, [{
abbr: 'All',
name: 'All'
}])
However, I want to achieve this without altering the store, purely adding the option to the combobox itself. Is this possible?
UPDATE
I am aware that I could make the I could set the combobox 'emptyText' configuration option to 'All', but this is not what I want. I would like to have 'All' as an actual option.
Combo is a simple SELECT field of HTML. Without OPTION you cannot populate the dropdown.
Its not possible to achieve it without adding into store. Data you see in the combo comes from store.
According to the docs :
A combobox control with support for autocomplete, remote loading, and many other features.
A ComboBox is like a combination of a traditional HTML text field and a field; the user is able to type freely into the field, and/or pick values from a dropdown selection list. The user can input any value by default, even if it does not appear in the selection list; to prevent free-form values and restrict them to items in the list, set forceSelection to true.
The selection list's options are populated from any Ext.data.Store, including remote stores. The data items in the store are mapped to each option's displayed text and backing value via the valueField and displayField configurations, respectively.
I have already made comboboxes with "All", I hope I get it right, haven't got the source code available right now, but to create an "All" option for one of the comboboxes, in ExtJS 6 you have to do something like this:
var storeWithAll = Ext.create('Ext.data.Store',{
url:
proxy: etc.
listeners:{
load:function(store) {
// Add the "All" record after every load!
store.insert(0, [{
abbr: 'All',
name: 'All',
special:true
}]);
}
}
});
var storeWithoutAll = Ext.create('Ext.data.ChainedStore',{
// ChainedStore has the same data as the source:
source: storeWithAll,
filters:[{
// Filter away the "All" record
filterFn:function(item) {return !item.get("special");}
}]
});
Ext.create('Ext.form.field.ComboBox',{
store: storeWithAll, // Use the store with "All" record
...
});
Ext.create('Ext.form.field.ComboBox',{
store: storeWithoutAll, // Use the store without "All" record
...
});
Related
I'm using a dojo store memory as a datasource for dijit form select. The problem I'm having is that the select control ignores the sort I've set on the data store and instead sorts data on the label field. I'm trying this:
mhusStore = new Memory({ data: data, idProperty: "MHID", sort: [{ attribute: "SegIDOrder", descending: false }] }); //verified the sort is on SegIDOrder in debug mode (it also comes out of the db this way
this.selectUSMAS.set("labelAttr", "MHID");
//this.selectUSMAS.set("sort", "SegIDOrder");//tried this no result
this.selectUSMAS.set("store", mhusStore);
any ideas how I can get the select to use the order of the memory store?
Thanks
already answered here:
How to change order of elements in a dijit.form.Select
this.selectUSMAS.set("sortByLabel", false);
Among the other form fields i have(the combobox is an extension of the standard combobox with extra config options):
marker: new Forms.ui.ComboBox({
fieldLabel: _('Marker'),
displayField: 'name',
valueField: 'id',
store: new Ext.data.JsonStore({
fields: ['name', 'id','resellerid'],
data: [
{'name':_('Default'), 'id': 0, 'resellerid': 0}
]
})
})
Now when i need to use bindStore in a function that is called separately and has a jsonStore passed to it(store):
this.fields.marker.bindStore(store);
However, while the store is populated - im unable to select anything. I moved the store to the same script to test it - and set it directly to the combobox config as 'store:' - it works.
So the problem comes from bindstore it seems.
What am i missing?
Apparently it was the quotes around the data property names that broke it.
I have an infragistics Ignite UI combo in an html page, in Durandal project.
I wants its selectedItem property to be bound to any variable in the JavaScript behind.
How can I do it?
thank you.
Have a look at this sample: Bind Combo With KnockoutJS (Durandal uses Knockout, so you should be able to take most of this sample's code and reuse).
Basically, in your viewmodel you will need an extra observable that will hold the current selection, in this sample it's the 'actorName' defined as:
function ViewModel(actorsList) {
var self = this;
this.actorsList = actorsList;
this.actors = ko.observableArray(self.actorsList);
// The name of the currently selected customer.
this.actorName = ko.observable(self.actors()[0].name);
}
(I've edited out some as the sample has a second select element used to modify the combo slection)
Then in your combo in the view you want to bind this extra observable to the 'text' property like in the sample:
<span id="comboActors" data-bind="igCombo: {
text: actorName,
dataSource: actors,
textKey: 'name',
valueKey: 'id',
allowCustomValue : true,
enableSelectionChangedUpdate: true,
width: '200',
mode: 'dropdown',
enableClearButton: false
}"></span>
Notice how name is the value you pass to the viewmodel observable and the same 'name' property is defined as text key, which is why the combo will actually select the proper item when you set the text. Now all you need to do is modify the value, for example:
viewModel.actorName("Jeremy Irons");
And the combo will change selection (you can even try this with the sample using the code in the console). That's the basics, there's a help topic on Configuring Knockout Support (igCombo) Knockout / Durandal documentation for you to check out in case you can't fit this implementation in your project.
I am using lovcombo in ExtJS 3.2. I fetch the data for initial loading of combo box and I am getting it correctly. But now I have a requirement in which, lets say initially I got 10 entries (options) in combo box, I need to select now 5 options dynamically. Actually I am using it to show dependent entity mapping. Means one entity is dependent on many other entities, so showing them in multiselect combo box. When I get root entity, I need to fetch dependent entities for my root entity, and accordingly I will select those entries dynamically in combo box. This is my code -
{
xtype: 'lovcombo',
fieldLabel: 'data Requirement ',
store: dep_req_store,
displayField: 'text',
valueField: 'value',
mode: 'local',
emptyText: 'Select Requirement...',
triggerAction: 'all',
name: 'data_id',
id: 'data_id' + idSuf,
hiddenName: 'reqIdHid3',
width: 200,
forceSelection: true,
editable: true,
hideOnSelect: false,
beforeBlur: Ext.emptyFn,
}
I will iterate thru each element of this combo after its loaded and will select necessary options:
Ext.getCmp('data_id' + idSuf).getStore().data.items.each(function(record) {
record.dirty = true; //I tried this but no success.
});
Also, I didn't find any attribute which can help me to select the option like:
record.selected = true
So, please help me in this. Is it possible to achieve this using lovcombo?
Thanks in advance.
in record's field definition you can create a new field called checked, this field is by default used by lovcombo to store checked state of the record
fields: [
...
{name: 'checked', type: 'boolean'},
....
]
and when you want to check any record after loading it just do
record.set('checked', true);
Reference:
I have two associated models, User and Order. A User has many Orders.
Ext.define("User", {
extend: 'Ext.data.Model',
fields: [
'id', 'name'
],
hasMany: {model: 'Order', name: 'orders'},
proxy: {
type: 'ajax',
url : 'users.json',
reader: {
type: 'json',
root: 'users'
}
}
});
Ext.define("Order", {
extend: 'Ext.data.Model',
fields: [
'id', 'total'
],
belongsTo: 'User'
});
I'd like to display all of the Users in one grid panel, and all of the orders in another grid. I know how to show all of the Users in a grid, I simply define a store with the User model. But I'm a bit lost as to how to show all of the orders in a separate grid. Do I have to define a separate store? What proxy do I use? Anyone have insight? Basically, I just need a conceptual understanding.
I believe what you are asking for is a fairly common use case. Unfortunately ExtJs is not yet able to cope with this out of the box, simply as currently each grid is bound to a store, but your orders store is created on the fly every time you access it through its user association.
The good news is that you have various ways to achieve this. The best one I can think of is that every time the user clicks on a user row, you get your orders store (user.orders()). Then you can reconfigure your grid with this new store.
Usually each Grid needs its own Store. Showing all orders will work the same way as showing all users, just change the Store ID and it should be okay.