继承关系:Component--->BoxComponent---->Container----->Panel---各种具体Panel
1.MessageBox
2.布局处理Viewport
3.Panel
4.TabPanel
1.MessageBox
Ext.MessageBox.alert("ok");
Ext.Msg.show({
title:'Save Changes?',
msg: 'You are closing a tab that has unsaved changes. Would you like to save your changes?',
//值只能为MessageBox里Public Properties中的Button config
buttons: Ext.Msg.YESNOCANCEL,
//fn为回调
// fn: processResult,
animEl: 'elId',
//值只能为:值只能为MessageBox里Public Properties中的The CSS class
icon: Ext.MessageBox.WARNING
});
2.布局处理Viewport
var viewport = new Ext.Viewport({
id:'desk',
layout:'border',
items:[{region:'north',height:50},{region:'west',width:200},{region:'center'}]
}
);
3.Panel
var panel = new Ext.Panel({
// renderTo:'hello'可以替换掉panel.render("hello");
id:'hello',
title:'panlehell',
width:200,
height:200
});
panel.render("hello");
4.TabPanel
var tabPanel = new Ext.TabPanel({
renderTo:'hello',
activeTab: 0,
width:200,
height:200,
items:[
{title:'hello1',html:'hello1 content!'},//默认是Panel
new Ext.Panel({title:'hello2',html:'hello2 content'}),
new Ext.tree.TreePanel( {title:'树面板',loader:new Ext.tree.TreeLoader(),root:new Ext.tree.AsyncTreeNode( {text:'根节点',children:[ { leaf:true,text:'叶子1' }, { leaf:true,text:'叶子2' } ] } ) } ),
{xtype:'treepanel',title:'树面板',loader:new Ext.tree.TreeLoader(),root:new Ext.tree.AsyncTreeNode( {text:'根节点',children:[ { leaf:true,text:'叶子1' }, { leaf:true,text:'叶子2' } ] } ) }
]
}
);