PDA

View Full Version : why my ext grid is not rendering



rahulmehta
16 Mar 2011, 11:15 PM
here is my js file dashboard.js

Ext.onReady(function(){
Ext.QuickTips.init(); // **want to know why this is used**

// NOTE: This is an example showing simple state management. During development,
// it is generally best to disable state management as dynamically-generated ids
// can change across page loads, leading to unpredictable results. The developer
// should ensure that stable state ids are set for stateful components in real apps.
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());**want to know why this is used**


// create the data store
var store = new Ext.data.JsonStore({
// store configs
autoDestroy: true,
autoLoad :true,
url: 'api/index.php?_command=getresellers',
storeId: 'getresellers',
// reader configs
root: 'cityarray',
idProperty: 'cityname',
fields: ['cityname', 'totfollowup', 'totcallback', 'totnotintrested', 'totdealsclosed', 'totcallsreceived', 'totcallsentered', 'totresellerregistered',
'countiro', 'irotransferred', 'irodeferred'
]
});


// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{
id :'cityname',
header : 'cityname',
width : 160,
sortable : true,
dataIndex: 'cityname'
}
],
stripeRows: true,
autoExpandColumn: 'company',
height: 350,
width: 600,
title: 'Reseller Dashboard',
// config options for stateful behavior
stateful: true,
stateId: 'grid'
});

// render the grid to the specified div in the page
grid.render('dashboard');
});

I putted some comments where i want to know why this is used .. want to know why this is used Here is my html file

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Reseller DashBoard</title>

<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />

<!-- overrides to base library -->

<!-- ** Javascript ** -->
<!-- ExtJS library: base/adapter -->
<script type="text/javascript" src="lib/ext-base-debug.js"></script>

<!-- ExtJS library: all widgets -->
<script type="text/javascript" src="lib/ext-all-debug.js"></script>

<!-- overrides to base library -->

<!-- page specific -->
<script type="text/javascript" src="lib/dashboard.js"></script>

</head>
<body>

<div id="dashboard">



</div>
</body>
</html> Here is my json which i am also rendering in firebug ..

{
"countothercities": "0",
"directreseller": "14",
"totalresellersregisteredfor8cities": 33,
"cityarray": [{
"cityname": "bangalore",
"totfollowup": "3",
"totcallback": "4",
"totnotintrested": "2",
"totdealsclosed": "0",
"totcallsreceived": "0",
"totcallsentered": "68",
"totresellerregistered": "6",
"countiro": "109",
"irotransferred": "83",
"irodeferred": "26"
}, { Please check .

D@nte
17 Mar 2011, 7:57 PM
This are your problems, and you only defined one column
//autoExpandColumn: 'company',
//Ext.state.Manager.setProvider(new Ext.state.CookieProvider());**want to know why this is used**