{"id":459,"date":"2012-09-03T23:12:55","date_gmt":"2012-09-03T23:12:55","guid":{"rendered":"http:\/\/garysieling.com\/blog\/?p=459"},"modified":"2012-09-03T23:12:55","modified_gmt":"2012-09-03T23:12:55","slug":"extjs-listview-example","status":"publish","type":"post","link":"https:\/\/www.garysieling.com\/blog\/extjs-listview-example\/","title":{"rendered":"ExtJS ListView Example"},"content":{"rendered":"

Problem<\/strong><\/p>\n

You want to display a grid which lists a series of objects.<\/p>\n

\"\"<\/a><\/p>\n

Solution<\/strong><\/p>\n

Use a GridPanel (aka ListView):<\/p>\n

Ext.require([\n    'Ext.grid.*',\n    'Ext.data.*',\n    'Ext.util.*',\n    'Ext.state.*'\n]);\n\nExt.onReady(function() {\n    var trackStore = new Ext.data.Store({\n        storeId: 'soundCloudStore',\n\n        proxy: {\n            type: 'ajax',\n            url: 'blues.json',\n            reader: {\n                type: 'json',\n                idProperty: 'id'\n            }\n        },\n        fields:['duration', 'genre', 'created_at', 'kind', 'title', 'id']\n    });\n\n    trackStore.load(\n        function() { \n            Ext.create('Ext.grid.Panel', {\n                title: 'Tracks',\n                store: trackStore,\n                columns: [\n                    { header: 'Title', dataIndex: 'title' },\n                    { header: 'Duration',  dataIndex: 'duration' },\n                    { header: 'Genre', dataIndex: 'genre' },\n                    { header: 'Created At', dataIndex: 'created_at' },\n                    { header: 'Kind', dataIndex: 'kind' }\n                ],\n                height: 400,\n                width: 550,\n                renderTo: Ext.getBody()\n         });\n    });\n});<\/pre>\n
Discussion<\/strong><\/p>\n
Most of the Ext examples for rendering grids show how to do it with static data – this is rarely what you want. This example loads JSON data copied from a call to an API outside our control, SoundCloud. Retrieving data across domains may require additional configuration.<\/p>\n
It’s important to set the “id” property in the proxy configuration, as Ext grids use this to uniquely identify rows.<\/p>\n
Make sure to initialize the page inside Ext.onReady and include the necessary script and CSS files (e.g. ext-all-debug.js and ext-all.css).<\/p>\n
ext-all.css is in resources\\css of the Ext distribution zip file. Ext-all-debug.js is in the root of the distribution.<\/p>\n
This must be run from a web server to work – the JSON requests will not work if the originating page is a file:\/\/ URL.<\/p>\n
GridPanel is the Ext4.0 name, and ListView is the 3.x name.<\/p>\n","protected":false},"excerpt":{"rendered":"
Problem You want to display a grid which lists a series of objects. Solution Use a GridPanel (aka ListView): Ext.require([ ‘Ext.grid.*’, ‘Ext.data.*’, ‘Ext.util.*’, ‘Ext.state.*’ ]); Ext.onReady(function() { var trackStore = new Ext.data.Store({ storeId: ‘soundCloudStore’, proxy: { type: ‘ajax’, url: ‘blues.json’, reader: { type: ‘json’, idProperty: ‘id’ } }, fields:[‘duration’, ‘genre’, ‘created_at’, ‘kind’, ‘title’, ‘id’] }); … <\/p>\n
Continue reading “ExtJS ListView Example”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"footnotes":""},"categories":[4],"tags":[211,216,218,262,322,341,502],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t