I am using ExtJS (3) and just trying to populate a combobox/drop down using records from the database that are being queried using JSON.
Here is my JSON call:
var projectDropDown = new Ext.data.Store({
autoLoad: true,
url: 'dropdown.json',
storeId: 'projectDropDown',
idProperty: 'ProjectID',
fields: [ 'ProjectID', 'ProjectName' ]
});
And then my combobox code:
{
xtype: 'combo',
id: 'ProjectName',
fieldLabel: 'Project Name',
valueField: 'ProjectID',
displayField: 'ProjectName',
store: projectDropDown,
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select a Project...',
selectOnFocus:true
}
The JSON is returning my data like this:
[
{
"ProjectID":"1",
"ProjectName":"Mike's Test Project"
},
{
"ProjectID":"2",
"ProjectName":"My Second Test Project"
},
{
"ProjectID":"3",
"ProjectName":"My Third Project"
},
{
"ProjectID":"6",
"ProjectName":"More testing from me"
}
]
I think I am close, I just don't see what I am missing to make the connection.
Thanks for any assistance.
The first step I would do would be to output the store (or size of the store or something) to the console to see if the data is getting loaded properly into the store.
My guess would be that you need to enclose your JSON that is returned into some root object. Try giving your store a JSONReader with a root element specified like so:
var projectDropDown = new Ext.data.Store({
autoLoad: true,
url: 'dropdown.json',
storeId: 'projectDropDown',
reader: new Ext.data.JsonReader(
{
root: 'projects'
}),
idProperty: 'ProjectID',
fields: [ 'ProjectID', 'ProjectName' ]
});
Then change the JSON returned to look like this instead
{
"projects" : [
{"ProjectID":"1","ProjectName":"Mike's Test Project"},
{"ProjectID":"2","ProjectName":"My Second Test Project"},
....
]
}
Related
I've got an extjs global store have I have hard coded with fields and data:
Ext.define('Registration.store.SavedSessions',{
extend: 'Ext.data.Store',
storeId: 'savedsessions',
fields:[
"id",
"title",
"dateStart"
],
data: [
{
id: 1,
title: 'test',
dateStart: new Date()
}
]
});
The global store is registered via the Application.js file:
Ext.define('Registration.Application', {
extend: 'Ext.app.Application',
name: 'Registration',
stores: [
'SavedSessions'
],
...
I also have a grid that I'm trying to load the store into:
Ext.define("Registration.view.cart.savedsessions.SavedSessions",{
extend: "Ext.grid.Panel",
xtype: 'savedsessions',
store: Ext.data.StoreManager.lookup('savedsessions'),
columns:[
{
text: 'Date',
dataIndex: 'dateStart'
},
{
text: 'Title',
dataIndex: 'title',
flex: 1
}
]
});
Looking at the docs this all looks correct. The problem I'm running into is that the store doesn't load.
When I open up the javascript console and count the number of records in the grid's store I get 0:
I'm not sure how this can happen at all considering the data is hard coded into the store.
Also, when I grab the store directly from the javascript console I can get the hard coded data:
What am I missing here?
Why use the StoreManager to get the store? Just use the storeId:
store: 'savedsessions',
I'm trying to setup a native style app using sencha touch and phonegap. I'm trying to pull in data from an external XML feed into the model.
In my model (Event.js) I have this:
Ext.regModel('Event', {
fields: [
{name: 'title', type: 'string'}
]
});
In my store (eventsstore.js):
ToolbarDemo.eventstore = new Ext.data.Store({
model: 'Event',
sorters: 'title',
getGroupString : function(record) {
return record.get('title')[0];
},
proxy: {
type: 'ajax',
url: 'http://the-url-to-the-file.xml',
reader: {
type: 'xml',
root: 'events',
record: 'event'
}
},
autoLoad: true
});
And in the view (tried as a list):
ToolbarDemo.views.Eventscard = Ext.extend(Ext.List, {
title: "Events",
iconCls: "search",
store: ToolbarDemo.eventstore,
itemTpl: '{title}',
grouped: true,
indexBar: true,
cardSwitchAnimation: 'slide'
});
Ext.reg('eventscard', ToolbarDemo.views.Eventscard);
And tried as a panel:
ToolbarDemo.views.Eventscard = Ext.extend(Ext.Panel, {
title: "Events",
iconCls: "search",
dockedItems: [{
xtype: 'toolbar',
title: 'Events'
}],
layout: 'fit',
items: [{
xtype: 'list',
store: ToolbarDemo.eventstore,
itemTpl: '{title}',
grouped: true
}],
//This was an experiment, safe to leave out?
initComponent: function() {
//ToolbarDemo.eventstore.load();
ToolbarDemo.views.Eventscard.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('eventscard', ToolbarDemo.views.Eventscard);
Now when I navigate to that card view, the loading overlay/spinner is displayed but that's as far as it goes, the list of items does not appear. Any ideas of what I'm doing wrong?
I am not that much familier with this, I have used like this to display a list.. try this
ToolbarDemo.eventstore.load();
var itemTpl = new Ext.XTemplate('<div id='title'>{title}</div>');
this.eventStoreList = new Ext.List({
id: 'eventStoreList',
store: ToolbarDemo.eventstore,
itemTpl: itemTpl,
height: 370,
indexBar: false
});
this.eventStoreListContainer = new Ext.Container( {
id : 'eventStoreListContainer',
items : [this.eventStoreList]
});
this.items = [this.eventStoreListContainer];
ToolbarDemo.views.Eventscard.superclass.initComponent.apply(this);
Well, I got it working!
I added ToolbarDemo.eventstore.read(); to the end of my store code, saved the XML file locally in the root 'www' folder then using the list method worked fine!
Does any body know why this (calling a remote XML) could be a problem?
EDIT: Turns out that it works fine in the browser like that, but not the iPhone simulator. So now I've set it back to the remote URL and added the URLs to the PhoneGap Whitelist and it works great :)
I am trying to create a multiselect list from json store, which is in this format
[{"photo_id":1,"file_name":"test.JPG","x":123,"y":456},{"photo_id":2,"file_name":"test2.JPG","x":321,"y":765}]
The multiselect list populates the rows but it doesn't show the file_name in the list
var storeVar = new Ext.data.Store({
extend: 'Ext.data.Model',
fields: ['photo_id', 'file_name'],
data: store // contains the json string
});
and here is the multiselect box
Ext.create('Ext.form.Panel', {
bodyPadding: 10,
frame: true,
width: '100%',
items: [
{
anchor: '100%',
displayField: 'file_name',
valueField: 'photo_id',
store: storeVar ,
xtype: 'multiselect',
fieldLabel: 'Select an image',
allowBlank: false
}
]
})
Grigor, you can use Ext.JSON.decode to decode your string in json format:
var storeVar = new Ext.data.Store({
extend: 'Ext.data.Model',
fields: ['photo_id', 'file_name'],
data: Ext.JSON.decode(store) // contains the json
});
Here is demo
You are mixing the creation of the Store with the definition of a model: The line
extend: 'Ext.data.Model'
has no effects on a Store, check examples on documentation docs
I can't comment/edit on questions so I write it in a new answer.
I have a ExtJS (4.0) grid and it works fine. Now I want it to advance it a bit by adding filters to it. I want users to be able to filter items by the status.
I have created the following store:
var status_store = Ext.create('Ext.data.Store', {
model: 'Statuses',
proxy: {
type: 'ajax',
url: '/json/statuses/',
reader: 'json'
}
});
and I can see it loads, /json/statuses/ will return the following json object:
[
{
"name": "OK",
"isActive": true
},
{
"name": "Outdated",
"isActive": true
},
{
"name": "New",
"isActive": true
}
]
Now I define the filters:
var filters = {
ftype: 'filters',
encode: encode,
local: local,
filters: [{
type: 'list',
dataIndex: 'name',
store: 'status_store',
labelField: 'name'
}]
};
and add the filter to my column definition:
{text: 'Status', width: 120, dataIndex: 'status', sortable: true, filterable: true, filter: {type: 'list'}},
What happens is I get the following error when the grid loads:
Uncaught TypeError: Object json has no method 'read' (ext-all-debug.js:25702)
and when I click on the column header for the menu:
Uncaught TypeError: Object status_store has no method 'on' (ListMenu.js:69)
How can I fix this or am I doing something conceptually wrong?
Here is the full quote of my code just in case: http://pastebin.com/SNn6gFJz
Thanks for Diagnosing the problem. The 4.1 fix is this modify ListMenu.js
in the else part of the constructor
replace
me.store.on('load', me.onLoad, me);
with
// add a listener to the store object
var storeObject = Ext.StoreMgr.lookup(me.store);
storeObject.on('load', me.onLoad, me);
me.store = storeObject;
filters: [{
type: 'list',
dataIndex: 'name',
store: 'status_store',
labelField: 'name' ,
options:[a,b]
}]
You also have to give the options in list filters.
I was having a similar problem. I followed the #jd comment on the other answer here but the options menu just said "loading...". I resolved it with a bit of a hack here.
I am trying to populate a grid using a DirectStore. No data appears in the grid although I can see data in Firebug. I even tried to dump the data in a DataView to see if i am maybe messing up in the GridPanel but nothing got displayed there either. Tried using both JSON and XML readers to no avail.
Any idea what might be going on here?
Here is the javascript:
var RecordDef = Ext.data.Record.create([
{name: 'ProgramName'}
]);
var jsonReader = new Ext.data.JsonReader({
root: 'list',
fields: [
{name: 'ProgramName', type: 'string'}
]
});
var xmlReader = new Ext.data.XmlReader({
record: "ProgramName"
}, RecordDef);
var mystore = new Ext.data.DirectStore({
autoLoad: true,
reader: jsonReader,
paramsAsHash: false,
storeId:'mystore',
directFn: DataAction.getProgramNames
});
var grid = new Ext.grid.GridPanel({
renderTo:'grid',
store: mystore,
columns: [
{id:'ProgramName', header: 'ProgramName', sortable: true, dataIndex: 'ProgramName'}
],
stripeRows: true,
autoExpandColumn: 'ProgramName',
fitToFrame: true,
fitContainer: true,
height: 200,
title: 'Coolness',
});
And this is the data I'm getting back as seen in Firebug:
{"result":
"{\"list\":
[{\"ProgramName\":\"Name1\"},
{\"ProgramName\":\"Name2\"},
{\"ProgramName\":\"Name3\"},
{\"ProgramName\":\"Name4\"}]}",
"tid":2,"action":"DataAction","method":"getProgramNames","type":"rpc"}
Your result value is a string, not an object named list that contains an array. It should look like this (note that the double-quotes around the entire "result" value have been removed):
{"result":
{\"list\":
[{\"ProgramName\":\"Name1\"},
{\"ProgramName\":\"Name2\"},
{\"ProgramName\":\"Name3\"},
{\"ProgramName\":\"Name4\"}]},
"tid":2,"action":"DataAction","method":"getProgramNames","type":"rpc"}
With that, you should not need to escape all of your double-quotes either.