Why does this fail with cannot call method 'getProxy' of undefined?
{
name: 'customer_name',
xtype: 'combobox',
fieldLabel: 'Customer',
emptyText: 'ex. Google',
allowBlank: false,
queryMode: 'local',
store: Ext.create('Ext.data.ArrayStore', {
storeId: 'myStore',
fields: ['name'],
data: [ 'google', 'facebook', 'twitter']
}),
displayField: 'name'
}
taken from docs...
It 100% fails at this peice of code.
The problem is likely that you're defining items on the prototype of your object. You shouldn't do that because it means it will be shared by all instances, also it will try to instantiate your store while defining the class, instead of when the class is instantiated.
Instead of
Ext.define('my.Panel', {
items: {
name: 'customer_name',
xtype: 'combobox',
fieldLabel: 'Customer',
emptyText: 'ex. Google',
allowBlank: false,
queryMode: 'local',
store: Ext.create('Ext.data.ArrayStore', {
storeId: 'myStore',
fields: ['name'],
data: [ 'google', 'facebook', 'twitter']
}),
displayField: 'name'
}
});
Do
Ext.define('my.Panel', {
initComponent: function() {
this.items = {
name: 'customer_name',
xtype: 'combobox',
fieldLabel: 'Customer',
emptyText: 'ex. Google',
allowBlank: false,
queryMode: 'local',
store: {
// Let Ext instantiate the store
type: 'array',
// Don't use this, it's an euphemism for a global
storeId: 'myStore',
fields: ['name'],
data: [ 'google', 'facebook', 'twitter']
},
displayField: 'name'
}
});
I think cause it is missing an end quote in 'name
This code works fine
Ext.widget({
name: 'customer_name',
xtype: 'combobox',
fieldLabel: 'Customer',
emptyText: 'ex. Google',
allowBlank: false,
queryMode: 'local',
store: Ext.create('Ext.data.ArrayStore', {
storeId: 'myStore',
fields: ['name'],
data: [ 'google', 'facebook', 'twitter']
}),
displayField: 'name'
})
Related
I have the below combobox set to put some records through API call and then display on the page. I need to submit 2 values when user clicks submit, 1) gmiExchangeCode and 2) gmiFuturesCode. The first value works through this form's field, the gmiFuturesCode doesn't work on updating the hidden form field.
}, {
xtype: 'combo',
autoLoad: true,
hideTrigger: true,
fieldLabel: 'Product',
displayField: 'gmiDescription',
valueField: 'gmiExchangeCode',
submitValue: true,
name: 'exchange',
queryMode: 'remote',
queryParam: 'entry',
typeAhead: true,
minChar: 2,
tpl: new Ext.XTemplate('<tpl for="."><div class="x-boundlist-item" style="border-bottom:1px solid #757575;">{gmiExchangeCode} - {lisaMarket} - {gmiFuturesCode} - {gmiDescription}</div></tpl>'),
store: {
fields: ['text', 'value'],
proxy: {
type: 'ajax',
url: 'API',
reader: {
type: 'json'
}
}
},
listeners: {
select: function (combo, record, index) {
hidden.setValue(record.get('gmiFuturesCode'));
}
}
}, {
xtype: 'hidden',
id: 'futures',
name: 'futures'
}, {
There is nothing called "hidden.setValue()" you have to get the object using the query selector or Ext.getCmp('ObjectID')
Here is a working Example Fiddle
Ext.create('Ext.form.Panel', {
title: 'test',
width: 400,
height: 300,
renderTo: Ext.getBody(),
items: [{
xtype: 'combobox',
reference: 'states',
publishes: 'value',
fieldLabel: 'Select State',
displayField: 'displayField',
anchor: '-15',
store: {
fields: ['valueField', 'displayField'],
data: [
['1', 'MyDisplayValueFor1'],
['2', 'MyDisplayValueFor2'],
['3', 'MyDisplayValueFor3']
]
},
minChars: 0,
queryMode: 'local',
typeAhead: true,
listeners: {
select: function (combo, record, index) {
console.log(record.get('displayField'));
Ext.getCmp('futures').setValue(record.get('displayField'));
Ext.Msg.alert('Alert', 'The hidden Field value from the getter is : ' + Ext.getCmp('futures').getValue());
}
}
}, {
xtype: 'hidden',
id: 'futures',
name: 'futures'
}]
})
Try this
Ext.getCmp('futures').setValue(record.get('gmiFuturesCode'));
I am new to extJS. I have 2 comboboxes which is binded witha common data store.
Below is the store -
comboStore = new Ext.data.JsonStore({
url: 'Getvalues',
root: 'rows',
autoLoad: true,
fields: ['Type', 'TypeDetails']
});
Here Type is a string and TypeDetails is an array list having field Description. A single Type can have multiple Description.
My requirement is, I have to bind one combobox with Type and when ever I select a Type only Description of curresponding Type should be binded with combobox 2.
I have tried -
xtype: 'combo',
id: 'cmbType',
editable: true,
typeAhead: true,
allowBlank: false,
displayField: 'Type',
valueField: 'Type',
hiddenName: 'Type',
store: comboStore,
mode: 'local',
triggerAction: 'all',
selectOnFocus: true,
emptyText: 'Select Type'
, listeners: {
select: function (cmb, record, index) {
}
}
xtype: 'combo',
id: 'cmbDesc',
editable: true,
typeAhead: true,
allowBlank: false,
displayField: 'Description',
valueField: 'Description',
hiddenName: 'Description',
store: comboStore,
mode: 'local',
triggerAction: 'all',
selectOnFocus: true,
emptyText: 'Select Type first'
What should I do in combo1 select?
I am using extJS 3.4
You should use extraParams property of Proxy definition! Like below:
/**
* Model Definition
*/
Ext.define('comboModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'Type', type: 'int'},
{name: 'TypeDetails', type: 'string'}
]
});
/**
* Model Definition
*/
Ext.define('descModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'Description', type: 'int'},
{name: 'DescDetails', type: 'string'}
]
});
/**
* JsonStore Deifinition
*
* Here we will define a JsonStore which will interact server.
* The returning value type from server should be json!
* Also, do not forget to specify root and idProperty
*/
var comboStore = new Ext.data.JsonStore({
model : 'comboModel', // you should identify of your model
proxy: {
type: 'ajax',
url: '/path/to/your/server/url',
reader: {
type: 'json',
root: 'rows',
idProperty: 'ROOT_ID
}
}
});
var descriptionStore = new Ext.data.JsonStore({
model: 'descModel',
proxy: {
type: 'ajax',
url: '/path/to/your/server/url',
reader: {
type: 'json',
root: 'descriptions',
idProperty: 'DESC_ID'
}
}
});
xtype: 'combobox',
store: 'comboStore',
valueField: 'Type',
displayField: 'TypeDetails',
listeners: {
select: function(val) {
// here is the important part, we are sending the query string
// param by url, like /?desc=122332
descriptionStore.proxy.extraParams = {'desc': val.getValue()}
descriptionStore.load();
}
}
xtype: 'combobox',
store: 'descriptionStore',
valueField: 'Description',
displayField: 'DescDetails',
Before starting I am sorry with my english.. I don't speak it well ..
So I have a problem with the Combobox in ExtJS4 .. I tried to add a empty line in my combobox list but It's not ok .. i have the list with a empty line but when I trie to select it I can't.. so if someone can help me or have an example please
Ext.require([
'Ext.form.*',
'Ext.data.*',
'Ext.tip.QuickTipManager'
]);
Ext.onReady(function () {
Ext.QuickTips.init();
var form = Ext.create('Ext.form.Panel', {
renderTo: 'docbody',
title: ' ',
autoHeight: true,
width: 600,
bodyPadding: 10,
defaults: {
anchor: '100%',
labelWidth: 100
},
items: [{
xtype: 'fieldcontainer',
combineErrors: true,
msgTarget: 'side',
fieldLabel: ' Name',
items: [{
width: 50,
xtype: 'combo',
mode: 'local',
triggerAction: 'all',
forceSelection: true,
editable: false,
selectOnFocus: true,
name: 'title',
displayField: 'name',
valueField: 'value',
tpl: '<tpl for="."><div class="x-combo-list-item">{name:defaultValue("--")}</div></tpl>',
queryMode: 'local',
store: Ext.create('Ext.data.Store', {
fields: ['name', 'value'],
data: [{
name: 'Mvr',
value: 'mr'
}, {
name: 'Mrs',
value: 'mrs'
}, {
name: 'Miss',
value: 'miss'
}],
listeners: {
'load': function (store, records, options) {
this.insert(0, '--');
}
}
})
}]
}]
});
});
Unless adding a record to your store will break something else in your program logic, I would suggest doing that and getting rid of the template.
Ext.require([
'Ext.form.',
'Ext.data.',
'Ext.tip.QuickTipManager'
]);
Ext.onReady(function() {
Ext.QuickTips.init();
var form = Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
title : ' ',
autoHeight: true,
width : 600,
bodyPadding: 10,
defaults: {
anchor: '100%',
labelWidth: 100
},
items : [
{
xtype : 'fieldcontainer',
combineErrors: true,
msgTarget: 'side',
fieldLabel: ' Name',
items : [
{
width: 50,
xtype: 'combo',
mode: 'local',
triggerAction: 'all',
forceSelection: true,
editable: false,
selectOnFocus : true,
name: 'title',
displayField: 'name',
valueField: 'value',
//tpl: '<tpl for="."><div class="x-combo-list-item">{name:defaultValue("--")}</div></tpl>',
queryMode: 'local',
store: Ext.create('Ext.data.Store', {
fields : ['name', 'value'],
data : [
{name : 'Mr', value: 'mr'},
{name : 'Mrs', value: 'mrs'},
{name : 'Miss', value: 'miss'}
],
listeners :
{
'load' : function (store, records, options) {
store.add({name: '--', value: null});
}}
})
}
]
}
]
});
});
I've a set of 2 combo boxes. One is countries combo and another is states combo. By default the states combo store is empty when I select a country then based on the combo value field States combo has to be filtered/load according to the first combo. In Extjs2.0 this is working whats the changes in Extjs4.
country store
var country_store = Ext.create('Ext.data.Store', {
//autoLoad: true,
fields: ['id','c_id','c_name'],
proxy: {
type: 'ajax',
url: 'country_list.php',
reader: {
type:'json',
root: 'results'
}
},
storeId: 'edu_context_store'
});
State store
var state_name = Ext.create('Ext.data.Store', {
autoLoad: true,
fields: ['id','s_id','s_name','parent_country_id'],
proxy: {
type: 'ajax',
url: 'states_list.php',
reader: {
type:'json',
root: 'results'
}
},
storeId: 'state_name'
});
Combo boxes
{
xtype: 'combo',
id: 'country_combo',
hiddenName: 'country_name',
displayField: 'c_name',
valueField: 'c_id',
fieldLabel: 'Country',
queryMode: 'remote',
allowBlank: false,
triggerAction: 'all',
store: country_store,
width: 450,
selectOnFocus: true,
listeners:{
scope: this,
'select': function(combo, rec, idx){
var country_val = combo.getRawValue();
var states_obj = Ext.getCmp('states_combo');
states_obj.clearValue();
//states_obj.store.load();
states_obj.store.filter('parent_country_id', country_val);
}
}
}, {
xtype: 'combo',
id: 'states_combo',
hiddenName:'state_name',
displayField:'s_name',
valueField:'s_id',
queryMode: 'remote',
fieldLabel: 'State',
cls: 'textlineht',
allowBlank: false,
triggerAction: 'all',
store: states_store,
width: 450
}
Anyone knows how to do that ?
Thanks !
combo.getRawValue() will return the value displayed to the user in the combo - not the underlying id value. Try instead combo.getValue().
I have
{
xtype: 'combo',
id: 'multiplier',
triggerAction: "all",
store: multWaqrranty,
fieldLabel: 'Multiply'
}
And var multWaqrranty = [1, 1.5];
What function should I use in order to reload a new data? Like var multPaid = [0.25, 0.4, 1];
You can load ArrayStore explicity, for example,
var multWaqrranty = new Ext.data.ArrayStore({
// store configs
autoDestroy: true,
// reader configs
fields: [
{name: 'value', type: 'float'}
]
});
{
xtype: 'combo',
id: 'multiplier',
triggerAction: 'all',
store: multWaqrranty,
mode: 'local',
fieldLabel: 'Multiply',
valueField: 'value',
displayField: 'value'
}
// load data
multWaqrranty.loadData([[1,1], [1.5,1.5]],false);
// load new data
multWaqrranty.loadData([[0.25,0.25], [0.4,0.4], [1,1]],false);