+++ /dev/null
-<html>
-<head>
- <title>Debug Console</title>
- <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
- <link rel="stylesheet" type="text/css" href="../../resources/css/debug.css" />
-
- <!-- GC -->
- <!-- LIBS -->
- <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
- <!-- ENDLIBS -->
-
- <script type="text/javascript" src="../../ext-all.js"></script>
- <script type="text/javascript" src="../../src/debug.js"></script>
-
- <style type="text/css">
- html, body {
- font:normal 12px verdana;
- margin:0;
- padding:0;
- border:0 none;
- overflow:hidden;
- height:100%;
- }
- p {
- margin:5px;
- }
- .settings {
- background-image:url(../shared/icons/fam/folder_wrench.png);
- }
- .nav {
- background-image:url(../shared/icons/fam/folder_go.png);
- }
- </style>
- <script type="text/javascript">
- Ext.onReady(function(){
-
- Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
-
-Ext.ns('App');
-
-App.BookStore = function(config) {
- var config = config || {};
- Ext.applyIf(config, {
- 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'
- ])
- });
- // call the superclass's constructor
- App.BookStore.superclass.constructor.call(this, config);
-};
-Ext.extend(App.BookStore, Ext.data.Store);
-
-
-
-App.BookGrid = Ext.extend(Ext.grid.GridPanel, {
- // override
- initComponent : function() {
- Ext.apply(this, {
- // Pass in a column model definition
- // Note that the DetailPageURL was defined in the record definition but is not used
- // here. That is okay.
- columns: [
- {header: "Author", width: 120, dataIndex: 'Author', sortable: true},
- {header: "Title", dataIndex: 'Title', sortable: true},
- {header: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
- {header: "Product Group", dataIndex: 'ProductGroup', sortable: true}
- ],
- sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
- // Note the use of a storeId, this will register thisStore
- // with the StoreMgr and allow us to retrieve it very easily.
- store: new App.BookStore({
- storeId: 'gridBookStore',
- url: 'sheldon.xml'
- }),
- // force the grid to fit the space which is available
- viewConfig: {
- forceFit: true
- }
- });
- // finally call the superclasses implementation
- App.BookGrid.superclass.initComponent.call(this);
- }
-});
-Ext.reg('bookgrid', App.BookGrid);
-
-
-/**
- * App.BookDetail
- * @extends Ext.Panel
- * This is a specialized Panel which is used to show information about
- * a book.
- *
- * This demonstrates adding 2 custom properties (tplMarkup and
- * startingMarkup) to the class. It also overrides the initComponent
- * method and adds a new method called updateDetail.
- *
- * The class will be registered with an xtype of 'bookdetail'
- */
-App.BookDetail = Ext.extend(Ext.Panel, {
- // add tplMarkup as a new property
- tplMarkup: [
- 'Title: <a href="{DetailPageURL}" target="_blank">{Title}</a><br/>',
- 'Author: {Author}<br/>',
- 'Manufacturer: {Manufacturer}<br/>',
- 'Product Group: {ProductGroup}<br/>'
- ],
- // startingMarup as a new property
- startingMarkup: 'Please select a book to see additional details',
- // override initComponent to create and compile the template
- // apply styles to the body of the panel and initialize
- // html to startingMarkup
- initComponent: function() {
- this.tpl = new Ext.Template(this.tplMarkup);
- Ext.apply(this, {
- bodyStyle: {
- background: '#ffffff',
- padding: '7px'
- },
- html: this.startingMarkup
- });
- // call the superclass's initComponent implementation
- App.BookDetail.superclass.initComponent.call(this);
- },
- // add a method which updates the details
- updateDetail: function(data) {
- this.tpl.overwrite(this.body, data);
- }
-});
-// register the App.BookDetail class with an xtype of bookdetail
-Ext.reg('bookdetail', App.BookDetail);
-
-
-/**
- * App.BookMasterDetail
- * @extends Ext.Panel
- *
- * This is a specialized panel which is composed of both a bookgrid
- * and a bookdetail panel. It provides the glue between the two
- * components to allow them to communicate. You could consider this
- * the actual application.
- *
- */
-App.BookMasterDetail = Ext.extend(Ext.Panel, {
- // override initComponent
- initComponent: function() {
- // used applyIf rather than apply so user could
- // override the defaults
- Ext.applyIf(this, {
- frame: true,
- title: 'Book List',
- width: 540,
- height: 400,
- layout: 'border',
- items: [{
- xtype: 'bookgrid',
- itemId: 'gridPanel',
- region: 'north',
- height: 210,
- split: true
- },{
- xtype: 'bookdetail',
- itemId: 'detailPanel',
- region: 'center'
- }]
- })
- // call the superclass's initComponent implementation
- App.BookMasterDetail.superclass.initComponent.call(this);
- },
- // override initEvents
- initEvents: function() {
- // call the superclass's initEvents implementation
- App.BookMasterDetail.superclass.initEvents.call(this);
-
- // now add application specific events
- // notice we use the selectionmodel's rowselect event rather
- // than a click event from the grid to provide key navigation
- // as well as mouse navigation
- var bookGridSm = this.getComponent('gridPanel').getSelectionModel();
- bookGridSm.on('rowselect', this.onRowSelect, this);
- },
- // add a method called onRowSelect
- // This matches the method signature as defined by the 'rowselect'
- // event defined in Ext.grid.RowSelectionModel
- onRowSelect: function(sm, rowIdx, r) {
- // getComponent will retrieve itemId's or id's. Note that itemId's
- // are scoped locally to this instance of a component to avoid
- // conflicts with the ComponentMgr
- var detailPanel = this.getComponent('detailPanel');
- detailPanel.updateDetail(r.data);
- }
-});
-// register an xtype with this class
-Ext.reg('bookmasterdetail', App.BookMasterDetail);
-
-
-// Finally now that we've defined all of our classes we can instantiate
-// an instance of the app and renderTo an existing div called 'binding-example'
-// Note now that classes have encapsulated this behavior we can easily create
-// an instance of this app to be used in many different contexts, you could
-// easily place this application in an Ext.Window for example
- // create an instance of the app
- var bookApp = new App.BookMasterDetail({
- renderTo: 'center2'
- });
- // We can retrieve a reference to the data store
- // via the StoreMgr by its storeId
- Ext.StoreMgr.get('gridBookStore').load();
-
-
-
-
- var viewport = new Ext.Viewport({
- id: 'viewport-component',
- layout:'border',
- items:[
- new Ext.BoxComponent({ // raw
- id:'north-panel',
- region:'north',
- el: 'north',
- height:32
- }),{
- id:'south-panel',
- region:'south',
- contentEl: 'south',
- split:true,
- height: 100,
- minSize: 100,
- maxSize: 200,
- collapsible: true,
- title:'South',
- margins:'0 0 0 0'
- }, {
- id:'east-panel',
- region:'east',
- title: 'East Side',
- collapsible: true,
- split:true,
- width: 225,
- minSize: 175,
- maxSize: 400,
- layout:'fit',
- margins:'0 5 0 0',
- items:
- new Ext.TabPanel({
- border:false,
- activeTab:1,
- tabPosition:'bottom',
- items:[{
- html:'<p>A TabPanel component can be a region.</p>',
- title: 'A Tab',
- autoScroll:true
- },
- new Ext.grid.PropertyGrid({
- id:'propGrid',
- title: 'Property Grid',
- closable: true,
- source: {
- "(name)": "Properties Grid",
- "grouping": false,
- "autoFitColumns": true,
- "productionQuality": false,
- "created": new Date(Date.parse('10/15/2006')),
- "tested": false,
- "version": .01,
- "borderWidth": 1
- }
- })]
- })
- },{
- region:'west',
- id:'west-panel',
- title:'West',
- split:true,
- width: 200,
- minSize: 175,
- maxSize: 400,
- collapsible: true,
- margins:'0 0 0 5',
- layout:'accordion',
- layoutConfig:{
- animate:true
- },
- items: [{
- id:'west-nav',
- contentEl: 'west',
- title:'Navigation',
- border:false,
- iconCls:'nav'
- },{
- id:'west-settings',
- title:'Settings',
- html:'<p>Some settings in here.</p>',
- border:false,
- iconCls:'settings'
- }]
- },
- new Ext.TabPanel({
- id:'center-region',
- region:'center',
- deferredRender:false,
- activeTab:0,
- items:[{
- id:'first-tab',
- contentEl:'center1',
- title: 'Close Me',
- closable:true,
- autoScroll:true
- },{
- id:'second-tab',
- contentEl:'center2',
- title: 'Center Panel',
- autoScroll:true
- }]
- })
- ]
- });
- });
- </script>
-</head>
-<body>
-<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
- <div id="west">
- <p>Hi. I'm the west panel.</p>
- </div>
- <div id="north">
- <p>north - generally for menus, toolbars and/or advertisements</p>
- </div>
- <div id="center2">
- </div>
- <div id="center1">
- <p>Included in ext-all-debug.js is the Ext Debug Console. It offers a limited amount of <a href="http://getfirebug.com">FireBug</a>
- functionality cross browser. The most important feature is the "DOM Inspector" and CSS and DOM attribute editing. In any browser where "console"
- is not already defined, the Ext console will handle console.log(), time() and other calls.
- </p>
- <p>
- <b>Try It</b><br/>
- This page includes ext-all-debug.js and some test markup so you can try it out. Click on the image below to bring up the console.
- </p>
- <a href="#" onclick="Ext.log('Hello from the Ext console. This is logged using the Ext.log function.');return false;"><img src="debug.png" style="margin:15px;"/></a>
-
- <p>
- The full source is available in the "source" directory of the Ext download.
- </p>
- </div>
- <div id="props-panel" style="width:200px;height:200px;overflow:hidden;">
- </div>
- <div id="south">
- <p>south - generally for informational stuff, also could be for status bar</p>
- </div>
-
- </body>
-</html>
git.ithinksw.org / extjs.git / blobdiff