Ext學習筆記8-資料模型及工具欄選單欄

19-Ext中的資料模型

ExtJS的資料模型主要包括如下幾個部分:

• • 資料記錄: Record
    • 資料集合中的一個記錄,它存放了資料的定義資訊和他們的值
  • 資料代理: Proxy
    • 獲取解析器,是ExtJS資料模型獲取資料的主要途徑
  • 資料解析器: DataReader
    • 資料解析器,負責將代理Proxy讀取的資料轉換為Record物件並存入Store中
  • 資料集: Store
    • 一個儲存資料記錄(Record)的集合, 它相當於在客戶端存放資料的一張資料表,
      對其中資料的更改會觸發特定的事
      
• Record 資料記錄
  • Ext.data.Record主要配置項及公共屬性表

配置項	引數型別	說 明
data	Object	Record記錄對應的一個hash物件
dirty	Boolean	表示記錄中的資料是否被修改過
id	Object	在建立記錄時產生的唯一表示記錄的id
modified	Object	這個物件用於儲存記錄欄位修改前的名稱和值, 如果欄位沒有被修改過,則為null

• • Ext.data.Record 主要方法表
    

    方法名	說 明
    Record(Array data, [Object id])	記錄物件的建構函式,一般不直接用於建立物件,而使用create方法進行建立, 他們的引數是相同的 引數說明:  data,  包含欄位冥河資料值的陣列.                    id, 這個id應該是唯一的, 如果沒有提供則會自動產生一個整型
    beginEdit() : void	開始編輯, 當處於編輯模式時將沒有事件被轉播到它的資料Store物件中
    cancelEdit() : void	取消當前編輯操作對記錄的所有修改
    commit([Boolean silent]) :void	這個方法通常被擁有記錄的Ext.dataStore進行呼叫, 提交從記錄被建立以來或 最近一個提交以來的所有更改 引數說明: silent, true則不通過Ext.data.Store進行記錄更新,預設為false
    copy([String id]) : Record	複製記錄 引數說明: id, 新記錄的id
    create([Array o]) : function	靜態方法, 用於產生一個特定記錄佈局的記錄建構函式(具體說明看錶格下面)
    endEdit() : void	結束編輯, 如果資料被改變則擁有記錄的Ext.data.Store將得到通知
    get(String name) : Object	得到制定名字的欄位 引數說明: name, 欄位名
    getChanges() : Object	得到自從記錄被建立或最近一次提交更新之後發生更改欄位的hash集合
    reject([Boolean silent]) : void	這個方法通常被擁有記錄的Store進行呼叫,拒絕從記錄被建立或最近一次提交 更新之後發生的所有更改,欄位將被還原到他們的初始值 引數說明: silent ,true則不通過Ext.data.Store進行更新撤銷,預設為false
    set(String name, Object value) : void	這隻記錄中特定名字的欄位值 引數說明: name, 欄位名                   value, 欄位值

    
    

20-Ext中的工具欄

• Ext.Toolbar工具欄常用元素表
  

  工具欄元素名稱	說 明
  Ext.Toolbar.Button	可以加入到工具欄中的按鈕元件
  Ext.Toolbar.Fill	用於充滿工具條的空白元素
  Ext.Toolbar.Item	基類,為其子類提供工具欄的基本功能支援
  Ext.Toolbar.Separator	工具欄分割符
  Ext.Toolbar.SplitButton	選單按鈕
  Ext.Toolbar.TextItem	文字元素

  
  
• Ext.Toolbar支援的各種工具欄常用方法表
  

  方法名	引數型別	說 明
  addButton()	Object/Array config	新增一個或多個Ext.Toolbar.Button/SplitButton物件
  addElement()	Mixed el	新增Element元素
  addField()	Ext.form.Field	新增表單元件
  addFill()		新增一個用於充滿工具條的空白元素
  addSeparator()		新增一個工具欄分割符
  addText()	String Text	新增一個字串
  add()	Mixed arg1,Mixed arg2,Mixed aetc	該方法用於項工具欄中新增元素,它支援一個變長的引數列表, 可以一次性加入多個工具欄元素

  
  
• Ext.Toolbar.Button主要配置專案表
  

  配置項	類 型	說 明
  handler	Function	一個函式,在按鈕被單擊之後呼叫
  iconCls	String	一個樣式類,提供在按鈕上顯示的圖示
  menu	Mixed	引數可以是一個選單物件或者選單物件的id, 也可以是一個郵箱的選單配置物件
  text	String	按鈕上顯示的文字

  可能的按鈕引數形式如下:
        * 單配置物件: {text : '新建', handler : onButtonClick, iconCls : 'newIcon'}
        * 配置物件陣列:[{text : '新建'}, {text : '儲存'}]
  示例1:(簡單工具欄)
         

Ext.onReady(function(){
  var Toolbar = new Ext.Toolbar({//建立工具欄
   applyTo:'toolbar',
   width:300
  });

  Toolbar.addButton([//向工具欄中新增按鈕
   {
    text:'新建',//按鈕上顯示的文字
    handler:onButtonClick,//點選按鈕的處理函式
    iconCls:'newIcon'//在按鈕上顯示的圖示
   },
   {text:'開啟',handler:onButtonClick,iconCls:'openIcon'},
   {text:'儲存',handler:onButtonClick,iconCls:'saveIcon'}
  ]);

  function onButtonClick(btn){//點選按鈕時呼叫的處理函式
   alert(btn.text);//取得按鈕上的文字
  }
 });

示例2:

Ext.onReady(function(){
  var Toolbar = new Ext.Toolbar({//建立工具欄
   applyTo:'toolbar',
   width:400
  });
  Toolbar.addButton([{text:'新建'},{text:'開啟'},
         {text:'儲存'}]);//加入按鈕
  Toolbar.addSeparator() //加入工具欄分隔符
  Toolbar.addField(new Ext.form.TextField({//加入表單元素
   width:50
  }));
  Toolbar.addFill()//加入一個充滿工具欄的空白元素
  Toolbar.addElement(Ext.get('a'));//加入一個Element元素
  Toolbar.addSeparator()//加入工具欄分隔符
  Toolbar.addText('靜態文字')//加入一個簡單字串
 });

示例3:(呼叫一次方法加入多個不同的元素)

• • 呼叫格式
    • add(Mixed arg1, Mixed arg2, Mixed etc)
  • 引數說明:
    • Ext.Toolbar.Button     一個工具欄支援的按鈕
    • HtmlElement               任何HTML元素
    • Field                              表單欄位
    • String                           字串
    • '->'                               一個用於重碼工具條的空白元素
    • 'separator' or '-'       工具欄分隔符

Ext.onReady(function(){
  Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif';
  var Toolbar = new Ext.Toolbar({//建立工具欄
   applyTo:'toolbar',
   width:400
  });
  Toolbar.add(
   {text:'新建'},{text:'開啟'},
   {text:'編輯'},{text:'儲存'}, //加入按鈕
   '-',                         //加入工具欄分隔符
   new Ext.form.TextField({     //加入表單元素
    width:50
   }),
   '->',                        //加入一個充滿工具欄的空白元素
   document.getElementById('a'),//加入一個Element元素
   '-',                         //加入工具欄分隔符
   '靜態文字'                   //加入一個簡單字串
  );
 });

21-Ext中的選單欄

• Ext.menu.Menu主要配置專案表
  

  配置項	引數型別	說 明
  items	Mixed	一個有效選單項的陣列(見下表)
  shadow	Boolean/String	陰影顯示方式, 預設為true即sides方式 sides方式陰影位置:左右下 frame方式陰影位置:全 sdrop方式陰影位置:下右

  
  
• 選單項主要型別表
  

  選單元素名稱	說 明
  Ext.menu.TextItem	文字元素
  Ext.menu.Separator	選單分割符
  Ext.menu.CheckItem	包含選擇框的選單項,也可以是一個單選組

  
  
• 選單元件常用方法
  

  方法名	引數型別	說 明
  addElement()	Mixed el	新增Element元素
  addItem()	Ext.menu.Item.item	新增一個已存在的選單項
  addMenuItem()	Object.config	根據一個選單項配置物件,新增選單項
  addSeparator()		新增選單分隔符
  addText()	String text	新增一個字串

示例1:

Ext.onReady(function(){
  Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif';
  var Toolbar = new Ext.Toolbar({//建立工具欄
   applyTo:'toolbar',
   width:300
  });
  var fileMenu = new Ext.menu.Menu({//檔案建立選單
   shadow : 'frame',//設定選單四條邊都有陰影
   items : [
    {text: '新建',handler:onMenuItem},//新增選單項
    {text: '開啟',handler:onMenuItem},
    {text: '關閉',handler:onMenuItem}
   ]
  });
  var editMenu = new Ext.menu.Menu({//編輯建立選單
   shadow : 'drop',//設定選單在右下兩條邊有陰影
   items : [
    {text: '複製',handler:onMenuItem},//新增選單項
    {text: '貼上',handler:onMenuItem},
    {text: '剪下',handler:onMenuItem}
   ]
  });
  Toolbar.add(
   {text : '檔案', menu : fileMenu},//將選單加入工具欄
   {text : '編輯', menu : editMenu}
  );
  function onMenuItem(item){//選單項的回撥方法
   alert(item.text);//取得選單項的text屬性
  }
 });

示例2:(建立二級或多級選單)

Ext.onReady(function(){
  Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif';
  var Toolbar = new Ext.Toolbar({//建立工具欄
   applyTo:'toolbar',
   width:300
  });
  var infoMenu = new Ext.menu.Menu({//一級選單
   items : [
    {
     text: '個人資訊',
     menu: new Ext.menu.Menu({//二級選單
      items:[
       {text: '身高',handler:onMenuItem},
       {text: '體重',handler:onMenuItem},
       {
        text: '生日',
        menu:new Ext.menu.DateMenu({//三級選單
         handler:onClickDate
        })
       }
      ]
     })
    },//新增選單項
    {text: '公司資訊'}
   ]
  });
  Toolbar.add(
   {text : '設定', menu : infoMenu}//將選單加入工具欄
  );
  function onClickDate(dm,date){//日期選擇的處理函式
   alert(date.format('Y-m-j'));
  }
  function onMenuItem(item){//選擇選單項的處理函式
   alert(item.text);//取得選單項的text屬性
  }
 });

示例3: (使用介面卡Ext.menu.Adapter)

Ext.onReady(function(){
  Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif';

  var Toolbar = new Ext.Toolbar({//建立工具欄
   applyTo:'toolbar',
   width:300
  });
  var fileMenu = new Ext.menu.Menu({//檔案建立選單
   items : [
    //使用介面卡將按鈕加入選單
    new Ext.menu.Adapter(new Ext.Button({
     text:'新建',
     handler:onButtonClick
    })),
    new Ext.menu.Adapter(new Ext.Button({
     text:'開啟',
     handler:onButtonClick
    })),
    new Ext.menu.Adapter(new Ext.Button({
     text:'關閉',
     handler:onButtonClick
    }))
   ]
  });

  Toolbar.add(
   {text : '檔案', menu : fileMenu}//將選單加入工具欄
  );
  function onButtonClick(btn){//選單項的回撥方法
   alert(btn.text);//取得選單項的text屬性
  }
 });

示例4:(具有選擇框的選單)

Ext.onReady(function(){
  Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif';

  var Toolbar = new Ext.Toolbar({//建立工具欄
   applyTo:'toolbar',
   width:300
  });
  var themeMenu = new Ext.menu.Menu({//檔案建立選單
   items : [
   {
    text:'主題顏色',
    menu:new Ext.menu.Menu({
     items:[
      {
       text: '紅色主題',
       checked: true,//初始為選中狀態
       group: 'theme',//為單選項進行分組
       checkHandler: onItemCheck
      },
      {
       text: '藍色主題',
       checked: false,//初始為未選中狀態
       group: 'theme',
       checkHandler: onItemCheck
      },
      {
       text: '黑色主題',
       checked: false,
       group: 'theme',
       checkHandler: onItemCheck
      }
     ]
    })
   },
   {
    text:'是否啟用',
    checked : false
   } 
   ]
  });

  Toolbar.add(
   {text : '風格選擇', menu : themeMenu}//將選單加入工具欄
  );
  function onItemCheck(item){//選單項的回撥方法
   alert(item.text);//取得選單項的text屬性
  }
 });