PDA

View Full Version : Why is data not showing in Extjs grid



rbjanaki
11 Oct 2011, 10:21 AM
I am having trouble populating data in Extjs grid. Here is my code


Js file





Ext.onReady(function(){ Ext.QuickTips.init(); store = new Ext.data.JsonStore({ // store configs autoDestroy: true, url: 'grid-filter.php', remoteSort: false, sortInfo: { field: 'company', direction: 'ASC' }, //storeId: 'myStore', // reader configs //idProperty: 'id', root: 'data', totalProperty: 'total', fields: [{ name: 'id' }, { name: 'price', type: 'float' }, { name: 'company' }, { name: 'size' }, { name: 'visible', type: 'boolean' }] }); var filters = new Ext.ux.grid.GridFilters({ // encode and local configuration options defined previously for easier reuse encode: true, // json encode the filter query local: false, // defaults to false (remote filtering) filters: [{ type: 'numeric', dataIndex: 'id' }, { type: 'string', dataIndex: 'company' }, { type: 'numeric', dataIndex: 'price' }, { type: 'list', dataIndex: 'size', options: ['small', 'medium', 'large', 'extra large'], phpMode: true }, { type: 'boolean', dataIndex: 'visible' }] }); var createColModel = function (finish, start) { var columns = [{ dataIndex: 'id', header: 'Id', // instead of specifying filter config just specify filterable=true // to use store's field's type property (if type property not // explicitly specified in store config it will be 'auto' which // GridFilters will assume to be 'StringFilter' filterable: true, filter: {type: 'numeric'} }, { dataIndex: 'company', header: 'Company', id: 'company', filter: { type: 'string' // specify disabled to disable the filter menu //, disabled: true } }, { dataIndex: 'price', header: 'Price', filter: { type: 'numeric' // specify type here or in store fields config } }, { dataIndex: 'size', header: 'Size', filter: { type: 'list', options: ['small', 'medium', 'large', 'extra large'] //,phpMode: true } }, { dataIndex: 'visible', header: 'Visible', filter: { //type: 'boolean' // specify type here or in store fields config } }]; return new Ext.grid.ColumnModel({ columns: columns.slice(start || 0, finish), defaults: { sortable: true } }); }; var grid = new Ext.grid.GridPanel({ border: false, store: store, colModel: createColModel(5), loadMask: true, plugins: [filters], autoExpandColumn: 'company', listeners: { render: { fn: function(){ store.load({ params: { start: 0, limit: 10 } }); } } }, bbar: new Ext.PagingToolbar({ store: store, pageSize: 10, displayInfo: true, displayMsg: 'Displaying {0} - {1} of {2}', plugins: [filters], items: [ // add some buttons to bottom toolbar just for demonstration purposes '->', { text: 'Clear Filter Data', handler: function () { grid.filters.clearFilters(); } } ] }) }); var win = new Ext.Window({ title: 'ExtJS Grid Filters Example', height: 300, width: 700, layout: 'fit', items: grid }).show(); });

HTML



<html><head> <title>ExtJS Paging Grid</title>
<!-- ** CSS ** --> <!-- ExtJS css --> <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<!-- overrides to base library --> <link rel="stylesheet" type="text/css" href="examples/ux/gridfilters/css/GridFilters.css" /> <link rel="stylesheet" type="text/css" href="examples/ux/gridfilters/css/RangeMenu.css" />
<!-- ** Javascript ** --> <!-- ExtJS library: base/adapter --> <script src="adapter/ext/ext-base.js"></script>
<!-- ExtJS library: all widgets --> <script src="ext-all.js"></script>
<!-- extensions --> <script type="text/javascript" src="examples/ux/gridfilters/menu/ListMenu.js"></script> <script type="text/javascript" src="examples/ux/gridfilters/menu/RangeMenu.js"></script>
<script type="text/javascript" src="examples/ux/gridfilters/GridFilters.js"></script> <script type="text/javascript" src="examples/ux/gridfilters/filter/Filter.js"></script> <script type="text/javascript" src="examples/ux/gridfilters/filter/StringFilter.js"></script> <script type="text/javascript" src="examples/ux/gridfilters/filter/DateFilter.js"></script> <script type="text/javascript" src="examples/ux/gridfilters/filter/ListFilter.js"></script> <script type="text/javascript" src="examples/ux/gridfilters/filter/NumericFilter.js"></script> <script type="text/javascript" src="examples/ux/gridfilters/filter/BooleanFilter.js"></script>

<!-- App js --> <script src="extgrid.js"></script>
</head><body> <div id="ExtJS Grid Filters Example"></div></body></html>



I am getting this error on ext-all.js


Uncaught Typeerror: Cannot read property 'width' undefined

twaindev
11 Oct 2011, 12:34 PM
Please repost and paste your code using the 'paste as plain text' button in the advanced editor so it is more readable.