In my ViewModel, I create an inline data store for a ComboBox that I bind to in the View. The problem that I'm having is setting a default value for the ComboBox, based on one of the values in the store... I might be understanding binding here, so I'd like to hear any feedback.
OrderDetailsStatus model:
Ext.define('UserUI.model.OrderDetailsStatus', {
extend: 'Ext.data.Model',
alias: 'model.OrderDetailsStatus',
fields: [{
type: 'int',
name: 'statusId'
},
{
type: 'string',
name: 'status'
}]
});
ViewModel:
stores: {
/* TODO: This could eventually become an AJAX call, but for right now,
* it's an inline data store... the statusId's are currently unused */
orderDetailsStatusStore: {
model: 'UserUI.model.OrderDetailsStatus',
proxy: {
type: 'memory'
},
data: [
{ status: 'All', statusId: 1 },
{ status: 'Correct', statusId: 2 },
{ status: 'Incorrect', statusId: 3 }
]
}
}
In the View:
{
xtype: 'combo',
fieldLabel: 'Status',
bind: {
store: '{orderDetailsStatusStore}'
},
valueField: 'status',
displayField: 'status',
queryMode: 'local',
value: 'All',
listeners: {
select: 'onSelectComboBoxStatus'
}
}
Using the value: 'All' gives me an error about the model not existing:
TypeError: Model is not a constructor: ext-all...ebug.js (line 122343, col 33)
record = new Model(dataObj);
I'm assuming this is because the bound store hasn't been fully loaded in yet? If I debug the code, at that line, Model is undefined, and the store doesn't have any data. Any help would be appreciated.
Fiddle updated with fix in 5.1.0
<iframe src="https://fiddle.sencha.com/fiddle/m3g"></iframe>
I've created a simple fiddle that replicates yours -
https://fiddle.sencha.com/#fiddle/m3g
Related
I'm trying to add a tip to a combobox during runtime with the code below but it doesn't work:
onStartReport: function (aButton) {
var lTip = Ext.getCmp('datasources');
lTip.setTooltip("Information on datasource");
}
I also tried with this, but I get an error:
onStartReport: function (aButton) {
var tip = Ext.create('Ext.tip.ToolTip', {
target: 'datasources',
html: 'Information on datasource'
});
}
view classic:
{
xtype: 'combo',
itemId: 'datasources',
name: 'datasources',
fieldLabel: 'Data sources',
displayField: 'description',
valueField: 'id',
queryMode: 'local',
value: 0,
forceSelection: true,
editable: false,
store: {
data: [
{id: 0, description: 'OnLine'},
{id: 1, description: 'History'}
],
fields: [
{name: 'id', type: 'int'},
{name: 'description', type: 'string'}
],
autoLoad: true
}
}
This method should be fine:
onStartReport: function (aButton) {
var tip = Ext.create('Ext.tip.ToolTip', {
target: 'datasources',
html: 'Information on datasource'
});
The problem is that your component doesn't really have an id, the only config you added was itemId and they are not quite the same, see the documentation. This is also why Ext.getCmp('datasources') is not working.
One way to fix this is to simply change itemId to id and the reference will be found.
If you don't want to add an id to your component, and keep using itemId, you could use the code below:
onStartReport: function (aButton) {
var combo = Ext.ComponentQuery.query('#datasources')[0],
tip = Ext.create('Ext.tip.ToolTip', {
target: combo.el,
html: 'Information on datasource'
});
There is also a third option which is to grab the combobox in it's relation to the component/controller that is calling the onStartReport method.
I have added an example here: https://fiddle.sencha.com/#view/editor&fiddle/2hap
I've come across a rather interesting problem. I have a store, which uses a model. My model looks like this:
Ext.define('HealOmni.model.device_model', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.Field'
],
fields: [
{
name: 'device_id'
},
{
name: 'device_name'
},
{
name: 'device_id_real'
},
{
name: 'sim_number'
},
{
name: 'other_device_details'
},
{
convert: function(v, rec) {
return rec.get('device_name') + " " + rec.get('device_id_real');
},
name: 'device_name_and_id'
}
]
});
and then this store is used by a ComboBox, the combo box looks like this:
xtype: 'combobox',
height: 30,
itemId: 'deviceID',
fieldLabel: 'Device ID',
labelClsExtra: 'screenSharingFontLowerHalf',
labelSeparator: ' ',
displayField: 'device_name_and_id',
queryMode: 'local',
store: 'userDeviceManagementLoggedInDisplay',
valueField: 'device_id_real'
I use the combination field device_name_and_id as the display field of the combobox. However, when I reloaded my site, it seemed that the ComboBox could not display the field properly. When I use the other fields, let's say device_id, it displays just fine. It's only the combination field that does not display and I don't know why.
I log the values to console after I load the store and all fields are displayed, even the combination ones -- so I'm really rather confused as to why the ComboBox won't display properly.
Does anyone know how to show a "convert" field in a combobox?
Please check below fiddle
https://fiddle.sencha.com/#view/editor&fiddle/1m9t
Ext.define('HealOmni.model.device_model', {
extend: 'Ext.data.Model',
fields: [{
name: 'device_name_and_id',
convert: function (v, rec) {
return rec.get('device_name') + " " + rec.get('device_id');
}
}]
});
var storeRec = Ext.create('Ext.data.Store', {
model: 'HealOmni.model.device_model',
data: [{
device_id: 1,
device_name: 'device one with id'
}, {
device_id: 2,
device_name: 'device two with id'
}]
});
Ext.create('Ext.form.field.ComboBox', {
renderTo: Ext.getBody(),
valueField: 'device_id',
displayField: 'device_name_and_id',
store: storeRec
});
I've made a small fiddle for you. Compare this to your code, i hope it helps:
https://fiddle.sencha.com/#view/editor&fiddle/1m9e
I have a form that has a field that gets populated by my store:
Ext.define('EcommBackoffice.store.TransactionProviderStatus', {
extend: 'Ext.data.Store',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'resources/data/providerstatus.json',
reader: {
type: 'json',
root: 'providerstatus'
}
},
fields: ['id', 'name']
});
My store contains a simple list of items:
{
providerstatus: [{
id: "EXPIRED",
name: "EXPIRED"
}, {
id: "ERROR",
name: "ERROR"
}, {
id: "FRAUD",
name: "FRAUD"
}, {
id: "PAID",
name: "PAID"
}, {
id: "UNCONFIRMED",
name: "UNCONFIRMED"
}]
}
Inside my form, the above store is then populated by a BoxSelect:
{
xtype: 'boxselect',
name: 'providerstatus',
fieldLabel: oMe.providerstatusField,
width: 468,
store: 'TransactionProviderStatus',
displayField: 'name',
valueField: 'id',
minChars: 2,
typeAhead: true
}
While this perfectly works, I also intend to add more items while the user types new values in it. Note that this BoxSelect is a multi-selection. Currently, when I type in random values on it, it simply clears it out.
How do I set up this particular field in such a way that I will be able to add more items, and include it as part of the data that will be passed on submit?
Did you try forceSelection:false for this boxselect.
When forceSelection is false, new records can be created by the user as they are typed. These records are not added to the combo's store. Multiple new values may be added by separating them with the delimiter, and can be further configured using the createNewOnEnter and createNewOnBlur configuration options.
Also check createNewOnEnter and createNewOnBlur
Create new on Enter for Box Select
When I am trying to fetch data from the Store in the Combo Box,I am getiing output as--- [object Object]!!! but the value of the object is not coming!! Can any body tell me what is the problem or what should be the solution for this???
In Extjs 4.0:
Create data model
Ext.define('Bond', {
extend: 'Ext.data.Model',
idProperty: 'userid',
fields: [
{
name :'industryGroupsreName',
type:'string'
},
]
});
Create store
var industry=new Ext.data.Store(
{
model:'Bond',
proxy:
{
type: 'ajax',
url: 'industry.html',
reader: {
type: 'json'
}
}
});
industry.load();
Apply bellow code to your combo box
new Ext.create('Ext.form.ComboBox',
{
fieldLabel: 'Industry Group Name',
store: industry,
id: "industrygroup",
name: "industrygroup",
allowBlank: false,
hiddenName : 'industrygroup',
width:300,
queryMode: 'local',
displayField: 'industryGroupsreName',
valueField: 'industryGroupsreName'
}),
I'd like to know a way of how to update or reload the list values of a ExtJs ComboBox. For instance, I have a some checkboxes. These checkboxes determine what values the ComboBox should have. So, after selecting some of those, I click the drowndown list (combobox) to see the values.
In short, how can I change the values (store) of a ComboBox already has.
Hope someone can help me
Thanks
I've been using this undocumented ExtJs API function to change the store at runtime:
mycombobox.bindStore(newStore);
as stated by the support team in http://www.sencha.com/forum/showthread.php?40749-Change-Combobox-store-data-update.
Edit: If I want to put the new data when the store is populated, I do something like this
storeMyStore = new Ext.data.Store({
...
listeners: {
load: function(this, records, options) {
cbMyCombo.bindStore( storeMyStore );
}
}
});
It goes a little something like this
{
xtype: 'checkbox',
//configs
listeners : {
checked : function (checkbox, checkedBool) {
var yourCombo = Ext.getCmp(yourComboID);
//I'm not sure what params you will need to reload the comboBox from your
// service but hopfully this will give the jist of things. . .
yourCombo.store.reload(
{
params:
{yourParam : checkedBool},
{yourRowID : rowID}
});
}
}
Here I making a combobox that is updated after a selection is made on another ComboBox.
Basically, the final user can use the two comboboxes to select a main category and a sub-category, which is based on the selection made on the first combobox.
This is the store for First comboBox:
Ext.define("StoreSubject", {
extend: "Ext.data.Model",
fields: [
{
name: 'i_Id'
},
{
name: 's_Value'
}
]
});
var StoreSubject = Ext.create('Ext.data.JsonStore', {
model: 'StoreSubject',
proxy: {
type: 'ajax',
url: '../General/AdministrationDefaultXMLDOM.aspx?qid=15',
reader: {
type: 'json'
}
}
});
StoreSubject.load();
This is the store for Second comboBox:
Ext.define("StoreLanguageGroup", {
extend: "Ext.data.Model",
fields: [
{
name: 'i_Id'
},
{
name: 's_Value'
}
]
});
var StoreLanguageGroup = Ext.create('Ext.data.JsonStore', {
model: 'StoreLanguageGroup',
proxy: {
type: 'ajax',
url: '../General/AdministrationDefaultXMLDOM.aspx?qid=16',
reader: {
type: 'json'
}
}
});
My code for Comobox is looks like this..
First ComboBox :
var cmbSubjectName = Ext.create('Ext.form.field.ComboBox', {
id: 'cmbSubjectName',
fieldLabel: '<b>Subject</b>',
name: 'cmbSubjectName',
valueField: 's_Value',
displayField: 's_Value',
allowBlank: false,
anchor: '80%',
labelWidth: 150,
emptyText: '[--Choose--]',
minChars: 0,
store: StoreSubject,
queryMode: 'local',
typeAhead: true,
listeners: {
'select': {
fn: function (combo, value) {
var strSubjectName = Ext.getCmp('cmbSubjectName').getValue();
Ext.getCmp('cmbLanguageType').clearValue();
Ext.getCmp('cmbLanguageType').getStore().load({
params: {
SubjectName: strSubjectName
}
});
}
}
},
});
This code is used to call and override the combox store (Impotent otherwise it will keep on loading )
Ext.override(Ext.LoadMask, {
onHide: function () {
this.callParent();
}
});
//---------------------------
Second ComboBox :
var cmbLanguageType = Ext.create('Ext.form.field.ComboBox', {
id: 'cmbLanguageType',
fieldLabel: '<b>Language</b>',
multipleSelect: false,
name: 'cmbLanguageType',
valueField: 's_Value',
displayField: 's_Value',
allowBlank: false,
anchor: '80%',
labelWidth: 150,
emptyText: '[--Choose--]',
minChars: 0,
store: StoreLanguageGroup,
queryMode: 'local',
typeAhead: true,
});
Hope this will helps you.. and Please rate my answer
In an event listener on the checkboxes, get a reference to the store that your ComboBox is reading from. Then invoke its add or remove functions to update the data in the store based on what check box is checked Once the updates are complete, invoke a doLayout() on the ComboBox component, it should re-render itself based on the current state of the store.
Although I think there is a way to have it automatically update any time the store updates -- I haven't used that yet.