X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/c930e9176a5a85509c5b0230e2bff5c22a591432..25ef3491bd9ae007ff1fc2b0d7943e6eaaccf775:/docs/source/basic.html?ds=sidebyside diff --git a/docs/source/basic.html b/docs/source/basic.html deleted file mode 100644 index f47cfe7b..00000000 --- a/docs/source/basic.html +++ /dev/null @@ -1,413 +0,0 @@ - - - The source code - - - - -
//
-// 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: '

Here is some accordion content. Click on one of the other bars below for more.

' - },{ - title: 'Basic Content', - html: '

More content. Open the third panel for a customized look and feel example.

', - 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: '

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.

' - }] -}; - -/* - * ================ 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: '

Width = 50% of the container

' - },{ - title: 'Panel 2', - height: 100, - anchor: '-100', - html: '

Width = container width - 100 pixels

' - },{ - title: 'Panel 3', - anchor: '-10, -262', - html: '

Width = container width - 10 pixels

Height = container height - 262 pixels

' - }] -}; - -/* - * ================ 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: '

Footer content

' - },{ - title: 'Navigation', - region:'west', - floatable: false, - margins: '5 0 0 0', - cmargins: '5 5 0 0', - width: 175, - minSize: 100, - maxSize: 250, - html: '

Secondary content like navigation links could go here

' - },{ - title: 'Main Content', - collapsible: false, - region: 'center', - margins: '5 0 0 0', - html: '

Main Page

This is where the main content would go

' - }] -}; - -/* - * ================ 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: '

Welcome to the Demo Wizard!

Step 1 of 3

Please click the "Next" button to continue...

' - },{ - id: 'card-1', - html: '

Step 2 of 3

Almost there. Please click the "Next" button to continue...

' - },{ - id: 'card-2', - html: '

Congratulations!

Step 3 of 3 - Complete

' - }] -}; - -/* - * ================ 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: '

This is some short content.

' - },{ - title: 'Width = 0.75', - columnWidth: 0.75, - html: '

This is some longer content.

This is some longer content.

This is some longer content.

This is some longer content.

This is some longer content.

This is some longer content.

' - },{ - 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: '

This panel is fit within its container.

', - 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: '

Row spanning.


Row spanning.


Row spanning.


Row spanning.


Row spanning.


Row spanning.

', - rowspan: 3 - },{ - title: 'Basic Table Cell', - html: '

Basic panel in a table cell.

', - cellId: 'basic-cell', - cellCls: 'custom-cls' - },{ - html: '

Plain panel

' - },{ - title: 'Another Cell', - html: '

Row spanning.


Row spanning.


Row spanning.


Row spanning.

', - width: 300, - rowspan: 2 - },{ - html: 'Plain cell spanning two columns', - colspan: 2 - },{ - title: 'More Column Spanning', - html: '

Spanning three columns.

', - colspan: 3 - },{ - title: 'Spanning All Columns', - html: '

Spanning all columns.

', - colspan: 4 - }] -}; - - -/* - * ================ VBoxLayout config ======================= - */ -var vbox = { - id: 'vbox-panel', - title: 'vBox Layout', - layout: { - type: 'vbox', - pack: 'start', - align: 'stretch' - }, - defaults: { - frame: true - }, - items: [{ - title: 'Panel 1', - flex: 1, - html: 'flex : 1' - }, { - title: 'Panel 2', - height: 100, - html: 'height: 100' - }, { - title: 'Panel 3', - flex: 2, - html: 'flex : 2' - }] -}; - -/* - * ================ HBoxLayout config ======================= - */ -var hbox = { - id: 'hbox-panel', - title: 'hBox Layout', - layout: { - type: 'hbox', - pack: 'start', - align: 'stretch' - }, - defaults: { - frame: true - }, - items: [{ - title: 'Panel 1', - flex: 1, - html: 'flex : 1' - }, { - title: 'Panel 2', - width: 100, - html: 'width : 100' - }, { - title: 'Panel 3', - flex: 2, - html: 'flex : 2' - }] -}; -
- - \ No newline at end of file