Develop Reference

Populate ExtJS combobox with JSON

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"},
....
]
}

Unable to load store data in EXTJS Simplestore using JavaScript

I am trying to re-load data into the Store which is further used by a GridPanel. My code goes like:
Ext.onReady(function(){
myData = [
['document','listsk','123','','','rat'],
['hiiiii','himself','rest','','','lap']
];
// create the data store
store = new Ext.data.SimpleStore({
fields: [
{name: 'cat'},
{name: 'desc'},
{name: 'edcsId'},
{name: 'transformedEDCSUrl'},
{name: 'transformedFormatsUrl'},
{name: 'lineNotes'}
]
});
store.loadData(myData);
// create the Grid
grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header: "<b>Category</b>", sortable: true, dataIndex: 'cat'},
{header: "<b>Description or Document Title</b>", sortable: true, dataIndex: 'desc'},
{header: "<b>EDCS ID #</b>", sortable: true, renderer: renderEDCSUrl, dataIndex: 'edcsId'}
{header: "<b>URLs to Formats</b>", renderer: renderFormatsUrl},
{id: 'lineNotes', header: "<b>Line Notes</b>", sortable: true, dataIndex: 'lineNotes'}
],
viewConfig: {
forceFit: true
},
autoExpandColumn: 'lineNotes',
stripeRows: true,
collapsible: true
})
reload = function refreshGrid(data){
store.loadData(data);
}
})
The mydata variable as seen by Firebug is:
[
['document','listsk','123','','','rat'],
['hiiiii','himself','rest','','','lap']
]
And the data variable in the javascript function refreshGrid is also same:
[
['document','listsk','123','','','rat'],
['hiiiii','himself','rest','','','lap']
]
I am invoking the function refreshGrid as follow:
function load(response) {
reload(response.substring(response.indexOf('myData') + 9,
response.indexOf('function renderABC') - 2));
}
To me it looks like a JSON parsing issue as data is coming fine from backend. Which is the best way to parse JSON string coming from backend. The behaviour with javascript invcation of store.loadData is that each character in the data variable is treated as separate row in the Grid as shown below:

Looks like you are providing an array of strings to the store instead of array of arrays as it expects.
As a result, store treats each value of an array(string actually) as an array. As soon as strings support referencing by index(at least in non-IE browsers), you get the behavior described.

For all who face this problem, a quick wayout is eval function and otherwise use some library for JSON.

How to load XML into a list using Sencha/Phonegap?

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 :)

ExtJs. Easyest way to show empty grid

I'm using ExtJs 4. I have a grid, but i don't have a store or columns pre defined. I just don't know what grid should be showing. But i still nead to render grid using Json markup.
I want to do something like this:
//grid with empty store and no collumns
{
xtype: 'grid',
columns: [],
store: new ArrayStore([])
}
What is the easyest way to do this?

You can't load create a grid without any columns.. however you can create one without any data (just set store to autoload: false). For example..
{
xtype: 'grid',
//..other config here
store: new Ext.data.JsonStore({
url: 'store/url.php',
autoLoad: false
}),
cm: new Ext.grid.ColumnModel({
columns: [
{ dataIndex: 'id', header: ' ' }
]
})
}

ExtJS grid filters: how can I load 'list' filter options from external json?

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.