Alien-Web-ExtJS-V3
view release on metacpan or search on metacpan
share/examples/debug/debug-console.html view on Meta::CPAN
<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.
share/examples/debug/debug-console.html view on Meta::CPAN
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>
( run in 1.547 second using v1.01-cache-2.11-cpan-119454b85a5 )