I have a normal Combobox in my view, and I want to load the store, but then I get an error in my Firebug:
TypeError: reader.read is not a function
result = reader.read(me.extractResponseData(response));
The part in my view:
{
xtype: 'combobox',
id:'newsletter_template',
fields: ['groupValue','groupText'],
name:'template',
editable:false,
valueField: 'groupValue',
displayField: 'groupText',
allowBlank: false,
fieldLabel: 'Template',
anchor: '100%',
emptyText: 'Choose Template',
store: Ext.create('Ext.data.ArrayStore', {
model: 'news',
controller: 'news',
proxy: {
type: 'ajax',
url: 'bin/news/ajax.php',
reader: {
type: 'json',
root: 'results'
},
extraParams:{
action:'getNewsTemplates'
}
},
callback: function(records, operation, success) {
// do something after the load finishes
},
autoLoad: false
})
}
Has anyone an idea? THANKS A LOT!!!
Try changing store: Ext.create('Ext.data.ArrayStore', {
to store: Ext.create('Ext.data.Store', {
The problem is that you are using an ArrayStore which is basically a regular store with an array reader already defined, then you are defining a json reader in it which doesn't make any sense.
Related
So I have a combobox that is loaded dynamically for a certain view.
Whenever I put the queryMode to remote, it would load the data if I clicked the combobox, but if set to local it won't show any data.
My store will return the requested data properly, it's just it won't show in the combobox.
Am I missing something here?
Hope someone can help me.
This is my controller for the view with the combobox:
Ext.define('Stm.controller.HpUpdate', {
extend: 'Ext.app.Controller',
requires: [
'Stm.view.contents.hpupd.Detail'
],
stores: [
'SiteDomain'
],
fromDetail: false,
isAbort: false,
isDataSeted: false,
firstSorters: undefined,
recordId: undefined,
isUpdate: false,
init: function() {
this.callParent(arguments);
console.log(Ext.getDisplayName(arguments.callee));
this.control({
'hup-list': {
afterRender: this.setupStmList
}
});
this.addRef([{
ref: 'list',
selector: 'hup-list'
},
{
ref: 'detail',
selector: 'hup-detail'
},
]);
},
setupStmList: function() {
console.log(Ext.getDisplayName(arguments.callee));
var me = this;
var store = me.getSiteDomainStore();
var record = Cps.Util.baseRecord();
store.load({
params: param,
callback: function(records, operation, success) {
var response = operation.response;
if (!response || response.length === 0) {
return;
}
var responseText = response.responseText;
if (!responseText || responseText.length === 0) {
return;
}
var res = Ext.decode(responseText);
if (res.common.st === 'mainte' || res.common.st === 'abort') {
return;
}
if (res.common.st === 'ng') {
Cps.Util.alert(res.common.msg);
return;
}
if (records.length === 0) {
return;
}
me.getList().down('#dtAplDateTimeFrom').down('#dateField').focus();
}
});
me.firstSorters = this.getHpUpdateStore().getSorters();
},
});
This is my view:
Ext.define('Stm.view.contents.hpupd.List', {
extend: 'Ext.container.Container',
alias: 'widget.hup-list',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'cps-combobox',
fieldLabel: 'Domain',
itemId: 'cmbSiteDomain',
queryMode: 'local',
store: {
type: 'sitedomain'
},
width: 350,
displayField: 'siteDomain',
valueField: 'siteId',
}],
});
Store:
Ext.define('Stm.store.SiteDomain', {
extend: 'Extends.data.Store',
alias: 'store.sitedomain',
requires: [
'Cps.Setting',
'Stm.model.SiteInfo'
],
model: 'Stm.model.SiteInfo',
pageSize: Stm.Const.controller.dataCountLimit,
proxy: {
type: 'ajax',
url: Cps.Setting.getEntryUrl() + '/stm/st-update/site-domain',
reader: {
type: 'json',
rootProperty: 'data'
},
actionMethods: {
create: 'POST',
read: 'POST',
update: 'POST',
destroy: 'POST'
}
}
});
When you set queryMode to local it means that data will not be loaded from remote source and data should be defined by for example Ext.data.ArrayStore
{
xtype: 'combobox'
queryMode: 'local',
valueField: 'id',
displayField: 'name',
store: new Ext.data.ArrayStore({
fields: ['id', 'name'],
data: [[1, 'item1'], [2, 'item2']]
})
}
If you want to data to be loaded from remote source just once and combo query data locally you should add store items manually
Define your combo like:
{
xtype: 'combobox'
itemId: 'myCombo'
queryMode: 'local',
valueField: 'id',
displayField: 'name',
store: new Ext.data.ArrayStore({
fields: ['id', 'name'],
data: []
})
}
And then add items to the combo like:
Ext.Ajax.request({
url : 'Remote_Source',
success: function(response, opts) {
var json = Ext.decode(response.responseText),
store = me.down("#myCombo").getStore();
Ext.each(json.items, function(item){
store.add(item);
});
}
});
Note: This is sample code you should add your implementation
This is exactly what I am doing. First I build my store by adding items. And then I use the store in my combobox with querymode: local. When I expand the combobox, no items show. When I change querymode to remote, the items show upon expansion, but they are grayed, as the store tries to load data from the server, which fails of course. I have not idea what to do about it. It looks like a bug to me.
I try to use a combobox in my formpanel. This works and the store is loading when you click on the combobox. But when it is loaded it is not showing a background.I try to build and refresh the app but no matter what i do or what theme i use it keeps showing it transparant.
This is my combobox
{
xtype: 'combobox',
name: 'type',
anchor: '100%',
fieldLabel: 'Type',
displayField:'naam',
valueField:'id',
multiSelect: false,
editable: false,
store: 'ProductenGroepComboTypeJsonStore',
listConfig: {
loadingText: null,
loadMask: false
}
}
the store is this
Ext.define('JustRent.store.ProductenGroepComboTypeJsonStore', {
extend: 'Ext.data.Store',
requires: [
'JustRent.model.ProductenGroepComboTypeModel',
'Ext.data.proxy.Ajax',
'Ext.data.reader.Json'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
storeId: 'ProductenGroepComboTypeJsonStore',
model: 'JustRent.model.ProductenGroepComboTypeModel',
proxy: {
type: 'ajax',
url: 'resources/json/productType.php',
reader: {
type: 'json',
rootProperty: 'data'
}
}
}, cfg)]);
}
});
this is how it looks like
I'm not sure if this is ideal for you but you can define the css classes to apply to your list and try to do a workaround that way
listConfig: {
xtype: 'boundlist',
baseCls: 'your-css-list',
maxHeight: 200,
itemCls: 'your-css-list-item'
}
Hope it helps :)
I have a 2 DropDownBoxes, where 1 of the drop box value is depanded on the selected value of the first.
How do i create a dynamic store in the second DropDownBoxes.
This is the code:
{
xtype: 'combobox',
displayField: 'vendor_name',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Choose vendor...',
selectOnFocus:true,
fieldLabel: 'Vendor Name',
margin: 10,
id: 'txtBidVendor',
labelWidth: 100,
store: Ext.create('Ext.data.Store', {
fields:[
{name: 'vendor_name'}
],
proxy: {
type: 'ajax',
timeout: 120000,
url: 'GetVendors.jsp',
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
}
},
autoLoad: true
})
},
{
xtype: 'combobox',
displayField: 'rate_desc',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Choose Quality...',
selectOnFocus:true,
fieldLabel: 'Vendor Quality',
margin: 10,
id: 'txtBidVendorQuality',
labelWidth: 100,
store: Ext.create('Ext.data.Store', {
fields:[
{name: 'rate_desc'}
],
proxy: {
type: 'ajax',
timeout: 120000,
url: 'GetVendorQuality.jsp?' + Ext.urlEncode({'bid_vendor': Ext.getCmp('txtBidVendor').value}),
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
}
},
autoLoad: true
})
},
I get the error: "Cannot read property 'value' of undefined " ,in the line where i try getting "Ext.getCmp('txtBidVendor').value"
About what you are trying to accomplish here I have two considerations:
The error here is that you are trying to access to the txtBidVendor component at definition time (it doesn't exists), when you send a configuration object (like these two comboboxes here) you are not actually creating them, but just setting the initial configuration that will be used by its parent for later instantiation.
What I think you are trying to do is to change the query parameter value for the store, when the selection changes on txtBidVendor combobox. To accomplish that, you must listen for the selection event of the first combobox and then modify and reload the store of the second one. Something like this:
{
xtype: 'combobox',
displayField: 'vendor_name',>
emptyText: 'Choose vendor...',
selectOnFocus: true,
fieldLabel: 'Vendor Name',
id: 'txtBidVendor',
store: vendorStore,
listeners: {
select: function (combo, records, eOpts) {
var record = records[0]; // just want the first selected item
rateStore.getProxy().extraParams.bid_vendor = record.get('vendor_name');
alert('Store will load now with bid_vendor =' + record.get('vendor_name'));
rateStore.load();
}
}
}
For sake of readability it will be good idea to take store definition out of the components definition itself also. Here you can find a working sample of it.
Hope it helps.
I am using Extjs 4.1, tried to load data for Combobox, but doesn't work. I have strong doubt about hte json reader root / record.
the data model and store are defined ,
Ext.define('tagModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'string'},
{name: 'name', type: 'string'}
]
});
var tagStore = new Ext.data.Store({
model: 'tagModel',
proxy: {
type: 'ajax',
url: '/ExtjsWebApp/webresources/question/loadTags',
reader: {
type: 'json',
record : 'rtnList'
}
},
listeners: {
load: function(store, records, options){
alert("success " +records.length);
}
},
autoLoad: true
});
the ComboBox is defined as this,
{
itemId: 'search_tag_fld',
fieldLabel: 'Tag',
xtype: 'combobox',
displayField: 'name',
valueField: 'id',
store: tagStore,
queryMode: 'remote',
multiSelect: true,
anchor: '100%',
labelHeight: 300
}
I am sure that the restful webservice will return data as this
{"rtnList":[{"id":1,"name":"Java","active":"true"},{"id":2,"name":"J2EE","active":"true"},{"id":3,"name":"JMS","active":"true"},{"id":4,"name":"Design","active":"true"},{"id":5,"name":"SOA","active":"true"}],"successMsg":"success","errorMsg":"","time":"09/21/2013 18:34:55","sessionId":null,"userId":null}
In your reader, change "record" to "root". Here's a fiddle that shows that your current setup will work just fine: https://fiddle.sencha.com/#fiddle/km
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'
}),