-/*!
- * Ext JS Library 3.3.1
- * Copyright(c) 2006-2010 Sencha Inc.
- * licensing@sencha.com
- * http://www.sencha.com/license
- */
+Ext.Loader.setConfig({enabled: true});
+
+Ext.Loader.setPath('Ext.ux', '../ux');
+
+Ext.require([
+ 'Ext.tip.QuickTipManager',
+ 'Ext.container.Viewport',
+ 'Ext.layout.*',
+ 'Ext.form.Panel',
+ 'Ext.form.Label',
+ 'Ext.grid.*',
+ 'Ext.data.*',
+ 'Ext.tree.*',
+ 'Ext.selection.*',
+ 'Ext.tab.Panel',
+ 'Ext.ux.layout.Center'
+]);
//
// This is the main layout definition.
//
Ext.onReady(function(){
-
- Ext.QuickTips.init();
-
- // This is an inner body element within the Details panel created to provide a "slide in" effect
- // on the panel body without affecting the body's box itself. This element is created on
- // initial use and cached in this var for subsequent access.
- var detailEl;
-
- // This is the main content center region that will contain each example layout panel.
- // It will be implemented as a CardLayout since it will contain multiple panels with
- // only one being visible at any given time.
- var contentPanel = {
- id: 'content-panel',
- region: 'center', // this is what makes this panel into a region within the containing layout
- layout: 'card',
- margins: '2 5 5 0',
- activeItem: 0,
- border: false,
- items: [
- // from basic.js:
- start, absolute, accordion, anchor, border, cardTabs, cardWizard, column, fit, form, table, vbox, hbox,
- // from custom.js:
- rowLayout, centerLayout,
- // from combination.js:
- absoluteForm, tabsNestedLayouts
- ]
- };
+
+ Ext.tip.QuickTipManager.init();
+
+ // This is an inner body element within the Details panel created to provide a "slide in" effect
+ // on the panel body without affecting the body's box itself. This element is created on
+ // initial use and cached in this var for subsequent access.
+ var detailEl;
+
+ // Gets all layouts examples
+ var layoutExamples = [];
+ Ext.Object.each(getBasicLayouts(), function(name, example) {
+ layoutExamples.push(example);
+ });
+
+ Ext.Object.each(getCombinationLayouts(), function(name, example){
+ layoutExamples.push(example);
+ });
+
+ Ext.Object.each(getCustomLayouts(), function(name, example){
+ layoutExamples.push(example);
+ });
+
+ // This is the main content center region that will contain each example layout panel.
+ // It will be implemented as a CardLayout since it will contain multiple panels with
+ // only one being visible at any given time.
+
+ var contentPanel = {
+ id: 'content-panel',
+ region: 'center', // this is what makes this panel into a region within the containing layout
+ layout: 'card',
+ margins: '2 5 5 0',
+ activeItem: 0,
+ border: false,
+ items: layoutExamples
+ };
+
+ var store = Ext.create('Ext.data.TreeStore', {
+ root: {
+ expanded: true
+ },
+ proxy: {
+ type: 'ajax',
+ url: 'tree-data.json'
+ }
+ });
- // Go ahead and create the TreePanel now so that we can use it below
- var treePanel = new Ext.tree.TreePanel({
- id: 'tree-panel',
- title: 'Sample Layouts',
+ // Go ahead and create the TreePanel now so that we can use it below
+ var treePanel = Ext.create('Ext.tree.Panel', {
+ id: 'tree-panel',
+ title: 'Sample Layouts',
region:'north',
split: true,
- height: 300,
+ height: 360,
minSize: 150,
- autoScroll: true,
-
- // tree-specific configs:
rootVisible: false,
- lines: false,
- singleExpand: true,
- useArrows: true,
-
- loader: new Ext.tree.TreeLoader({
- dataUrl:'tree-data.json'
- }),
-
- root: new Ext.tree.AsyncTreeNode()
+ autoScroll: true,
+ store: store
});
- // Assign the changeLayout function to be called on tree node click.
- treePanel.on('click', function(n){
- var sn = this.selModel.selNode || {}; // selNode is null on initial selection
- if(n.leaf && n.id != sn.id){ // ignore clicks on folders and currently selected node
- Ext.getCmp('content-panel').layout.setActiveItem(n.id + '-panel');
- if(!detailEl){
- var bd = Ext.getCmp('details-panel').body;
- bd.update('').setStyle('background','#fff');
- detailEl = bd.createChild(); //create default empty div
- }
- detailEl.hide().update(Ext.getDom(n.id+'-details').innerHTML).slideIn('l', {stopFx:true,duration:.2});
- }
+ // Assign the changeLayout function to be called on tree node click.
+ treePanel.getSelectionModel().on('select', function(selModel, record) {
+ if (record.get('leaf')) {
+ Ext.getCmp('content-panel').layout.setActiveItem(record.getId() + '-panel');
+ if (!detailEl) {
+ var bd = Ext.getCmp('details-panel').body;
+ bd.update('').setStyle('background','#fff');
+ detailEl = bd.createChild(); //create default empty div
+ }
+ detailEl.hide().update(Ext.getDom(record.getId() + '-details').innerHTML).slideIn('l', {stopAnimation:true,duration: 200});
+ }
});
- // This is the Details panel that contains the description for each example layout.
- var detailsPanel = {
- id: 'details-panel',
+ // This is the Details panel that contains the description for each example layout.
+ var detailsPanel = {
+ id: 'details-panel',
title: 'Details',
region: 'center',
bodyStyle: 'padding-bottom:15px;background:#eee;',
- autoScroll: true,
-
html: '<p class="details-info">When you select a layout from the tree, additional details will display here.</p>'
+ autoScroll: true,
+ html: '<p class="details-info">When you select a layout from the tree, additional details will display here.</p>'
};
-
- // Finally, build the main layout once all the pieces are ready. This is also a good
- // example of putting together a full-screen BorderLayout within a Viewport.
- new Ext.Viewport({
- layout: 'border',
- title: 'Ext Layout Browser',
- items: [{
- xtype: 'box',
- region: 'north',
- applyTo: 'header',
- height: 30
- },{
- layout: 'border',
- id: 'layout-browser',
- region:'west',
- border: false,
- split:true,
- margins: '2 0 5 5',
- width: 275,
- minSize: 100,
- maxSize: 500,
- items: [treePanel, detailsPanel]
- },
- contentPanel
- ],
+
+ // Finally, build the main layout once all the pieces are ready. This is also a good
+ // example of putting together a full-screen BorderLayout within a Viewport.
+ Ext.create('Ext.Viewport', {
+ layout: 'border',
+ title: 'Ext Layout Browser',
+ items: [{
+ xtype: 'box',
+ id: 'header',
+ region: 'north',
+ html: '<h1> Ext.Layout.Browser</h1>',
+ height: 30
+ },{
+ layout: 'border',
+ id: 'layout-browser',
+ region:'west',
+ border: false,
+ split:true,
+ margins: '2 0 5 5',
+ width: 275,
+ minSize: 100,
+ maxSize: 500,
+ items: [treePanel, detailsPanel]
+ },
+ contentPanel
+ ],
renderTo: Ext.getBody()
});
});
git.ithinksw.org / extjs.git / blobdiff