Extjs-common layout knowledge

/* // Viewport
Function ()
{
VaR vport = new Ext. viewport (
{
Enabletabscroll: false,
Layout: "fit", // border
Items :[
{Title: "Panel", HTML: "esfsdf ",
Tbar: [{text: "button 1" },{ text: "button 2"}],
Bbar: [{text: "button 1" },{ text: "button 2"}]
}
]
}
);
}*/

/* // Viewport -- window layout
Function ()
{
VaR vport = new Ext. viewport (
{
Enabletabscroll: True,
Layout: "border ",
Items :[
{
Title: "Panel ",
Region: "North", // location
Collapsible: false, // whether to hide
Width: 300,
HTML: "},
{
Title: "Panel ",
Region: "South ",
Collapsible: True,
Width: 300,
HTML: "},
{
Title: "Panel ",
Region: "East ",
Collapsible: True,
Width: 300,
HTML: "},
{
Title: "menu ",
Region: 'west ',
Width: 200,
Collapsible: True,
HTML: 'menu bar'
},
{
Xtype: 'tabpanel ',
Region: 'center ',
Items :[
{Title: 'panel 1 '},
{Title: 'panel 2 '}
]
}
]
}
);
}*/

/* // Layout-perceptual knowledge
Function ()
{
VaR Panel = new Ext. Panel (
{
Renderto: 'paneldiv ',
Width: 400,
Height: 200,
Layout: 'column ', // column: Set the proportion, fit: A single sub-element is automatically filled, border:, form: the original size of sub-elements is automatically arranged, card, table
Items :[
{Columnwidth: 0.5, Title: 'panel 1', height: 100, collapsible: True, HTML: 'aaa '},
{Columnwidth: 0.5, Title: 'panel 2', height: 100, collapsible: True, HTML: 'bbb '},
{Columnwidth: 0.5, Title: 'panel 2', height: 100, collapsible: True, HTML: 'ccc '}
]
}
);
}*/
/* // Layout-border: divide the container into five areas: east, south, west, north, center
Function ()
{
VaR vport = new Ext. viewport (
{
Enabletabscroll: True,
Layout: "border ",
Items :[
{
Title: "top panel ",
Region: "North", // location
Collapsible: false, // whether to hide
Height: 50,
HTML :""
},
{
Title: "bottom panel ",
Region: "South ",
Collapsible: True,
Height: 50,
HTML :""
},
{
Title: "right panel ",
Region: "East ",
Collapsible: True,
Width: 100,
HTML :""
},
{
Title: "left panel ",
Region: 'west ',
Width: 100,
Collapsible: True,
HTML: 'menu bar'
},
{
Xtype: 'tabpanel ',
Region: 'center ',
Items :[
{Title: 'panel 1 '},
{Title: 'panel 2 '}
]
}
]
});
}*/
/* // Layout-column: when the entire container is regarded as a column and sub-elements are placed into the container, you can specify columnwidth or width in the child element to set the column width occupied by the child element,
// Columnwidth: percentage, width: actual size
// It Can Be Used in combination. When used in combination, the proportion indicates the percentage of the remaining part.
Function ()
{
VaR Panel = new Ext. Panel (
{
Renderto: 'paneldiv ',
Title: 'container components ',
Layout: 'column ',
Width: 500,
Height: 100,
Items :[
{Title: 'column 1', width: 100 },
{Title: 'column 1', width: 100 },
{Title: 'column 1', width: 100 },
{Title: 'column 1', width: 100 },
{Title: 'column 1', columnwidth: 1}
]
}
);
}*/
/* // Layout-fit: A sub-element will be filled with the entire container (if multiple sub-elements are filled with only one element)
Function ()
{
VaR Panel = new Ext. Panel (
{
Renderto: 'paneldiv ',
Title: 'container components ',
Layout: 'fit ',
Width: 500,
Height: 100,
Items :[
{Title: 'child element 1 '},
{Title: 'child element 2 '},
{Title: 'child element 3 '},
{Title: 'child element 4 '},
{Title: 'child element 5 '}
]
}
);
}*/
/* // Layout-form: A layout used to manage input fields in a form.
Function ()
{
VaR Panel = new Ext. Panel (// Ext. formpanel is the form layout used in the panel.
{
Renderto: 'paneldiv ',
Title: 'container components ',
Layout: 'form ',
Width: 300,
Height: 200,

Defaulttype: 'textfield', // sets the default type of form fields.
Hidelabels: false, // whether to hide tags in the form
Labelalign: "right", // tag alignment Mode
Items :[
{Fieldlabel: "Enter name", name: 'name '},
{Fieldlabel: "Enter the address", name: 'address '},
{Fieldlabel: "Enter the phone number", name: 'tel '},
{Fieldlabel: "Enter the phone number", name: 'time', xtype: 'datefield '}
]
}
);
}*/
/* // Layout-accordion-foldable layout. Note that layoutconfig is used.
Function ()
{
VaR Panel = new Ext. Panel (// Ext. formpanel is the form layout used in the panel.
{
Renderto: 'paneldiv ',
Title: 'container components ',
Layout: 'accordion ',
Width: 500,
Height: 200,
Layoutconfig: {Animate: false },
Items :[
{Title: 'element 1', HTML :''},
{Title: 'element 2', HTML :''},
{Title: 'element 3', HTML :''},
{Title: 'element 4', HTML :''}
]
}
);
}*/
// Layout-table: layoutconfig: {columns: 3} is used to deploy sub-elements in a common table. // The parent container is divided into three columns.
// Use rowspan or colspan to specify the number of cells that the child element spans.
Function ()
{
VaR Panel = new Ext. Panel (
{
Renderto: 'paneldiv ',
Title: 'container components ',
Layout: 'table ',
Width: 500,
Height: 200,
Layoutconfig: {columns: 3}, // divide the parent container into three columns
Items :[
{Title: 'element 1', HTML: 'sssssssssss', rowspan: 2, height: 100 },
{Title: 'element 2', HTML: 'dfffsddsdfsdf ', colspan: 2 },
{Title: 'element 3', HTML: 'sdfsdfsdf '},
{Title: 'element 4', HTML :''}
]
}
);
}