sachin sachdeva
25 Apr 2012, 4:01 AM
Hi All
I have a json data with a root element in it Now my problem is i am not able to create a list from it perhaps i have tried every possible exaplr avilable in sencha touch website.
Error--'undefined' is not an object (evaluating 'record.get('name')[0]')
MY JSON IS
{
"ebooks": [
{
"type": "ebook",
"pages": "3",
"name": "10 page to new page",
"id": "1126"
},
{
"type": "ebook",
"pages": "10",
"name": "10 pages",
"id": "1124"
}
],
"total": 2
}
My code For List Is
//<debug>
Ext.Loader.setPath({
'Ext': '../../src'
});
//</debug>
/**
* This simple example shows the ability of the Ext.List component.
*
* In this example, it uses a grouped store to show group headers in the list. It also
* includes an indicator so you can quickly swipe through each of the groups. On top of that
* it has a disclosure button so you can disclose more information for a list item.
*/
//define the application
Ext.application({
//define the startupscreens for tablet and phone, as well as the icon
phoneStartupScreen: 'resources/loading/Homescreen.jpg',
tabletStartupScreen: 'resources/loading/Homescreen~ipad.jpg',
glossOnIcon: false,
icon: {
57: 'resources/icons/icon.png',
72: 'resources/icons/icon@72.png',
114: 'resources/icons/icon@2x.png',
144: 'resources/icons/icon@114.png'
},
//require any components/classes what we will use in our example
requires: [
'Ext.data.Store',
'Ext.List',
'Ext.plugin.PullRefresh'
],
/**
* The launch method is called when the browser is ready, and the application can launch.
*
* Inside our launch method we create the list and show in in the viewport. We get the lists configuration
* using the getListConfiguration method which we defined below.
*
* If the user is not on a phone, we wrap the list inside a panel which is centered on the page.
*/
launch: function() {
//get the configuration for the list
var listConfiguration = this.getListConfiguration();
//if the device is not a phone, we want to create a centered panel and put the list
//into that
if (!Ext.os.is.Phone) {
//use Ext.Viewport.add to add a new component into the viewport
Ext.Viewport.add({
//give it an xtype of panel
xtype: 'panel',
//give it a fixed witdh and height
width: 350,
height: 370,
//make it centered
centered: true,
//make the component modal so there is a mask around the panel
modal: true,
//set hideOnMaskTap to false so the panel does not hide when you tap on the mask
hideOnMaskTap: false,
//give it a layout of fit so the list stretches to the size of this panel
layout: 'fit',
//insert the listConfiguration as an item into this panel
items:
[listConfiguration]
});
} else {
//if we are a phone, simply add the list as an item to the viewport
Ext.Viewport.add(listConfiguration);
}
},
/**
* Returns a configuration object to be used when adding the list to the viewport.
*/
getListConfiguration: function() {
//create a store instance
var store = Ext.create('Ext.data.Store', {
//give the store some fields
fields: ['name', 'id'],
//filter the data using the firstName field
sorters: 'name',
//autoload the data from the server
autoLoad: true,
//setup the grouping functionality to group by the first letter of the firstName field
grouper: {
// I am getting error here-----------------------------------------------------
groupFn: function(record) {
return record.get('name')[0];
}
},
//setup the proxy for the store to use an ajax proxy and give it a url to load
//the local contacts.json file
proxy: {
type: 'ajax',
url: 'js/contacts.json',
root:'ebooks'
}
});
return {
//give it an xtype of list for the list component
xtype: 'list',
//set the itemtpl to show the fields for the store
itemTpl: '<div class="contact2"><strong>{name}</strong></div>',
//enable disclosure icons
disclosure: true,
//group the list
grouped: true,
//enable the indexBar
indexBar: true,
//set the function when a user taps on a disclsoure icon
onItemDisclosure: function(record, item, index, e) {
//show a messagebox alert which shows the persons firstName
e.stopEvent();
Ext.Msg.alert('Disclose', 'Disclose more info for ' + record.get('firstName'));
},
//bind the store to this list
store: store
};
}
});
Please help ASAP
Regards
Sachin Sachdeva
I have a json data with a root element in it Now my problem is i am not able to create a list from it perhaps i have tried every possible exaplr avilable in sencha touch website.
Error--'undefined' is not an object (evaluating 'record.get('name')[0]')
MY JSON IS
{
"ebooks": [
{
"type": "ebook",
"pages": "3",
"name": "10 page to new page",
"id": "1126"
},
{
"type": "ebook",
"pages": "10",
"name": "10 pages",
"id": "1124"
}
],
"total": 2
}
My code For List Is
//<debug>
Ext.Loader.setPath({
'Ext': '../../src'
});
//</debug>
/**
* This simple example shows the ability of the Ext.List component.
*
* In this example, it uses a grouped store to show group headers in the list. It also
* includes an indicator so you can quickly swipe through each of the groups. On top of that
* it has a disclosure button so you can disclose more information for a list item.
*/
//define the application
Ext.application({
//define the startupscreens for tablet and phone, as well as the icon
phoneStartupScreen: 'resources/loading/Homescreen.jpg',
tabletStartupScreen: 'resources/loading/Homescreen~ipad.jpg',
glossOnIcon: false,
icon: {
57: 'resources/icons/icon.png',
72: 'resources/icons/icon@72.png',
114: 'resources/icons/icon@2x.png',
144: 'resources/icons/icon@114.png'
},
//require any components/classes what we will use in our example
requires: [
'Ext.data.Store',
'Ext.List',
'Ext.plugin.PullRefresh'
],
/**
* The launch method is called when the browser is ready, and the application can launch.
*
* Inside our launch method we create the list and show in in the viewport. We get the lists configuration
* using the getListConfiguration method which we defined below.
*
* If the user is not on a phone, we wrap the list inside a panel which is centered on the page.
*/
launch: function() {
//get the configuration for the list
var listConfiguration = this.getListConfiguration();
//if the device is not a phone, we want to create a centered panel and put the list
//into that
if (!Ext.os.is.Phone) {
//use Ext.Viewport.add to add a new component into the viewport
Ext.Viewport.add({
//give it an xtype of panel
xtype: 'panel',
//give it a fixed witdh and height
width: 350,
height: 370,
//make it centered
centered: true,
//make the component modal so there is a mask around the panel
modal: true,
//set hideOnMaskTap to false so the panel does not hide when you tap on the mask
hideOnMaskTap: false,
//give it a layout of fit so the list stretches to the size of this panel
layout: 'fit',
//insert the listConfiguration as an item into this panel
items:
[listConfiguration]
});
} else {
//if we are a phone, simply add the list as an item to the viewport
Ext.Viewport.add(listConfiguration);
}
},
/**
* Returns a configuration object to be used when adding the list to the viewport.
*/
getListConfiguration: function() {
//create a store instance
var store = Ext.create('Ext.data.Store', {
//give the store some fields
fields: ['name', 'id'],
//filter the data using the firstName field
sorters: 'name',
//autoload the data from the server
autoLoad: true,
//setup the grouping functionality to group by the first letter of the firstName field
grouper: {
// I am getting error here-----------------------------------------------------
groupFn: function(record) {
return record.get('name')[0];
}
},
//setup the proxy for the store to use an ajax proxy and give it a url to load
//the local contacts.json file
proxy: {
type: 'ajax',
url: 'js/contacts.json',
root:'ebooks'
}
});
return {
//give it an xtype of list for the list component
xtype: 'list',
//set the itemtpl to show the fields for the store
itemTpl: '<div class="contact2"><strong>{name}</strong></div>',
//enable disclosure icons
disclosure: true,
//group the list
grouped: true,
//enable the indexBar
indexBar: true,
//set the function when a user taps on a disclsoure icon
onItemDisclosure: function(record, item, index, e) {
//show a messagebox alert which shows the persons firstName
e.stopEvent();
Ext.Msg.alert('Disclose', 'Disclose more info for ' + record.get('firstName'));
},
//bind the store to this list
store: store
};
}
});
Please help ASAP
Regards
Sachin Sachdeva