Why is data not showing in Extjs grid

[rbjanaki]

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]

Please repost and paste your code using the 'paste as plain text' button in the advanced editor so it is more readable.