1. #1
    Sencha User
    Join Date
    Sep 2011
    Vote Rating
    rbjanaki is on a distinguished road


    Default Unanswered: Why is data not showing in Extjs grid

    Unanswered: Why is data not showing in Extjs grid

    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 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
    Ext JS Premium Member twaindev's Avatar
    Join Date
    Sep 2009
    Vote Rating
    twaindev is on a distinguished road



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

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi