Extjs組件的介紹---面板Panel
組件的例子：
(function(){
Ext.onReady(function(){
//介紹面板
Ext.create("Ext.panel.Panel",{
renderTo:'pan',//依附於哪裏
title:'面板頭部header',
width:300,
height:200,
html:'面板主區域',
tbar:[{text:'頂部工具欄 topToolbar'}],
bbar:[{text:'底部工具欄 bottonToobar'}]
});
});
})();
效果爲：
當把頂部的工具欄上換爲：
tbar:[{pressed:true,text:'刷新'}]
在面板中加入一個tools工具類，可以增加組件的使用
(function(){
Ext.onReady(function(){
//介紹面板
Ext.create("Ext.panel.Panel",{
renderTo:'pan',//依附於哪裏
title:'hello',
width:300,
height:200,
html:'<h1>hello world</h1>',
tools:[
{id:'save'},
{id:'help',handler:function(){
Ext.Msg.alert('help','pleaseHelpMe!')
}
},
{id:'close'},
],
tbar:[{pressed:true,text:'刷新'}]
});
});
})();
其中我們可以看出我們在？，即在幫助的按鈕上加了一個handler，當點擊幫助的時候，會執行此函數
選項面板 TabPanel---- VeiwPort
VeiwPort是代表整個瀏覽器顯示區域，該對象渲染到頁面的body區域中，並伴隨着瀏覽器顯示區域的大小自動改變，一個頁面中只能有一個ViewPort實例
舉例：
(function(){
Ext.onReady(function(){
Ext.create("Ext.container.Viewport",{
enableTabScroll:true,
layout:'fit',
items:[{
title:'panel',
html:'',
bbar:[
{text:'按鈕1'},
{text:'按鈕2'}
]
}]
});
});
})();
它充滿了整個瀏覽器的頁面，所以它主要應用於程序的主界面，可以通過使用不同的佈局來搭建出不同風格的應用程序界面，在ViewPort上常用的佈局有fit、border等，當然在需要的時候其他佈局也會常用
讓我們開一個視覺的享受吧！
舉例：
(function(){
Ext.onReady(function(){
Ext.create("Ext.container.Viewport",{
enableTabScroll:true,
layout:'border',//佈局
items:[{
title:'面板',
region:'north',
height:50,
html:'<h1>網站後臺管理系統</h1>',
},
{
title:'菜單',
region:'west',
width:200,
collapsible:true,
html:'菜單欄'
},
{
xtype:'tabpanel',
region:'center',
items:[
{title:'面板1'},
{title:'面板2'}
]
}
]
});
});
})();
在面板中加入文本框
舉例：
(function(){
Ext.onReady(function(){
Ext.create("Ext.panel.Panel",{
id:'viewport',
title:'第一個xtype應用程序',
width:200,
height:300,
items:[
{xtype:'textfield',fieldLabel:'用戶名'},
{xtype:'textfield',fieldLabel:'姓名'},
{xtype:'textfield',fieldLabel:'性別'},
{xtype:'datefield',fieldLabel:'圖片'},//效果出不來
{xtype:'button',text:'第一個按鈕'}
],
tbar:[
{xtype:'button',text:'頂部'}
],
bbar:[
{xtype:'button',text:'底部'}
],
tools:[
{id:'help',handler:function(){
Ext.Msg.alert('help','pleaseHelpMe!')
}
},
{id:'refresh',hidden:true,handler:function(){
}
},
{id:'search',handler:function(event, target, owner, tool){
owner.child('#refresh').show();
}
}
],
renderTo:'xt'
});
});
})();