Results 1 to 2 of 2

Thread: Why is data not showing in Extjs grid

  1. #1
    Sencha User
    Join Date
    Sep 2011
    Posts
    4

    Default Why is data not showing in Extjs grid

    I am having trouble populating data in Extjs grid. Here is my code


    Js file


    Code:
    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 Code:
    <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

  2. #2
    Sencha Premium User twaindev's Avatar
    Join Date
    Sep 2009
    Posts
    242
    Answers
    16

    Default

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

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •