364 lines
12 KiB
HTML
364 lines
12 KiB
HTML
<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>
|