Ext學習筆記11-佈局

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則充滿, 預設為true
  hideCollapseTool	Boolean	設定是否隱藏子皮膚的"展開收縮"按鈕,true表示隱藏,預設為false 如果設定為true,則應使titleCollapse配置項也為true
  titleCollapse	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	包含請求額外引數的配置物件,在每次請求中該物件的資訊將被新增到請求中, 預設為undefined
  method	String	設定預設的請求方式,有效值包括POST和GET
  timeout	Number	設定請求的超時時間,預設為300000毫秒
  url	String	設定請求的伺服器url地址,預設為undefined

  
  
• Ext.Ajax主要方法
  

  方法名	說 明
  abort([Number transactionId]) : void	用於終止任何未完成的Ajax請求 引數說明:transactionId, 表示要終止的傳輸id
  isLoading([Number transactionId]) ) : Boolean	判斷指定的Ajax請求是否正在執行中 引數說明:transactionId, 表示要判斷的傳輸id
  request([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                       
            });