Both Accordion and InfoPanel expose an Application Programming Interface (API) that makes' + ' implementation of custom functions easy.
' + 'The above Search function is one example of that. Try to' + ' type three or more characters in the Find input.
' + '' + '
Markup:
' + '
' + '<div id="ipanel-4"></div>' + '' + '
Code:
' + '
'
+ 'new Ext.ux.InfoPanel(\'ipanel-4\', {\n'
+ ' title:\'4. Container from...\'\n'
+ ' , content:\'This text.\'\n'
+ ' , useShadow:true\n'
+ ' , easingCollapse: \'backIn\'\n'
+ ' , easingExpand: \'backOut\'\n'
+ '});'
+ ''
+ '' + '
Code:
' + ''
+ 'new Ext.ux.InfoPanel({\n'
+ ' title: \'6. Auto-created...\'\n'
+ ' , id: \'ipanel-6\'\n'
+ ' , desktop: \'panels-tab\'\n'
+ ' , draggable: true\n'
+ ' , useShadow: true\n'
+ ' , autoCreate: {\n'
+ ' tag: \'div\'\n'
+ ' , children:[{\n'
+ ' tag: \'div\'\n'
+ ' , cls: \'text-content\'\n'
+ ' , html: \'This text.\'\n'
+ ' }]\n'
+ ' }\n'
+ '});'
+ ''
}]
}
});
var ipanel7 = new Ext.ux.InfoPanel({
title: '7. Auto-created, body from markup'
, id: 'ipanel-7'
, desktop: 'panels-tab'
, bodyEl: 'ipanel-7-body'
, autoCreate: true
, draggable: true
, useShadow: true
, resizable: true
});
if(showGrid) {
var ipanel8 = new Ext.ux.InfoPanel({
id: 'ipanel-8'
, title: '8. Grid in the panel'
, reiszable: true
, collapsed: true
, draggable: true
, resizable: true
, animate: false
, useShadow: true
// , autoScroll: true
, desktop: 'panels-tab'
, autoCreate: {
tag:'div'
, style: 'position:absolute;width:600px;left:244px;top:130px'
, children: [{
tag: 'div'
, style: 'height:300px;overflow:auto'
, id: 'grid-ct'
}]
}
});
// some data yanked off the web
var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'],
['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am']
];
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(myData),
reader: new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
])
});
ds.load();
// example of custom renderer function
function italic(value){
return '' + value + '';
}
// example of custom renderer function
function change(val){
if(val > 0){
return '' + val + '';
}else if(val < 0){
return '' + val + '';
}
return val;
}
// example of custom renderer function
function pctChange(val){
if(val > 0){
return '' + val + '%';
}else if(val < 0){
return '' + val + '%';
}
return val;
}
// the DefaultColumnModel expects this blob to define columns. It can be extended to provide
// custom or reusable ColumnModels
var colModel = new Ext.grid.ColumnModel([
{id:'company',header: "Company", width: 160, sortable: true, locked:false, dataIndex: 'company'},
{header: "Price", width: 75, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
{header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]);
// create the Grid
var grid = new Ext.grid.Grid('grid-ct', {
ds: ds
, cm: colModel
, autoExpandColumn: 'company'
// , enableColumnMove: false
});
// var gridLayout = Ext.BorderLayout.create({
// center: {
// margins:{left:3,top:3,right:3,bottom:3},
// panels: [new Ext.GridPanel(grid)]
// }
// }, 'grid-panel-ct');
// grid.render();
// grid.getSelectionModel().selectFirstRow();
ipanel8.on({
expand: {
scope: grid
, single: true
, fn: function(panel) {
this.render();
this.getSelectionModel().selectFirstRow();
}}
, resize: {
scope: grid
, fn: function() {
Ext.get('grid-ct').fitToParent();
grid.autoSize();
}}
});
} // if(showGrid) end
// var ipanel9 = new Ext.ux.InfoPanel({
// title: '9. Loaded by Ajax on expand'
// , id:'ipanel-9'
// , url: 'panel-content.php'
// , desktop: 'panels-tab'
// , draggable: true
// , resizable: true
// , useShadow: true
//// , loadOnce: true
// , autoCreate: {
// tag: 'div'
// , style: 'position:absolute;width:200px;top:350px;left:20px'
// }
// });
// }}}
// {{{
// add panels to layout
layout.beginUpdate();
// east
layout.add('east', new Ext.ContentPanel('east', {}));
// page header (north)
layout.add('north', new Ext.ContentPanel('north', {}));
// south
layout.add('south', new Ext.ContentPanel('south', "South"));
// center - Introduction
layout.add('center', new Ext.ContentPanel('center-intro', {
title:"Introduction"
, fitContainer:true
, fitToFrame: true
, autoScroll: true
}));
// center - How to
layout.add('center', new Ext.ContentPanel('center-howto', {
title:"Howto"
, fitContainer:true
, fitToFrame: true
, autoScroll: true
}));
// center - Accordions
layout.add('center', new Ext.ContentPanel('center-accordions', {
title:"Accordions"
, fitContainer:true
, fitToFrame: true
, autoScroll: true
}));
// center - Panels
var panelsTab = new Ext.ContentPanel('panels-tab', {
title: 'Panels'
, fitToFrame:true
, fitContainer:true
, autoScroll: true
});
panelsTab.on('resize', ipanel5.moveToViewport, ipanel5);
panelsTab.on('resize', ipanel6.moveToViewport, ipanel6);
panelsTab.on('resize', ipanel7.moveToViewport, ipanel7);
layout.add('center', panelsTab);
// center - Search results iframe
layout.add('center', new Ext.ContentPanel('center-result', {
title:"Result"
, fitToFrame: true
, autoCreate: {
tag: 'iframe'
, id: 'center-result'
, frameborder: 0
}
}));
// accordion in west
layout.add('west', acc);
layout.restoreState();
// {{{
// restore state
// get last selected tab
var tabId = Ext.state.Manager.get("tab");
// event handler that saves currently selected tab
var center = layout.getRegion('center');
center.on('panelactivated', function(region, panel) {
var tabId = panel.el.id;
Ext.state.Manager.set("tab", tabId);
});
// restore selected tab
layout.getRegion('center').showPanel(tabId || 'center-intro');
// restore dock state
acc.restoreState();
// update state of global toolbar buttons
acc.toolbar.items.get('btn-independent').toggle(acc.independent);
acc.toolbar.items.get('btn-undockable').toggle(acc.undockable);
acc.toolbar.items.get('btn-shadow').toggle(acc.useShadow);
// }}}
layout.endUpdate();
// }}}
// {{{
// searching within panel bodies example
var find = acc.toolbar.items.get('find-field');
Ext.fly(find.el).on('keyup', searchPanels, acc, {buffer:150});
function searchPanels(e) {
var re, found;
// ignore special and navigation keys
if(e.isSpecialKey() || e.isNavKeyPress()) {
return;
}
var val = find.el.value;
// ignore if length is 1 or 2
if(val.length < 3 && val.length > 0) {
return;
}
// show all panels collapsed when filter is cleared
else if(0 === val.length) {
this.showAll();
this.collapseAll();
}
// find panels containing the entered text
else {
re = new RegExp('.*' + val + '.*', 'i');
found = false;
this.hideAll();
this.items.each(function(panel) {
if((found && !this.independent) || !panel.docked) {
return;
}
if(panel.body.dom.innerHTML.match(re)) {
panel.show();
panel.expand();
found = true;
}
else {
panel.collapse();
panel.hide();
found = false;
}
}, this);
}
}
// }}}
// adjust east styles
Ext.fly('east').applyStyles({top:'', left:'', position:'static'});
Ext.fly('stumble').insertAfter('west-body');
// remove the loading mask
unmask.defer(100);
}); // end of onReady
// end of file