Ext中的佈局類
主要佈局類有:
- ContainerLayout(容器佈局)
- FitLayout(自適應佈局)
- AccordionLayout(摺疊佈局)
- CardLayout(卡片佈局)
- AnchorLayout(錨點佈局)
- AbsoluteLayout(絕對位置佈局)
- FormLayout(表單佈局)
- ColumnLayouyt(列布局)
- TableLayout(表格佈局)
- BorderLayout(邊框佈局)
- ContainerLayout(容器佈局)
--- 所有佈局類的基類
--- 主要配置項目
配置項
參數類型
說 明
activeItem String/Number 一個對當前活動組件的引用.
activeItem只能在那些一次只能顯示一個items項目的佈局中生效
例如:Accordion, CardLayout, FitLayout - FitLayout自適應佈局
--- 是佈局類的基礎類 - AccordionLayout摺疊佈局
--- 擴展自FitLayout
--- 主要配置項目表
配置項
參數類型
說 明
activeOnTop Boolean 是否保持展開的子面板處於父面板的頂端,
true則交換當前展開面版到頂端,false則保持原來的位置不動animate Boolean 設置是否有動畫效果,默認爲false fill Boolean 設置子面板是否自動調整高度允許面板的剩餘空間,true則充滿,
默認爲truehideCollapseTool Boolean 設置是否隱藏子面板的"展開收縮"按鈕,true表示隱藏,默認爲false
如果設置爲true,則應使titleCollapse配置項也爲truetitleCollapse Boolean 設置是否允許通過單擊子面板的標題來展開或收縮面板,true表示允許,
默認爲true
示例:
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif';
var panel = new Ext.Panel({
layout : 'accordion',
layoutConfig : {
activeOnTop : true,//設置打開的子面板置頂
fill : true,//子面板充滿父面板的剩餘空間
hideCollapseTool: false,//顯示“展開收縮”按鈕
titleCollapse : true,//允許通過點擊子面板的標題來展開或收縮面板
animate:true//使用動畫效果
},
title:'Ext.layout.Accordion佈局示例',
frame:true,//渲染面板
height : 150,
width : 250,
applyTo :'panel',
defaults : {//設置默認屬性
bodyStyle:'background-color:#FFFFFF;padding:15px'//設置面板體的背景色
},
items: [
{
title : '嵌套面板一',
html : '說明一'
},
{
title : '嵌套面板二',
html : '說明二'
}
,
{
title : '嵌套面板三',
html : '說明三'
}
]
})
}); -
AnchorLayout錨點佈局
--- 該佈局時根據容器大小爲其所包含的子面板進行定位的佈局
--- 使用該佈局需要注意配置項的使用:
@ anchor(子容器提供).加入到使用anchor佈局面板的子面板也都支持一個anchor配置項,他是一個包含兩個值的字符串,水平和垂直.
例如:'100% 50%',有效值包括如下3類
--- 百分比(Percentage): 例如:anchor:'100% 50%'
--- 偏移值(Offsets): 任意數值,可以時正數,也可以是負數,
第一項數值表示子面板到父容器有邊緣的偏移量,第二項數值表示子面板到父容器下邊緣的偏移量
例如:'-50 -100'.
--- 參考邊(Sides): 有效值包括'right'(或'r') 和 'bottom'(或'b'), 例如:'r b'.
--- 以上3種值類型可以組合使用, 例如:'-50 75%' - CardLayout卡片式佈局
--- 擴展自FitLayout
--- 該佈局會包含多個子面板任何時候都只有一個子面板處於顯示狀態,這鐘佈局經常用來製作導航和標籤頁.
該佈局的重點方式時setActiveItem方法,它接受一個子面板id或索引做爲參數.CardLayout佈局並沒有提供子面板的導航機制,
需要開發人員自己實現
方法名
說 明
setActiveItem(String/Number item) : void
根據子面板id或索引切換當前顯示的子面板
示例:
Ext.onReady(function(){
var panel = new Ext.Panel({
layout : 'card',
activeItem : 0,//設置默認顯示第一個子面板
title:'Ext.layout.CardLayout佈局示例',
frame:true,//渲染面板
height : 150,
width : 250,
applyTo :'hello',
defaults : {//設置默認屬性
bodyStyle:'background-color:#FFFFFF;padding:15px'//設置面板體的背景色
},
items: [
{
title : '嵌套面板一',
html : '說明一',
id : 'p1'
},
{
title : '嵌套面板二',
html : '說明二',
id : 'p2'
}
,
{
title : '嵌套面板三',
html : '說明三',
id : 'p3'
}
],
buttons:[
{
text : '上一頁',
handler : changePage
},
{
text : '下一頁',
handler : changePage
}
]
})
//切換子面板
function changePage(btn){
var index = Number(panel.layout.activeItem.id.substring(1));
if(btn.text == '上一頁'){
index -= 1;
if(index < 1){
index = 1;
}
}else{
index += 1;
if(index > 3){
index = 3;
}
}
panel.layout.setActiveItem('p'+index);
}
}); - TabPanel頁籤
--- 擴展自Ext.Panel組件,它的每個tab頁都是一個Ext.Panel
--- 主要配置項目表
配置項
參數類型
說 明
activeTab Stirng/
Number設置默認激活的tab頁,參數爲tab頁的id或索引值 animScroll Boolean 設置是否在tab頁滾地哦那個的時候啓動動畫效果,true則使用,默認爲true
該項只在enableTab/scroll=true時生效autoTabSelector
String 用於在dom中自動查找div的樣式選擇器,只有在autoTabs=true時生效,默認值:'div.x-tab' autoTabs Boolean 設置是否在dom中查找樣式類爲'x-tab'的div,並且將其轉換爲tab頁,true則進行查找,默認爲false enableTabScroll Boolean 設置是否在tab標籤總寬度超出可用寬度時自動出現滾動按鈕,true則出現,默認爲false layoutOnTabChange Boolean 設置是否在tab切換時重新對tab頁元素進行佈局 minTabWidth Number tab標籤的最小寬度,默認爲30,只在resizeTabs=true時生效 resizeTabs Boolean 設置是否允許tab標籤自動調整寬度 scrollDuration Float 設置每次股東tab頁執行動畫的時間,單位爲毫秒,默認是.35.該項只有在animScroll=true時生效 scrollIncrement Number 設置每次滾動tab標籤的長度,單位是像素,默認值是100.
該項只有在enableTabScroll:true時生效scrollRepeatInterval Number 設置當tab頁滾動按鈕被持續按下時(即鼠標左鍵連續按下,而不是點擊),執行滾動操作的時間間隔.
單位時毫秒tabMargin Number 以像素爲單位計算的空白空間,計算tab標籤大小和滾動尺寸 tabPosition String tab標籤在面板上的位置,包括'top'和bottom,默認值是'top' tabWidth Number 設置tab頁的初始寬度,默認爲120像素.該項只在resizeTabs=true時生效
Ext中的Ajax
- Ext.Ajax主要配置項及公共屬性表
配置項
參數類型
說 明
listeners Object 包含一個或多個事件處理函數的配置對象 autoAbort Boolean 設置一個新的請求是否終止任何未完成的請求,true則終止,默認爲false defaultHeaders Object 默認的請求頭配置對象,在每次請求中該對象的信息信息將被添加到請求中 disableCaching Boolean true則增加一個cache-buster參數到get請求中,默認爲true extraParams Object 包含請求額外參數的配置對象,在每次請求中該對象的信息將被添加到請求中,
默認爲undefinedmethod String 設置默認的請求方式,有效值包括POST和GET timeout Number 設置請求的超時時間,默認爲300000毫秒 url String 設置請求的服務器url地址,默認爲undefined - Ext.Ajax主要方法
方法名
說 明
abort([Number transactionId]) : void 用於終止任何未完成的Ajax請求
參數說明:transactionId, 表示要終止的傳輸idisLoading([Number transactionId]) ) : Boolean 判斷指定的Ajax請求是否正在運行中
參數說明:transactionId, 表示要判斷的傳輸idrequest([Object optinos]) : Number 向服務器發送一個http請求,參數見下表 serializeForm(String/HTMLElement form):String 串行化一個表單字段到一個編碼後的url中
參數說明:form,form表單id或對應的dom元素 - Ext.Ajax.requesst方法詳解
--- 該方法是客戶端向服務器發送請求的重要方法,下啊將會對該方法的使用進行詳細的講解
--- 調用格式:request([Object optinos]) : Number
--- 參數options:包含請求參數及回調處理,可能屬性包括下表:
參數項
參數類型
說 明
url
String
請求的服務器地址,默認使用Ext.Ajax對象中的url配置的值
paras
Object/
String/
Function包含請求參數的配置對象,或者包含字段名稱和字段值的字符串
(格式:name=username&age=20),或可以返回上訴內容的函數method String 指定http請求方式,有效值包括GET和POST,默認使用Ext.Ajax對象中
的ethod配置項的值callback Function 指定接收到服務器相應後的處理函數,不管成功還是失敗,該函數都將會被調用,
並將如下參數傳遞到回調函數中.
* options : Object 執行請求時的options參數
* success : Boolean true則表示請求成功
* response : Object 包含相應值的XMLHttpRegquest對象success Function 指定請求成功時的回調函數,並將如下兩個參數傳遞到回調函數中
* response : Object 包含相應值的XMLHttpRegquest對象
* options : Object 執行請求時的options參數failure
Function 指定請求失敗時的回調函數,並將如下兩個參數傳遞到回調函數中
* response : Object 包含相應值的XMLHttpRegquest對象
* options : Object 執行請求時的options參數scope Object 執行回調函數的作用域,即回調函數中this指向的對象,默認是瀏覽器的window對象 form Object/
String制定要提交表單的id isUpload Boolean true則設置表單進行文件上傳,默認爲自動檢測. headers Object 設置請求頭 xmlData Object 指定要發送到服務器端的XML文檔, 它將會替代要發送的數據參數,任何參數都將被添加到url中 jsonData Object/
String指定要發送到服務器端的json數據, 它將會替代要發送的數據參數,任何參數都將被添加到url中 disableCaching Boolean true則增加唯一的cache-buster參數到GET請求中 - Ext.Updater基礎
Ext.Updater主要配置項及公共屬性表
Ext組件自定義類化
/**
* @class Ws.WebQQ.UI.AllUserGrid
* @public
* @description 格式化用戶狀態函數
*/
PackageURL.ClassName = Ext.extend(superClass, {
/** >>>>>>>>>>>>>>>>>>>>成員變量區域<<<<<<<<<<<<<<<<<<<< */
/** >>>>>>>>>>>>>>>>>>>>成員變量區域<<<<<<<<<<<<<<<<<<<< */
/** >>>>>>>>>>>>>>>>>>>>構造函數區域<<<<<<<<<<<<<<<<<<<< */
constructor : function(_cfg) {
if (_cfg == null) {
_cfg = {};
}
Ext.apply(this, _cfg);
/** >>>>>>>>>>>>>>>>>>>>初始化成員變量區<<<<<<<<<<<<<<<<<<<< */
/** >>>>>>>>>>>>>>>>>>>>初始化成員變量區<<<<<<<<<<<<<<<<<<<< */
/** >>>>>>>>>>>>>>>>>>>>超類構造函數區域<<<<<<<<<<<<<<<<<<<< */
PackageURL.ClassName.superclass.constructor.call(this, {
// 超類配置項
});
/** >>>>>>>>>>>>>>>>>>>>超類構造函數區域<<<<<<<<<<<<<<<<<<<< */
/** >>>>>>>>>>>>>>>>>>>>定義事件區 <<<<<<<<<<<<<<<<<<<< */
/** >>>>>>>>>>>>>>>>>>>>定義事件區 <<<<<<<<<<<<<<<<<<<< */
}
/** >>>>>>>>>>>>>>>>>>>>構造函數區域<<<<<<<<<<<<<<<<<<<< */
/** >>>>>>>>>>>>>>>>>>>>方法區<<<<<<<<<<<<<<<<<<<< */
/** >>>>>>>>>>>>>>>>>>>>方法區<<<<<<<<<<<<<<<<<<<< */
/** >>>>>>>>>>>>>>>>>>>>事件函數區<<<<<<<<<<<<<<<<<<<< */
/** >>>>>>>>>>>>>>>>>>>>事件函數區<<<<<<<<<<<<<<<<<<<< */
});
/**
*class ChatMsg 類
*
*
*/
Ws.WebQQ.VO.ChatMsg = function(_cfg){
Ext.apply(this ,_cfg);
};
Ext.apply(Ws.WebQQ.VO.ChatMsg.prototype,{
userId:null,
userName:null,
email:null,
password:null,
sex:null,
age:null,
realName:null,
birthday:null,
introduction:null
});