-/*\r
- * Ext JS Library 2.2.1\r
- * Copyright(c) 2006-2009, Ext JS, LLC.\r
- * licensing@extjs.com\r
- * \r
- * http://extjs.com/license\r
- */\r
-\r
-Ext.onReady(function(){\r
- \r
- // create the Data Store\r
- var store = new Ext.data.Store({\r
- // load using HTTP\r
- url: 'sheldon.xml',\r
-\r
- // the return will be XML, so lets set up a reader\r
- reader: new Ext.data.XmlReader({\r
- // records will have an "Item" tag\r
- record: 'Item',\r
- id: 'ASIN',\r
- totalRecords: '@total'\r
- }, [\r
- // set up the fields mapping into the xml doc\r
- // The first needs mapping, the others are very basic\r
- {name: 'Author', mapping: 'ItemAttributes > Author'},\r
- 'Title',\r
- 'Manufacturer',\r
- 'ProductGroup',\r
- // Detail URL is not part of the column model of the grid\r
- 'DetailPageURL'\r
- ])\r
- });\r
-\r
- // create the grid\r
- var grid = new Ext.grid.GridPanel({\r
- store: store,\r
- columns: [\r
- {header: "Author", width: 120, dataIndex: 'Author', sortable: true},\r
- {header: "Title", width: 180, dataIndex: 'Title', sortable: true},\r
- {header: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},\r
- {header: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true}\r
- ],\r
- sm: new Ext.grid.RowSelectionModel({singleSelect: true}),\r
- viewConfig: {\r
- forceFit: true\r
- },\r
- height:210,\r
- split: true,\r
- region: 'north'\r
- });\r
- \r
- // define a template to use for the detail view\r
- var bookTplMarkup = [\r
- 'Title: <a href="{DetailPageURL}" target="_blank">{Title}</a><br/>',\r
- 'Author: {Author}<br/>',\r
- 'Manufacturer: {Manufacturer}<br/>',\r
- 'Product Group: {ProductGroup}<br/>'\r
- ];\r
- var bookTpl = new Ext.Template(bookTplMarkup);\r
-\r
- var ct = new Ext.Panel({\r
- renderTo: 'binding-example',\r
- frame: true,\r
- title: 'Book List',\r
- width: 540,\r
- height: 400,\r
- layout: 'border',\r
- items: [\r
- grid,\r
- {\r
- id: 'detailPanel',\r
- region: 'center',\r
- bodyStyle: {\r
- background: '#ffffff',\r
- padding: '7px'\r
- },\r
- html: 'Please select a book to see additional details.'\r
- }\r
- ]\r
- })\r
- grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {\r
- var detailPanel = Ext.getCmp('detailPanel');\r
- bookTpl.overwrite(detailPanel.body, r.data);\r
- });\r
- store.load();\r
+/*!
+ * Ext JS Library 3.0.0
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+Ext.onReady(function(){
+
+ // create the Data Store
+ var store = new Ext.data.Store({
+ // load using HTTP
+ url: 'sheldon.xml',
+
+ // the return will be XML, so lets set up a reader
+ reader: new Ext.data.XmlReader({
+ // records will have an "Item" tag
+ record: 'Item',
+ id: 'ASIN',
+ totalRecords: '@total'
+ }, [
+ // set up the fields mapping into the xml doc
+ // The first needs mapping, the others are very basic
+ {name: 'Author', mapping: 'ItemAttributes > Author'},
+ 'Title',
+ 'Manufacturer',
+ 'ProductGroup',
+ // Detail URL is not part of the column model of the grid
+ 'DetailPageURL'
+ ])
+ });
+
+ // create the grid
+ var grid = new Ext.grid.GridPanel({
+ store: store,
+ columns: [
+ {header: "Author", width: 120, dataIndex: 'Author', sortable: true},
+ {header: "Title", width: 180, dataIndex: 'Title', sortable: true},
+ {header: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
+ {header: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true}
+ ],
+ sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
+ viewConfig: {
+ forceFit: true
+ },
+ height:210,
+ split: true,
+ region: 'north'
+ });
+
+ // define a template to use for the detail view
+ var bookTplMarkup = [
+ 'Title: <a href="{DetailPageURL}" target="_blank">{Title}</a><br/>',
+ 'Author: {Author}<br/>',
+ 'Manufacturer: {Manufacturer}<br/>',
+ 'Product Group: {ProductGroup}<br/>'
+ ];
+ var bookTpl = new Ext.Template(bookTplMarkup);
+
+ var ct = new Ext.Panel({
+ renderTo: 'binding-example',
+ frame: true,
+ title: 'Book List',
+ width: 540,
+ height: 400,
+ layout: 'border',
+ items: [
+ grid,
+ {
+ id: 'detailPanel',
+ region: 'center',
+ bodyStyle: {
+ background: '#ffffff',
+ padding: '7px'
+ },
+ html: 'Please select a book to see additional details.'
+ }
+ ]
+ })
+ grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {
+ var detailPanel = Ext.getCmp('detailPanel');
+ bookTpl.overwrite(detailPanel.body, r.data);
+ });
+ store.load();
});
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff