extjs combobox model - extjs

Is there a way to bind a store to a ExtJS ComboBox without creating a js model (ExtJS 4.1)?
To populate a users combobox I'll always need to set up the model first? I would like to skip the following code for each combobox:
Ext.define('User',{extend:'Ext.data.Model',idProperty:'Id',fields:['Id','Name']});

You're right, Neil!
I've found how to use it:
var myStore = Ext.create('Ext.data.Store',{
fields:['Id','Name'],
data:[
{Id:0,Name:'Yes'},
{Id:1,Name:'No'},
{Id:2,Name:'Maybe'}
]
});
var pnl = Ext.create('Ext.panel.Panel', {
xtype: 'panel',
title: 'My Panel',
items: [{
id:'cboField1'
xtype:'combobox',
fieldLabel:'My Field',
displayField:'Name',
valueField:'Id',
queryMode:'local',
store: myStore
}]
});

If you're using Architect you can specify an array in the store property for the ComboBox. There is no point to create extra stores & models if you just want a static 'Title' ComboBox.
xtype:'combo',
fieldLabel:'Title',
name:'division',
queryMode:'local',
store:['Mr','Mrs','Ms'],
displayField:'title',
autoSelect:true,
forceSelection:true
p.s. In order to change the store property to a local array in Architect you need to select the little icon on the left of the store text and change it to an array instead of a store.

I found it useful to create simple model with two fields id, name and then use this model on all static stores (which I use for comboboxes) where list of values is predefined.

You do not need to set a model in a store in any situation in Extjs. Set the fields property of the store.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.AbstractStore-cfg-fields
Also, consider the data property of the store for local data.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Store-property-data

Related

ExtJS Grid column with dataIndex from referenced model

I have an ExtJS gridanel with a viewmodel store bound to it. The model of that store is a defined model with a field that references another model.
For the sake of simplicity here's an example:
Ext.define('User', {
extend: 'Ext.data.Model',
fields: ['name']
});
Ext.define('Order', {
extend: 'Ext.data.Model',
fields: ['date', {
name: 'user',
reference: 'User'
}]
});
viewmodel: {
store: {
order: {
model: 'Order',
}
}
}
In my gridpanel I have 2 columns. In one column, dataIndex: 'date' works correctly, displaying the date. However, in my second column I want to display the name of the user. I have no idea how to do that. The user field itself is on object so declaring dataIndex: user doesn't work. I tried dataIndex: {user.name} but that doesn't work either. I even tried
bind: {
data: '{user.name}'
}
also to no avail. I have found a solution using renderer config of the column but it is really ugly and beats the point of having a model reference another if I have to manually traverse the data structure for the appropriate field.
TL;DR
I'm looking for a way to declare a column's dataIndex to be a field from a reference model.

Using Id and itemId in Extjs to access components

In ExtJs Best practices I gone through not to use Id for accessing Ext Components rather use ItemId, I am very new in accessing components using ItemID, does any one can help me in default syntax or the way to access components.
Also on click of yes in a message box I need to disable some components in masked page, whether this can be achieved with the help of ItemID? Please explain.
I feel when using ItemiD it may return array of elements/components, so if need to get an exact component I need to iterate again. I have this ques too....
Basic difference between id and itemId is
When you use an id for a component, there must be a single instance of this component, If you create another instance that has the same id, you will have problems as the DOM is confused.
when you use itemId, it should be unique only within the component's immediate container.the component's container maintains a list of children ids.
so the best practice is to use itemId instead of id
now How to access?
if you use id
Ext.getCmp('id')
or
document.getElementById('id')
or
Ext.ComponentQuery.query("#id")[0]
if you use itemId
parentContainer.getComponent('child_itemId'),
refer following example
e.g
var parentContainer= Ext.create('Ext.panel.Panel', {
initComponent: function(){
Ext.applyIf(me, {
//childrens
items: [{
xtype:'textfield',
itemId:'text'
},
{
xtype:'panel',
itemId:'childpanel',
items:[
{
xtype:'combobox',
itemId:'combo'
}
]
}]
});
this.callParent(arguments);
},
renderTo:Ext.getBody()
})
in above example
for accessing textfield use
parentContainer.getComponent('text');
for accessing combobox use
parentContainer.getComponent('childpanel').getComponent('combo');
or
Ext.ComponentQuery.query("#combo")[0];
this will return array of item with id combo in page
for these you should use unique itemId so you will get the first item you are searching for
or
parentContainer.queryById('combo');
you can also use Ext.util.MixedCollection
var fields = new Ext.util.MixedCollection();
fields.addAll(parentContianer.query('[isFormField]'));
var Combo = fields.get('combo');
Lets suppose you define Panel like below which have a button. Now to access this button you can use Extjs ComponentQuery api. To uniquely identify my button I can use Ext.ComponentQuery.query('myPanel button[itemId=myButton]')[0]. For more details check http://docs-origin.sencha.com/extjs/4.2.2/#!/api/Ext.ComponentQuery
Ext.define('app.view.panel.MyPanel', {
extend: 'Ext.form.Panel',
alias: 'widget.myPanel',
height: 360,
width: 480,
layout:'fit',
title: 'My Panel',
initComponent: function(){
var me =this;
me.items=[{
xtype:'button',
itemId: 'myButton'
...
}]
this.callParent(arguments);
}
})
You can search and access components by using the
Ext.Component.query and passing along the itemId, refer to following links:-
http://training.figleaf.com/tutorials/senchacomplete/chapter2/lesson5/2.cfm
http://devjs.eu/en/how-to-use-ext-component-query-in-ext-js-4/

Trying to get a basic combo to work in ExtJS

I want to use a very simple combo box in ExtJS, but I was surprised to learn that it seems as though I have to complexify things by using a store.
I have a single array of data :
var states = [
{"name":"Alabama"},
{"name":"Alaska"}
]
I create my model 'State' linking to the 'name' field, and then I create my store linking to the model, and the array of data.
Ext.regModel('State', {
fields: [
{type: 'string', name: 'name'}
]
});
var store1 = Ext.create('Ext.data.Store', {
model: 'State',
data: states
});
Now I create my combo, as a field in my panel :
var f = Ext.create('Ext.form.Panel', {
items: [
{
fieldLabel: 'hi there',
xtype: 'combobox',
name: 'XXXX',
store:store1,
maxLength: 64,
allowBlank: false
}
]
})
Nothing tells me that I am doing anything wrong, but I get an 'Uncaught TypeError: Cannot read property 'indexOf' of undefined ' whenever I try and open the combo.
My fiddle is here :
http://jsfiddle.net/sr61tpmd/1/
Another aside to my question is, what is the simplest way I can present a combobox in ExtjS?
As long as you only want a combo box with same value as displayed, it is entirely possible to define the store as an array.
xtype:'combo',
store:['Alabama','Arkansas',...]
A real extjs store is necessary where your displayed text differs from the value. You can see a working example for this (also using the us states, actually) in the ext docs: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.form.field.ComboBox

customizing sencha yes no combo within a specific panel without affecting parent combo box

I need to customize the yes no combo within a specific panel, local to the panel without affecting the parent yesnocombo box configuration. Is there a way to do this?
I am referring to the form I posted earlier in another thread in the Sencha forums, but no one has answered. The url is:
http://www.sencha.com/forum/showthre...ng-Sencha-form
I tried this:
var myNewStore =[
"", "Yes", "Revoke"];
Ext.define('YesNoCombo',{
extend:'Ext.form.ComboBox',
store:myNewStore,
value:'',
emptyText:'Select...',
labelalign:'left',
labelWidth:550,
inputWidth:80,
allowBlank:true,
listeners:{
select:function(comp,record,index){
if(comp.getVelue() == "" || comp.getVale() ==="&nbsp")
comp.setValue(null);
}
}
});
but this broke the format of the form.
Is there a way to create a local combo with custom variables like this:
var UserForm_BlahBlahBlah=Ext.create('YesNoCombo', {
name:"UserForm_BlahBlahBlah",
fieldLabel:"BlahBlahBlah",
values:" Yes" "Revoke",
});
I tried this but it will not work. But you get the idea- It is just creating a local extension within a specific panel with new values.
Is this possible? Or is there a better way that sencha implements customizing the combo box with out affecting the parent class?
Regards,
umbre gachoong
You can easily extend Ext.form.ComboBox class and create your own combo box class. Then you can use your combobox in forms.
In the exmaple I create custom combobox by using its xtype which I defined by alias: 'widget.yesNoCombo'. You can also create instance of custom combobox by var combo = Ext.create('YesNoCombo');
Ext.define('YesNoCombo',{
alias: 'widget.yesNoCombo',
extend:'Ext.form.ComboBox',
store: ["No", "Yes", "Revoke"],
emptyText:'Select...',
allowBlank:true
});
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
items:[
{
xtype: 'yesNoCombo',
fieldLabel:'Yes No Label',
name: 'combo',
},
{
xtype: 'textfield',
fieldLabel: 'Another field',
name: 'anotherField',
},
]
});
See this fiddle https://fiddle.sencha.com/#fiddle/210

How to get all xtype values from a window

Let's say I have a window which are several combobox's and texfield's. What I want to do, getting all selected and filled values from this window to be able to post server side.
I used to ComponentQuery but only getting specified type of field. Is there any solution to get any kind of xtype values, like combobox, checkbox, textfield etc?
The solution is to use an Ext.form.Panel, it contains functionality to manage groups of fields:
var win = new Ext.window.Window({
layout: 'fit',
items: {
border: false,
xtype: 'form',
items: [] // your fields here
}
});
// Later
console.log(win.down('form').getForm().getValues());

Resources