-/*\r
- * Ext JS Library 2.2.1\r
- * Copyright(c) 2006-2009, Ext JS, LLC.\r
- * licensing@extjs.com\r
- * \r
- * http://extjs.com/license\r
- */\r
-\r
-//\r
-// Note that these are all defined as panel configs, rather than instantiated \r
-// as panel objects. You could just as easily do this instead:\r
-//\r
-// var absolute = new Ext.Panel({ ... });\r
-//\r
-// However, by passing configs into the main container instead of objects, we can defer \r
-// layout AND object instantiation until absolutely needed. Since most of these panels\r
-// won't be shown by default until requested, this will save us some processing \r
-// time up front when initially rendering the page.\r
-//\r
-// Since all of these configs are being added into a layout container, they are\r
-// automatically assumed to be panel configs, and so the xtype of 'panel' is\r
-// implicit. To define a config of some other type of component to be added into\r
-// the layout, simply provide the appropriate xtype config explicitly.\r
-//\r
-/*\r
- * ================ Start page config =======================\r
- */\r
-// The default start page, also a simple example of a FitLayout.\r
-var start = {\r
- id: 'start-panel',\r
- title: 'Start Page',\r
- layout: 'fit',\r
- bodyStyle: 'padding:25px',\r
- contentEl: 'start-div' // pull existing content from the page\r
-};\r
-\r
-/*\r
- * ================ AnbsoluteLayout config =======================\r
- */\r
-var absolute = {\r
- id: 'absolute-panel',\r
- title: 'Absolute Layout',\r
- layout: 'absolute',\r
- defaults: {\r
- bodyStyle: 'padding:15px;',\r
- width: 200,\r
- height: 100,\r
- frame: true\r
- },\r
- items:[{\r
- title: 'Panel 1',\r
- x: 50,\r
- y: 50,\r
- html: 'Positioned at x:50, y:50'\r
- },{\r
- title: 'Panel 2',\r
- x: 125,\r
- y: 125,\r
- html: 'Positioned at x:125, y:125'\r
- }]\r
-};\r
-\r
-/*\r
- * ================ AccordionLayout config =======================\r
- */\r
-var accordion = {\r
- id:'accordion-panel',\r
- title: 'Accordion Layout',\r
- layout:'accordion',\r
- bodyBorder: false, // useful for accordion containers since the inner panels have borders already\r
- bodyStyle: 'background-color:#DFE8F6', // if all accordion panels are collapsed, this looks better in this layout\r
- defaults: {bodyStyle: 'padding:15px'},\r
- items: [{\r
- title: 'Introduction',\r
- tools: [{id:'gear'},{id:'refresh'}],\r
- html: '<p>Here is some accordion content. Click on one of the other bars below for more.</p>'\r
- },{\r
- title: 'Basic Content',\r
- html: '<br /><p>More content. Open the third panel for a customized look and feel example.</p>',\r
- items: {\r
- xtype: 'button',\r
- text: 'Show Next Panel',\r
- handler: function(){\r
- Ext.getCmp('acc-custom').expand(true);\r
- }\r
- }\r
- },{\r
- id: 'acc-custom',\r
- title: 'Custom Panel Look and Feel',\r
- cls: 'custom-accordion', // look in layout-browser.css to see the CSS rules for this class\r
- html: '<p>Here is an example of how easy it is to completely customize the look and feel of an individual panel simply by adding a CSS class in the config.</p>'\r
- }]\r
-};\r
-\r
-/*\r
- * ================ AnchorLayout config =======================\r
- */\r
-var anchor = {\r
- id:'anchor-panel',\r
- title: 'Anchor Layout',\r
- layout:'anchor',\r
- defaults: {bodyStyle: 'padding:15px'},\r
+/*!
+ * Ext JS Library 3.0.0
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+//
+// Note that these are all defined as panel configs, rather than instantiated
+// as panel objects. You could just as easily do this instead:
+//
+// var absolute = new Ext.Panel({ ... });
+//
+// However, by passing configs into the main container instead of objects, we can defer
+// layout AND object instantiation until absolutely needed. Since most of these panels
+// won't be shown by default until requested, this will save us some processing
+// time up front when initially rendering the page.
+//
+// Since all of these configs are being added into a layout container, they are
+// automatically assumed to be panel configs, and so the xtype of 'panel' is
+// implicit. To define a config of some other type of component to be added into
+// the layout, simply provide the appropriate xtype config explicitly.
+//
+/*
+ * ================ Start page config =======================
+ */
+// The default start page, also a simple example of a FitLayout.
+var start = {
+ id: 'start-panel',
+ title: 'Start Page',
+ layout: 'fit',
+ bodyStyle: 'padding:25px',
+ contentEl: 'start-div' // pull existing content from the page
+};
+
+/*
+ * ================ AbsoluteLayout config =======================
+ */
+var absolute = {
+ id: 'absolute-panel',
+ title: 'Absolute Layout',
+ layout: 'absolute',
+ defaults: {
+ bodyStyle: 'padding:15px;',
+ width: 200,
+ height: 100,
+ frame: true
+ },
+ items:[{
+ title: 'Panel 1',
+ x: 50,
+ y: 50,
+ html: 'Positioned at x:50, y:50'
+ },{
+ title: 'Panel 2',
+ x: 125,
+ y: 125,
+ html: 'Positioned at x:125, y:125'
+ }]
+};
+
+/*
+ * ================ AccordionLayout config =======================
+ */
+var accordion = {
+ id: 'accordion-panel',
+ title: 'Accordion Layout',
+ layout: 'accordion',
+ bodyBorder: false, // useful for accordion containers since the inner panels have borders already
+ bodyStyle: 'background-color:#DFE8F6', // if all accordion panels are collapsed, this looks better in this layout
+ defaults: {bodyStyle: 'padding:15px'},
+ items: [{
+ title: 'Introduction',
+ tools: [{id:'gear'},{id:'refresh'}],
+ html: '<p>Here is some accordion content. Click on one of the other bars below for more.</p>'
+ },{
+ title: 'Basic Content',
+ html: '<br /><p>More content. Open the third panel for a customized look and feel example.</p>',
+ items: {
+ xtype: 'button',
+ text: 'Show Next Panel',
+ handler: function(){
+ Ext.getCmp('acc-custom').expand(true);
+ }
+ }
+ },{
+ id: 'acc-custom',
+ title: 'Custom Panel Look and Feel',
+ cls: 'custom-accordion', // look in layout-browser.css to see the CSS rules for this class
+ html: '<p>Here is an example of how easy it is to completely customize the look and feel of an individual panel simply by adding a CSS class in the config.</p>'
+ }]
+};
+
+/*
+ * ================ AnchorLayout config =======================
+ */
+var anchor = {
+ id:'anchor-panel',
+ title: 'Anchor Layout',
+ layout:'anchor',
+ defaults: {bodyStyle: 'padding:15px'},
+ items: [{
+ title: 'Panel 1',
+ height: 100,
+ anchor: '50%',
+ html: '<p>Width = 50% of the container</p>'
+ },{
+ title: 'Panel 2',
+ height: 100,
+ anchor: '-100',
+ html: '<p>Width = container width - 100 pixels</p>'
+ },{
+ title: 'Panel 3',
+ anchor: '-10, -262',
+ html: '<p>Width = container width - 10 pixels</p><p>Height = container height - 262 pixels</p>'
+ }]
+};
+
+/*
+ * ================ BorderLayout config =======================
+ */
+var border = {
+ id:'border-panel',
+ title: 'Border Layout',
+ layout: 'border',
+ bodyBorder: false,
+ defaults: {
+ collapsible: true,
+ split: true,
+ animFloat: false,
+ autoHide: false,
+ useSplitTips: true,
+ bodyStyle: 'padding:15px'
+ },
+ items: [{
+ title: 'Footer',
+ region: 'south',
+ height: 150,
+ minSize: 75,
+ maxSize: 250,
+ cmargins: '5 0 0 0',
+ html: '<p>Footer content</p>'
+ },{
+ title: 'Navigation',
+ region:'west',
+ floatable: false,
+ margins: '5 0 0 0',
+ cmargins: '5 5 0 0',
+ width: 175,
+ minSize: 100,
+ maxSize: 250,
+ html: '<p>Secondary content like navigation links could go here</p>'
+ },{
+ title: 'Main Content',
+ collapsible: false,
+ region: 'center',
+ margins: '5 0 0 0',
+ html: '<h1>Main Page</h1><p>This is where the main content would go</p>'
+ }]
+};
+
+/*
+ * ================ CardLayout config (TabPanel) =======================
+ */
+// Note that the TabPanel component uses an internal CardLayout -- it is not
+// something you have to explicitly configure. However, it is still a perfect
+// example of how this layout style can be used in a complex component.
+var cardTabs = {
+ xtype: 'tabpanel',
+ id: 'card-tabs-panel',
+ plain: true, //remove the header border
+ activeItem: 0,
+ defaults: {bodyStyle: 'padding:15px'},
+ items:[{
+ title: 'Tab 1',
+ html: 'This is tab 1 content.'
+ },{
+ title: 'Tab 2',
+ html: 'This is tab 2 content.'
+ },{
+ title: 'Tab 3',
+ html: 'This is tab 3 content.'
+ }]
+};
+
+// This is a fake CardLayout navigation function. A real implementation would
+// likely be more sophisticated, with logic to validate navigation flow. It will
+// be assigned next as the handling function for the buttons in the CardLayout example.
+var cardNav = function(incr){
+ var l = Ext.getCmp('card-wizard-panel').getLayout();
+ var i = l.activeItem.id.split('card-')[1];
+ var next = parseInt(i) + incr;
+ l.setActiveItem(next);
+ Ext.getCmp('card-prev').setDisabled(next==0);
+ Ext.getCmp('card-next').setDisabled(next==2);
+};
+
+/*
+ * ================ CardLayout config (Wizard) =======================
+ */
+var cardWizard = {
+ id:'card-wizard-panel',
+ title: 'Card Layout (Wizard)',
+ layout:'card',
+ activeItem: 0,
+ bodyStyle: 'padding:15px',
+ defaults: {border:false},
+ bbar: ['->', {
+ id: 'card-prev',
+ text: '« Previous',
+ handler: cardNav.createDelegate(this, [-1]),
+ disabled: true
+ },{
+ id: 'card-next',
+ text: 'Next »',
+ handler: cardNav.createDelegate(this, [1])
+ }],
+ items: [{
+ id: 'card-0',
+ html: '<h1>Welcome to the Demo Wizard!</h1><p>Step 1 of 3</p><p>Please click the "Next" button to continue...</p>'
+ },{
+ id: 'card-1',
+ html: '<p>Step 2 of 3</p><p>Almost there. Please click the "Next" button to continue...</p>'
+ },{
+ id: 'card-2',
+ html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'
+ }]
+};
+
+/*
+ * ================ ColumnLayout config =======================
+ */
+var column = {
+ id:'column-panel',
+ title: 'Column Layout',
+ layout: 'column',
+ bodyStyle: 'padding:5px',
+ defaults: {bodyStyle:'padding:15px'},
+ items: [{
+ title: 'Width = 0.25',
+ columnWidth: 0.25,
+ html: '<p>This is some short content.</p>'
+ },{
+ title: 'Width = 0.75',
+ columnWidth: 0.75,
+ html: '<p>This is some longer content.</p><p>This is some longer content.</p><p>This is some longer content.</p><p>This is some longer content.</p><p>This is some longer content.</p><p>This is some longer content.</p>'
+ },{
+ title: 'Width = 250px',
+ width: 250,
+ html: 'Not much here!'
+ }]
+};
+
+/*
+ * ================ FitLayout config =======================
+ */
+var fit = {
+ id: 'fit-panel',
+ title: 'Fit Layout',
+ layout: 'fit',
+ items: {
+ title: 'Inner Panel',
+ html: '<p>This panel is fit within its container.</p>',
+ bodyStyle: 'margin:15px',
+ border: false
+ }
+};
+
+/*
+ * ================ FormLayout config =======================
+ */
+// NOTE: While you can create a basic Panel with layout:'form', practically
+// you should usually use a FormPanel to also get its form-specific functionality.
+// Note that the layout config is not required on FormPanels.
+var form = {
+ xtype: 'form', // since we are not using the default 'panel' xtype, we must specify it
+ id: 'form-panel',
+ labelWidth: 75,
+ title: 'Form Layout',
+ bodyStyle: 'padding:15px',
+ width: 350,
+ labelPad: 20,
+ layoutConfig: {
+ labelSeparator: ''
+ },
+ defaults: {
+ width: 230,
+ msgTarget: 'side'
+ },
+ defaultType: 'textfield',
+ items: [{
+ fieldLabel: 'First Name',
+ name: 'first',
+ allowBlank:false
+ },{
+ fieldLabel: 'Last Name',
+ name: 'last'
+ },{
+ fieldLabel: 'Company',
+ name: 'company'
+ },{
+ fieldLabel: 'Email',
+ name: 'email',
+ vtype:'email'
+ }
+ ],
+ buttons: [{text: 'Save'},{text: 'Cancel'}]
+};
+
+/*
+ * ================ TableLayout config =======================
+ */
+var table = {
+ id: 'table-panel',
+ title: 'Table Layout',
+ layout: 'table',
+ layoutConfig: {
+ columns: 4
+ },
+ defaults: {
+ bodyStyle:'padding:15px 20px'
+ },
+ items: [{
+ title: 'Lots of Spanning',
+ html: '<p>Row spanning.</p><br /><p>Row spanning.</p><br /><p>Row spanning.</p><br /><p>Row spanning.</p><br /><p>Row spanning.</p><br /><p>Row spanning.</p>',
+ rowspan: 3
+ },{
+ title: 'Basic Table Cell',
+ html: '<p>Basic panel in a table cell.</p>',
+ cellId: 'basic-cell',
+ cellCls: 'custom-cls'
+ },{
+ html: '<p>Plain panel</p>'
+ },{
+ title: 'Another Cell',
+ html: '<p>Row spanning.</p><br /><p>Row spanning.</p><br /><p>Row spanning.</p><br /><p>Row spanning.</p>',
+ width: 300,
+ rowspan: 2
+ },{
+ html: 'Plain cell spanning two columns',
+ colspan: 2
+ },{
+ title: 'More Column Spanning',
+ html: '<p>Spanning three columns.</p>',
+ colspan: 3
+ },{
+ title: 'Spanning All Columns',
+ html: '<p>Spanning all columns.</p>',
+ colspan: 4
+ }]
+};
+
+
+/*
+ * ================ VBoxLayout config =======================
+ */
+var vbox = {\r
+ id: 'vbox-panel',\r
+ title: 'vBox Layout',\r
+ layout: {\r
+ type: 'vbox',\r
+ pack: 'start',\r
+ align: 'stretch'\r
+ },\r
+ defaults: {\r
+ frame: true\r
+ },\r
items: [{\r
title: 'Panel 1',\r
- height: 100,\r
- anchor: '50%',\r
- html: '<p>Width = 50% of the container</p>'\r
- },{\r
+ flex: 1,\r
+ html: 'flex : 1'\r
+ }, {\r
title: 'Panel 2',\r
height: 100,\r
- anchor: '-100',\r
- html: '<p>Width = container width - 100 pixels</p>'\r
- },{\r
+ html: 'height: 100'\r
+ }, {\r
title: 'Panel 3',\r
- anchor: '-10, -262',\r
- html: '<p>Width = container width - 10 pixels</p><p>Height = container height - 262 pixels</p>'\r
- }]\r
-};\r
-\r
-/*\r
- * ================ BorderLayout config =======================\r
- */\r
-var border = {\r
- id:'border-panel',\r
- title: 'Border Layout',\r
- layout:'border',\r
- bodyBorder: false,\r
- defaults: {\r
- collapsible: true,\r
- split: true,\r
- animFloat: false,\r
- autoHide: false,\r
- useSplitTips: true,\r
- bodyStyle: 'padding:15px'\r
- },\r
- items: [{\r
- title: 'Footer',\r
- region: 'south',\r
- height: 150,\r
- minSize: 75,\r
- maxSize: 250,\r
- cmargins: '5 0 0 0',\r
- html: '<p>Footer content</p>'\r
- },{\r
- title: 'Navigation',\r
- region:'west',\r
- floatable: false,\r
- margins: '5 0 0 0',\r
- cmargins: '5 5 0 0',\r
- width: 175,\r
- minSize: 100,\r
- maxSize: 250,\r
- html: '<p>Secondary content like navigation links could go here</p>'\r
- },{\r
- title: 'Main Content',\r
- collapsible: false,\r
- region:'center',\r
- margins: '5 0 0 0',\r
- html: '<h1>Main Page</h1><p>This is where the main content would go</p>'\r
- }]\r
-};\r
-\r
-/*\r
- * ================ CardLayout config (TabPanel) =======================\r
- */\r
-// Note that the TabPanel component uses an internal CardLayout -- it's not\r
-// something you have to explicitly configure. However, it's still a perfect\r
-// example of how this layout style can be used in a complex component.\r
-var cardTabs = {\r
- xtype: 'tabpanel',\r
- id: 'card-tabs-panel',\r
- plain: true, //remove the header border\r
- activeItem: 0,\r
- defaults: {bodyStyle: 'padding:15px'},\r
- items:[{\r
- title: 'Tab 1',\r
- html: 'This is tab 1 content.'\r
- },{\r
- title: 'Tab 2',\r
- html: 'This is tab 2 content.'\r
- },{\r
- title: 'Tab 3',\r
- html: 'This is tab 3 content.'\r
- }]\r
-};\r
-\r
-// This is a fake CardLayout navigation function. A real implementation would\r
-// likely be more sophisticated, with logic to validate navigation flow. It will\r
-// be assigned next as the handling function for the buttons in the CardLayout example.\r
-var cardNav = function(incr){\r
- var l = Ext.getCmp('card-wizard-panel').getLayout();\r
- var i = l.activeItem.id.split('card-')[1];\r
- var next = parseInt(i) + incr;\r
- l.setActiveItem(next);\r
- Ext.getCmp('card-prev').setDisabled(next==0);\r
- Ext.getCmp('card-next').setDisabled(next==2);\r
-};\r
-\r
-/*\r
- * ================ CardLayout config (Wizard) =======================\r
- */\r
-var cardWizard = {\r
- id:'card-wizard-panel',\r
- title: 'Card Layout (Wizard)',\r
- layout:'card',\r
- activeItem: 0,\r
- bodyStyle: 'padding:15px',\r
- defaults: {border:false},\r
- bbar: ['->', {\r
- id: 'card-prev',\r
- text: '« Previous', \r
- handler: cardNav.createDelegate(this, [-1]),\r
- disabled: true\r
- },{\r
- id: 'card-next',\r
- text: 'Next »', \r
- handler: cardNav.createDelegate(this, [1])\r
- }],\r
- items: [{\r
- id: 'card-0',\r
- html: '<h1>Welcome to the Demo Wizard!</h1><p>Step 1 of 3</p><p>Please click the "Next" button to continue...</p>'\r
- },{\r
- id: 'card-1',\r
- html: '<p>Step 2 of 3</p><p>Almost there. Please click the "Next" button to continue...</p>'\r
- },{\r
- id: 'card-2',\r
- html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'\r
+ flex: 2,\r
+ html: 'flex : 2'\r
}]\r
-};\r
-\r
-/*\r
- * ================ ColumnLayout config =======================\r
- */\r
-var column = {\r
- id:'column-panel',\r
- title: 'Column Layout',\r
- layout:'column',\r
- bodyStyle:'padding:5px',\r
- defaults: {bodyStyle:'padding:15px'},\r
- items: [{\r
- title: 'Width = .25',\r
- columnWidth: .25,\r
- html: '<p>This is some short content.</p>'\r
- },{\r
- title: 'Width = .75',\r
- columnWidth: .75,\r
- html: '<p>This is some longer content.</p><p>This is some longer content.</p><p>This is some longer content.</p><p>This is some longer content.</p><p>This is some longer content.</p><p>This is some longer content.</p>'\r
- },{\r
- title: 'Width = 250px',\r
- width: 250,\r
- html: 'Not much here!'\r
- }]\r
-};\r
-\r
-/*\r
- * ================ FitLayout config =======================\r
- */\r
-var fit = {\r
- id:'fit-panel',\r
- title: 'Fit Layout',\r
- layout:'fit',\r
- items: {\r
- title: 'Inner Panel',\r
- html: '<p>This panel is fit within its container.</p>',\r
- bodyStyle: 'margin:15px',\r
- border: false\r
- }\r
-};\r
-\r
-/*\r
- * ================ FormLayout config =======================\r
- */\r
-// NOTE: While you can create a basic Panel with layout:'form', practically\r
-// you should usually use a FormPanel to also get its form-specific functionality.\r
-// Note that the layout config is not required on FormPanels.\r
-var form = {\r
- xtype: 'form', // since we are not using the default 'panel' xtype, we must specify it\r
- id: 'form-panel',\r
- labelWidth: 75,\r
- title: 'Form Layout',\r
- bodyStyle:'padding:15px',\r
- width: 350,\r
- labelPad: 20,\r
- layoutConfig: {\r
- labelSeparator: ''\r
- },\r
+};
+
+/*
+ * ================ HBoxLayout config =======================
+ */
+var hbox = {\r
+ id: 'hbox-panel',\r
+ title: 'hBox Layout',\r
+ layout: {\r
+ type: 'hbox',\r
+ pack: 'start',\r
+ align: 'stretch'\r
+ },\r
defaults: {\r
- width: 230,\r
- msgTarget: 'side'\r
- },\r
- defaultType: 'textfield',\r
- items: [{\r
- fieldLabel: 'First Name',\r
- name: 'first',\r
- allowBlank:false\r
- },{\r
- fieldLabel: 'Last Name',\r
- name: 'last'\r
- },{\r
- fieldLabel: 'Company',\r
- name: 'company'\r
- },{\r
- fieldLabel: 'Email',\r
- name: 'email',\r
- vtype:'email'\r
- }\r
- ],\r
- buttons: [{text: 'Save'},{text: 'Cancel'}]\r
-};\r
-\r
-/*\r
- * ================ TableLayout config =======================\r
- */\r
-var table = {\r
- id:'table-panel',\r
- title: 'Table Layout',\r
- layout:'table',\r
- layoutConfig: {\r
- columns: 4\r
- },\r
- defaults: {\r
- bodyStyle:'padding:15px 20px'\r
- },\r
+ frame: true\r
+ },\r
items: [{\r
- title: 'Lots of Spanning',\r
- html: '<p>Row spanning.</p><br /><p>Row spanning.</p><br /><p>Row spanning.</p><br /><p>Row spanning.</p><br /><p>Row spanning.</p><br /><p>Row spanning.</p>',\r
- rowspan: 3\r
- },{\r
- title: 'Basic Table Cell',\r
- html: '<p>Basic panel in a table cell.</p>',\r
- cellId: 'basic-cell',\r
- cellCls: 'custom-cls'\r
- },{\r
- html: '<p>Plain panel</p>'\r
- },{\r
- title: 'Another Cell',\r
- html: '<p>Row spanning.</p><br /><p>Row spanning.</p><br /><p>Row spanning.</p><br /><p>Row spanning.</p>',\r
- width: 300,\r
- rowspan: 2\r
- },{\r
- html: 'Plain cell spanning two columns',\r
- colspan: 2\r
- },{\r
- title: 'More Column Spanning',\r
- html: '<p>Spanning three columns.</p>',\r
- colspan: 3\r
- },{\r
- title: 'Spanning All Columns',\r
- html: '<p>Spanning all columns.</p>',\r
- colspan: 4\r
- }]\r
-};\r
+ title: 'Panel 1',\r
+ flex: 1,\r
+ html: 'flex : 1'\r
+ }, {\r
+ title: 'Panel 2',\r
+ width: 100,\r
+ html: 'width : 100'\r
+ }, {\r
+ title: 'Panel 3',\r
+ flex: 2,\r
+ html: 'flex : 2'\r
+ }]\r
+};
git.ithinksw.org / extjs.git / blobdiff