Ext. panel can store many elements. The most common is the Ext. form. formPanel object, or the borderlayout layout.
Below is a small example I wrote: top-level containers are not viewport but tabpanel
Copy codeThe Code is as follows:
// A normal form
Var frm = new Ext. form. FormPanel ({
DefaultType: 'textfield ',
LabelAlign: 'right ',
Title: 'form1-Center ',
LabelWidth: 50,
Frame: true,
Width: 120,
Height: 200,
Region: 'center ',
Closable: true, // you can disable the from attribute.
Items :[{
FieldLabel: 'text'
}],
Buttons :[{
Text: 'click'
}]
});
// Comrades, please note that region represents a borderlayout layout, which is located in the center.
// Create a grid
// Grid start
Var cm = new Ext. grid. ColumnModel ([
{Header: 'number', dataIndex: 'id '},
{Header: 'name', dataIndex: 'name '},
{Header: 'description', dataIndex: 'desc '}
]);
Var data = [
['1', 'name1', 'scn1 '],
['2', 'name2', 'scn2 '],
['3', 'name3', 'desc3'],
['4', 'name4', 'scn4 '],
['5', 'name5', 'desc5']
];
Var ds = new Ext. data. Store ({
Proxy: new Ext. data. MemoryProxy (data ),
Reader: new Ext. data. ArrayReader ({},[
{Name: 'id '},
{Name: 'name '},
{Name: 'desc '}
])
});
Ds. load ();
Var grid = new Ext. grid. GridPanel ({
Ds: ds,
Cm: cm,
Title: 'center-north ',
Region: 'north ',
Width: 200,
Height: 200
});
// Grid end
// Comrades, please note that region represents a borderlayout layout at the north location.
// Ext. panel can contain other panels
Var fullForm = new Ext. Panel ({
Title: 'lao Tzu is very cool ',
Closable: true,
Border: true,
Layout: 'border', // pay attention to its layout
Items: [grid, frm]
});