PDA

View Full Version : ExtJS 4 - Display Grid using remote json store



kayasa
28 Jul 2014, 12:54 AM
I am a newbie with ExtJS 4. I am trying to display a result list which fetches results from a remote store, without much success.

Below is the view file


Ext.define('Crm.view.CompanyList', { extend: 'Ext.grid.Panel',
alias: 'widget.companyList',
store : 'Crm.store.Companies',
title : 'Company List',


initComponent: function(){
this.columns = [ {
text : 'ID',
width : 150,
dataIndex : 'id'
}, {
text : 'LastName',
width : 150,
sortable : false,
hideable : false,
dataIndex : 'lastName'
}, {
text : 'First Name',
width : 150,
sortable : false,
hideable : false,
dataIndex : 'firstName'
}, {
text : 'Street',
flex : 1,
sortable : false,
hideable : false,
dataIndex : 'street'
} ];
this.dockedItems = [ {
xtype : 'pagingtoolbar',
store : 'Companies',
dock : 'bottom',
displayInfo : true
} ];
this.callParent();
}
});


and below is the Model


Ext.define('Crm.model.Company',{
extend : 'Ext.data.Model',
fields : [
{name:'id',type:'string'},
{name:'lastName',type:'string'},
{name:'firstName',type:'string'},
{name:'street',type:'string'}
]
});

This is how the store is defined


Ext.define('Crm.store.Companies', {
extend: 'Ext.data.Store',
requires: 'Crm.model.Company',
model: 'Crm.model.Company',
autoLoad: {start: 0, limit: 5},
pageSize: 5,
remoteSort: true,
sorters: [{
property : 'lastName',
direction: 'asc'
}],
proxy: {
type: 'jsonp',
url : 'http://extjsinaction.com/crud.php?model=Employee&method=READ',
reader: {
type: 'json',
root: 'data',
idProperty : 'id',
// successProperty : 'meta.success',
totalProperty : 'meta.total'
}
}
});

and finally the HTML file which is expected the render the Grid in browser


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css">
<script type="text/javascript" src="http://cdn.sencha.io/ext-4.2.0-gpl/ext-all-dev.js"></script>
<script type="text/javascript" src="Crm/view/CompanyList.js" ></script>
<script type="text/javascript" src="Crm/model/Company.js" ></script>
<script type="text/javascript" src="Crm/store/Companies.js" ></script>


</head>
<body>
<script type="text/javascript" >
Ext.onReady(function() {
Ext.create('Crm.view.CompanyList', {


});
});
</script>
</body>
</html>

When I run this in browser, I can see the attached error in browser console

Can someone please help me resolve this. Thank you.

skirtle
28 Jul 2014, 4:56 PM
Your store config is a mess.

You can configure stores on a component by passing a store instance, a store config or a store id. Here you're passing an id for a store instance that doesn't exist:


store : 'Crm.store.Companies',

Here you're attempting to reference the same store but, again, this cannot work because the store doesn't exist.


store : 'Companies',

You may have copied this code from an MVC application. Stores listed in the stores section of an app will automatically be instantiated and given an id matching the one above.

For now, just create the store inside initComponent:


var store = this.store = Ext.create('Crm.store.Companies');

Then pass the same store to the toolbar:


store: store,

Also, the way you're calling autoLoad is also a bit off. Just pass true.

kayasa
29 Jul 2014, 1:40 AM
Thanks for the corrections.

The error is gone now, however, the result list does not display.

This is how the view looks like now


Ext.define('Crm.view.CompanyList', { extend: 'Ext.grid.Panel',
alias: 'widget.companyList',
store : 'Crm.store.Companies',
title : 'Company List',


initComponent: function(){
this.columns = [ {
text : 'ID',
width : 150,
dataIndex : 'id'
}, {
text : 'LastName',
width : 150,
sortable : false,
hideable : false,
dataIndex : 'lastName'
}, {
text : 'First Name',
width : 150,
sortable : false,
hideable : false,
dataIndex : 'firstName'
}, {
text : 'Street',
flex : 1,
sortable : false,
hideable : false,
dataIndex : 'street'
} ];
this.dockedItems = [ {
xtype : 'pagingtoolbar',
store : store,
dock : 'bottom',
displayInfo : true
} ];
var store = this.store = Ext.create('Crm.store.Companies');
this.callParent();
}
});




and this is how the updated store looks like now


Ext.define('Crm.store.Companies', { extend: 'Ext.data.Store',
requires: 'Crm.model.Company',
model: 'Crm.model.Company',
// autoLoad: {start: 0, limit: 5},
autoLoad: true,
pageSize: 5,
remoteSort: true,
sorters: [{
property : 'lastName',
direction: 'asc'
}],
proxy: {
type: 'jsonp',
url : 'http://extjsinaction.com/crud.php?model=Employee&method=READ',
reader: {
type: 'json',
root: 'data',
idProperty : 'id',
successProperty : 'meta.success',
totalProperty : 'meta.total'
}
}
});

Is there something more that I need to correct?

Thanks again for your help.

skirtle
29 Jul 2014, 8:13 AM
You aren't rendering it anywhere.


Ext.create('Crm.view.CompanyList', {
renderTo: Ext.getBody()
});

You're also trying to assign the variable store to the paging toolbar before you've set its value.

kayasa
30 Jul 2014, 8:58 AM
Thanks again.

I have corrected the variable problem and I am also rendering the grid to a div.

Now, I see a result list but it is empty.


<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css">
<script type="text/javascript" src="http://cdn.sencha.io/ext-4.2.0-gpl/ext-all-dev.js"></script>
<script type="text/javascript" src="Crm/view/CompanyList.js" ></script>
<script type="text/javascript" src="Crm/model/Company.js" ></script>
<script type="text/javascript" src="Crm/store/Companies.js" ></script>


</head>
<body>
<script type="text/javascript" >
Ext.onReady(function() {
Ext.create('Crm.view.CompanyList', {
renderTo: 'grid-example',
height: 50,
width: 150,
title: 'My Grid'
});
});
</script>
Grid -
<div id="grid-example"/>
</body>
</html>

Below is the view


Ext.define('Crm.view.CompanyList', { extend: 'Ext.grid.Panel',
alias: 'widget.companyList',
store : 'Crm.store.Companies',
title : 'Company List',


initComponent: function(){
var store = this.store = Ext.create('Crm.store.Companies');
this.columns = [ {
text : 'ID',
width : 150,
dataIndex : 'id'
}, {
text : 'LastName',
width : 150,
sortable : false,
hideable : false,
dataIndex : 'lastName'
}, {
text : 'First Name',
width : 150,
sortable : false,
hideable : false,
dataIndex : 'firstName'
}, {
text : 'Street',
flex : 1,
sortable : false,
hideable : false,
dataIndex : 'street'
} ];
this.dockedItems = [ {
xtype : 'pagingtoolbar',
store : store,
dock : 'bottom',
displayInfo : true
} ];


this.callParent();
}
});


Is there something that I am still missing?

Thank you.

skirtle
30 Jul 2014, 1:25 PM
You've given it a tiny width and height.

kayasa
30 Jul 2014, 7:58 PM
Thanks a ton Skirtle