Extjs 初學者教程連接網址 http://blog.csdn.net/tiemufeng1122/article/details/11151675

時間 2019-11-10

標籤 extjs 初學者教程連接網址 http blog.csdn.net blog csdn tiemufeng1122 tiemufeng article details 欄目 HTTP/TCP 简体版

原文原文鏈接

學習網址連接

http://blog.csdn.net/jfok/article/details/49446195
http://www.cnblogs.com/hyfeng/tag/Extjs6/javascript

1.面板
    (1)類結構
        Ext.Base
        Ext.AbstractComponent
            Ext.Component
                Ext.Container.AbstractContainer
                    Ext.container.Container
                        Ext.panel.AbstractPanel
                            Ext.panel.Panel
    (2)常見子類
        Ext.window.Window
        Ext.form.panel ---form的panel
        Ext.panel.Table ---grid的panel
        Ext.tab.Panel   ---標籤頁的panel
        Ext.menu.Menu
        Ext.tip.Tip
        Ext.container.ButtonGroup
    (3)組成面板的部件
           底部工具欄,頂部工具欄,面板頭部,面板底部,面板體

2.佈局
    (1) Auto自動佈局(Ext.layout.container.Auto)
        默認爲自動佈局，採用佈局佈局的模式與HTML流式排版相似
    (2) Fit自適應佈局(Ext.layout.container.Fit)
        面板裏有且只有一個其它面板資源元素，而且填滿整個body
    (3) Accordion摺疊(即手風琴)佈局(Ext.layout.container.Accordion)
        同時會初始化多個面板，當一個面板處於打開狀態時，其它面板會處於收起狀態
    (4) Card卡片佈局(Ext.layout.container.Card)
        它和手風琴佈局相似，也有多個面板；不一樣之處在於他用按鈕來切換（經常使用於導航）
    (5) Anchor描點佈局[Ext.layout.container.Anchor]
        根據容器的大小，自適應來爲容器的子元素進行佈局和定位
            A.百分比
            B.偏移量
            C.參考離邊的距離定位
    (6)    多選框佈局[Ext.layout.container.CheckboxGroup]
    (7) Column列布局[Ext.layout.container.Column]
        列風格的佈局，每一列的寬度能夠根據百分比或固定數據來控制
    (8) Table表格佈局[Ext.layout.container.Table]
        和傳統的HTML的Table佈局方式同樣，一樣具備跨列，跨行的屬性。
    (9) Absolute絕對佈局[Ext.layout.container.Absolute]
        格局容器X、Y軸的方式絕對定位
    (10) Border邊界佈局[Ext.layout.container.Border]
        能夠控制上、下、左、右、中 (一般用於頁面框架的規劃)
    (11) 盒子佈局
        Ext.layout.container.Box
            Ext.layout.container.HBox 豎排
            Ext.layout.container.VBox 橫排
         重要參數
            Box
                flex 具備配置flex的子項，會根據佔有剩餘總量的比值，來決定本身的大小
                pack 控制子元素展現的位置(start左面--這時候flex生效，center中間，end後面)
                padding 邊距
            HBox
                align[top,middle,stretch,stretchmax]
            VBox
                align[left,center,stretch,stretchmax]php

3.面板經常使用的配置屬性
    Ext.panel.Panel
        (1) closable:true //啓用關閉功能
        (2) closeAction:'destroy' //設置關閉窗口後的對象處理[destroy銷燬面板|hide隱藏面板]
        (3) hideCollapsible:true //啓用面板隱藏面板體功能
        (4) collapsible:true      //是否展開面板體
        (5)
4.Ext.tab.Panel標籤頁，一種特殊的佈局方式
    經常使用方法
        setActiveTab( Ext.Component card) 設置當前顯示的標籤頁

chart

1.關於圖表
    圖表的軸(axes)
        (1) 數值軸 Ext.chart.axis.Numeric
        (2) 時間軸 Ext.chart.axis.Time
        (3) 分類軸 Ext.chart.axis.Category
        (4) 儀表軸 Ext.chart.axis.Gauge
    圖表的類型
        (1) 折線圖 Ext.chart.series.Line
        (2) 柱形圖 Ext.chart.series.Column
        (3) 餅狀圖 Ext.chart.series.Pie
        (4) 條形圖 Ext.chart.series.Bar
        (5) 面積圖 Ext.chart.series.Area
        (6) 雷達圖 Ext.chart.series.Radar
        (7) 散點圖 Ext.chart.series.Scatter
        (8) 儀表圖 Ext.chart.series.Gauge
    經常使用屬性
        highlight高亮，label標題，tips提示，renderer格式化css

Form組件

1.根類
      Ext.form.Basic
    提供了表單組件,字段管理,表單提交,數據加載的功能
2.表單的容器
    Ext.form.panel
    容器自動關聯 Ext.form.Basic的實例對象,更方便的進行字段的配置
    重要屬性
          defautType : "" （設置默認子項的xtype）
3.數據交互和加載
      Ext.form.action.Action（兩種表單自身的提交方式）
          Ext.from.action.Submit Ajax方式提交
              Ext.form.action.StandardSubmit 原始鼻癌單提交方法
          Ext.form,action.DirectLoad
              Ext.form.action.DirectSubmit 相似於dwr的方式提交
4.字段的類型
    Ext.form.field.Base 根類
          混入了的類[Ext.form.field.Field]獲得表單的處理功能
        混入了的類[Ext.form.Labelable]獲得表單標籤錯誤信息提示功能
        Ext.form.field.Text 文本框方式的以下：
            Ext.form.field.TextArea 富文本域
            Ext.form.field.Trigger 觸發器
                  Ext.form.field.Picker 觸發器子類（選擇器）
                      Ext.form.field.Time
                    Ext.form.field.Date
                    Ext.form.field.Number
                    Ext.form.field.file 文件上傳
                    Ext.form.field.ComboBox 選擇框
            Ext.form.field.Checkbox 選擇框方式的
                Ext.form.field.Radio 單選框
            Ext.form.field.Hidden 特殊的--隱藏字段（數據頁面不顯示，但後臺須要）
    Ext.form.field.HtmlEditor 特殊的--文本編輯框
5.其中夾雜佈局的類
      Ext.form.FieldContainer
          Ext.form.CheckboxGroup
              Ext.form.RadioGroup
    Ext.form.Label
          Ext.form.Labelable
    Ext.form.FieldSet
    Ext.form.fieldContainer (裏面能夠放多個表單項，進行統一佈局)
6.經常使用的組件配置
    Ext.form.Panel
          重要的配置項
              title:'',
            bodyStyle:'',
            frame:true,
            height:122,
            width:233,
            renderTo:'',
            defaultType:'',
            defaults:{
                allowBanlk:true,
                msgTarget:'side',
                pageSize:4 //配置這個參數便可在下拉框內一分頁的形式操做數據
            },
            因爲混入了Ext.form.labelable因此可進行以下配置；
                labelSeparator 字段的名稱與值直之間的分隔符
                labelWidth 標籤寬度
    Ext.form.field.Text 文本框(xtype:textfield)
          重要配置項
              width:156,
            allowBlank:false,//不能爲空
            labelAlign:'left',
            msgTarget:'side' //在字段的幼斌展現提示信息
            grow:false,//是否在這個表單字段規定長度內，自動根據文字的內容進行伸縮
            selectOnFocus：true, //當字段的內容獲得焦點的時候，選擇全部文本
            regex : /\d+/g,
            regexText : '請輸入數字',
            inputType:'password',//其它類型：email、url等。默認text
            //vType:'IPAddress'用於數據校驗,Ext.form.field.VTypes
            //若是校驗不是你想要的，能夠自定義，以下：
            //custom Vtype for vtype:'IPAddress'
                Ext.apply(Ext.form.field.VTypes, {
                    IPAddress: function(v) {
                        return /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(v);
                    },
                    IPAddressText: 'Must be a numeric IP address',
                    IPAddressMask: /[\d\.]/i //不符合正則的，鍵盤整麼輸入，都不起做用
                });
    Ext.form.field.Number
          重要的配置項
              allowDecimals：false,//不能輸入小數
              hideTrigger:true,//隱藏框幫邊的調節按鈕
              decimalPrecision : 3,//自動四捨五入,保留小數位爲3位。
              emptyText：'請輸入小數'//默認框內灰色提醒
              //指定範圍
              minValue:10,
              maxValue:100,
              baseChars:'01',//表示框內只能輸入0和1
              step:'0.8',//指定步長

    Ext.form.field.ComboBox
          Ext.view.BoundList 約束列表
        重要屬性
              listConfig：{
                //規劃下拉框究竟是什麼樣的樣式
                //這裏面的值是根據BoundList裏面的屬性進行初始化的
                getInnerTpl:function()
                {
                    return "<div style='color:red'>${name}</div>";//動態改變下拉框內容樣式
                }
            }
            queryMode:'remot', //local(本地數據)|remot(遠程數據)
            valueFiled:'id',//後臺須要
            displayField:'name'//頁面顯示的
            forceSelection:true, //必須選中數據集合中有的數據
            minChars:2,//表示輸入2個字符的的時候，就到後臺請求數據
            queryDelay:400,
            queryParam:'name',//指定日後臺傳入的參數名稱,對應的參數值是你輸入的參數
            multiSelect:true, //容許多選
            typeAhead:true,   //自動補全
    Ext.form.field.Date
          重要屬性
            disableDays:[0,6] //週日與週六不能選爲灰色
7.經常使用事件
      當字段類型爲xtype:'triggerfield',它具備onTriggerClick事件，
    常常用於從其它彈出表格中選擇某個值。

8.經常使用操做
      獲取表單中某項的值
          var fieldValue = Ext.getCmp('表單id').getForm().findField('字段名稱').getValue();

    自動填充表單的各項值
        loadRecord( Ext.data.Model record) : Ext.form.Basic
        Loads an Ext.data.Model into this form by calling setValues with the record data. See also trackResetOnLoad.html

Tree

1. 類結構
    Ext.panel.Panel
        Ext.panel.Table
            Ext.tree.Panel --- 他是和grid徹底同樣的

2. 主要配置項
        title 標題
        width 寬
        height 高
        renderTo 渲染到什麼地方
        root 控制根節點(Ext.data.Model/Ext.data.NodeInterface)
        animate : Boolean 控制收起和展開是發有動畫效果
        store: store 數據集合
        rootVisible : false,//控制顯隱的屬性
    重要事件
        itemclick:function(tree,record,item,index,e,options)
    重要方法
        expandAll
        collapseAll
        getChecked
        appendChild

3. Ext.data.TreeStore
    重要屬性
        defaultRoodId //指定根節點

4. 樹形的拖拽（插件）
    Ext.tree.ViewDDPlugin
        alias ：'plugin.treeviewdragdrop'
    須要在tree的panel下面加
        viewConfig:{
            plugins:{
                ptype :'treeviewdragdrop',
                appendOnly:true //加上這個葉子節點之間拖拽時，會彈出圖形警告。
            }
        }
    事件
        listeners:{
            drop: function(HtmlElement node, Object data, Ext.data.Model overModel, String dropPosition)
            beforedrop: function(HtmlElement node, Object data, Ext.data.Model overModel, String dropPosition, Function dropFunction)
        }

5. 關於節點的拷貝與粘貼
         重要方法
              updateInfo（把更新的節點屬性值，更新顯示的界面）

6. 關於刪除節點操做
        重要方法
             remove（節點的方法）

7. 多列樹的配置
         主要配置項
              columns（與表格同樣）

8. 級聯選中，以及級聯不選中

9. 關於Store的Proxy裏的api應用前端

Ext.define("AM.store.deptStore",{
extend:'Ext.data.TreeStore',
defaultRoodId:'root',
proxy:{
  //Proxy裏面的api屬性，能夠存放crud的後臺url，經過前臺就能夠取到
  api:{
   update:"/extjs/extjs!updateDept.action",
   remove:"/extjs/extjs!delDept.action"
  }
  type:'ajax',
  url:'/extjs/extjs!getDept.action',
  reader:'json',
  autoLoad:true
}
});java

Ext.define("AM.view.deptView",{
extend:'Ext.tree.Panel',
alias: 'widget.deptTree',
title : '部門樹形',
width : 250,
height: 300,
padding : '5 3 3 10',
rootVisible : false,//控制顯隱的屬性
config：{
  copyNodes:'' //充當剪切板的做用,臨時存放樹節點
}
//裏面得配置與表格相似
columns:[
  {
   xtype:'treecolumn',
   text:'text',
   width:150,
   dataIndex:'text'
  },{
   text:'info',
   dataIndex:'info'
  }
],
viewConfig:{
  plugins:{
   ptype :'treeviewdragdrop',
   appendOnly:true //加上這個葉子節點之間拖拽時，會彈出圖形警告。
  }
  listeners:{
   drop:function(node,data,voerModel,dropPosition,options){
    alert("把："+data.records[0].get('text')+"移動到："+overModel.get('text'));
   }
   beforedrop:function(node,data,overModel,dropPosition,dropFunction){
    if(overModel.get("leaf")) //若是把一個節點拖到一個葉子節點下面時，這時我能夠把葉子節點修改成費葉子節點，就能夠放了。
    {
     overModel.set('leaf',true);
    }
   }
  }
}
dockedItems:[{
  xtype:'toolbar',
  dock:'left',
  //ui:'footer',
  items:[
   {xtype:'button',text:'add',id:'add'},
   {xtype:'button',text:'copy',id:'copy'},
   {xtype:'button',text:'delete',id:'delete'}
   {xtype:'button',text:'delete',id:'paste'}
  ]
},{
  xtype:'toolbar',
  items:[{
   xtype:'button',
   id:'allopen',
   text:'展開所有'
  },{
   xtype:'button',
   id:'allclose',
   text:'收起所有'
  }]
}],
store:'deptStore'
});node

Ext.define('AM.controller.deptController', {
    extend: 'Ext.app.Controller',
init:function(){
  this.control({
   "deptTree":{
    checkchange:function(node,checked,options){
     if(node.data.leaf == false)
     {
      if(checked){
       //先展開節點
       node.expand();
       //遍歷子節點，若是遇到非葉子節點，將遞歸遍歷
       node.eachChild(function(n){
        n.data.checked = true;
        n.updateInfo({checked:true});
       })
      }else
      {
       //先展開節點
       node.expand();
       //遍歷子節點，若是遇到非葉子節點，將遞歸遍歷
       node.eachChild(function(n){
        n.data.checked = false;
        n.updateInfo({checked:false});
       })
      }else
      {
       //只要有一個葉子節點沒有選中,父節點都不該該選中
       if(!checked){
        node.parentNode.data.checked = false;
        node.parentNode.updateInfo({checked:false});
       }
      }
     }
     var tree = b.ownerCt.ownerCt;
     //獲得選中數據集合
     var nodes = tree.getChaecked();
     for(i=0;i<nodes.length;i++)
     {
      nodes[i].remove(true); //刪除該節點
     }
   },
      "deptTree button[id=delete]":{
    click:function(b,e){
     var tree = b.ownerCt.ownerCt;
     //獲得選中數據集合
     var nodes = tree.getChaecked();
     for(i=0;i<nodes.length;i++)
     {
      nodes[i].remove(true); //刪除該節點
      //經過ajax向後臺提交刪除數據

      //經過這種方式也是能夠自動提交到後臺的，不過數據可能不是你所須要的。
         //tree.getStore().getProxy().update(new Ext.data.Operation(
       //{action:'remove'} //你寫什，它就會提交那個url，eg：{action:'update'}
      //));

      //本身組裝參數Ajax的提交（經常使用）
      Ext.Ajax.request({
       //經過這種方式就能夠直接獲取到store裏面配置的url
       //避免url處處亂寫
       //其實就是利用了store的proxy裏面已經有的api屬性來存放url集合
       url: tree.getStore().getProxy().api['remove'],
       params: {
        id: nodes[i].data.id
       },
       success: function(response){
        var text = response.responseText;
        // process server response here
       }
      });
     }
   },
   "deptTree button[id=copy]":{
    click:function(b,e){
     var tree = b.ownerCt.ownerCt;
     //獲得數據集合
     var nodes = tree.getChaecked();
     if(nodes.length>0){
      //把數據放到剪切板中
      tree.setCopyNodes(Ext.clone(nodes));
      for(i=0;i<nodes.length;i++)
      {
       nodes[i].data.checked = false; //這個只是更新節點的屬性值，並無更新顯示到頁面
       nodes[i].updateInfo();//更新顯示到頁面
      }
     }
    }
   },
   "deptTree button[id=paste]":{
    click:function(b,e){
     var tree = b.ownerCt.ownerCt;
     //得到被追加孩子的節點集合
     var checkNodes = tree.getChecked();
     //去剪切板中取數據
     var nodes = tree.getCopyNodes();
     if(checkNodes.length == 1 && nodes.lenght > 0){
      // 被追加孩子的節點
      var node = checkNodes[0];

      for(i=0;i<nodes.length;i++){
       var el = nodes[i].data;
       //在這裏能夠進行組裝數據傳入後臺
       node.appendChild(el);
      }react

     }else{
      alert("剪切板中沒有數據或沒有選中節點");
     }
    }
   },

   "deptTree button[id=allopen]":{
    click:function(b,e){
     var tree = b.ownerCt.ownerCt;
     tree.expandAll();
    }
   },
   "deptTree button[id=allclose]":{
    click:function(b,e){
     var tree = b.ownerCt.ownerCt;
     tree.collapseAll();
    }
   },
   "deptTree button[id=add]":{
    click:function(b,e){
     var tree = b.ownerCt.ownerCt;
     var nodes = tree.getChecked();
     if(nodes.length == 1){
      var node = nodes[0];
      node.appendChild({
       checked:true,
       text:'技術架構組',
       id : '0103',
       leaf:true
      });
     }else{
      alert("請您選擇一個節點");
     }
    }
   },
   "deptTree":{
    itemclick:function(tree,record,item,index,e,options){
     alert(record.get('id'));
    }
   }
  });
},
views:[
  'deptView'
],
stores :[
  'deptStore'
],
models :[
]
});git

Grid組件

1. 表格面板類Ext.grid.Panel基本屬性。（兩個別名xtype:gridpanel, grid）github

    重要的配置參數：
       （1）columns : Array 列模式(Ext.grid.column.Columnxtype: gridcolumn)
        列裏面的經常使用配置參數：
                text : String 列的標題默認是""
                dataIndex : String 和Model的列一一對應的
                field: {} //配合插件使用，告訴插件在那一列起做用
                xtype:默認爲gridcolumn
                renderer : function(value) //能夠列裏面值顯示以前，作一些改變。

                                                   //參數value就是列的值，我能夠在函數處理後，返回其改變後的值。
       （2）title : String 表格的標題，若是不寫默認表格是沒有頭標題那一欄。
       （3）renderTo : Mixed 把表格渲染到什麼地方，即展現到那個元素裏面。
       （4）width : Number 寬
       （5）height: Number 高
       （6）frame : Boolean 是否填充渲染這個Panel（渲染的比較好看）
       （7）forceFit : true 設定表格列的長度是否自動填充
       （8）store : store 數據集合
       （9）tbar: [] 頭部工具欄，裏面能夠放置各類按鈕
       （10）bbar：[] 底部操做欄，通常放分頁面板
       （11）dockedItems : Object/Array 更具備位置的靈活性,當你用這個屬性時,

                                                     能夠指定工具條停靠在表格中上下左右位置；能夠用來替換tbar與bbar。

       （12）selType : 'checkboxmodel'/'rowmodel'/'cellmodel',

選擇模式即選中記錄方式：選擇框/鼠標單擊或雙擊行選擇/鼠標單擊或雙擊單元格選擇

                            （用多選框模式時,forceFit屬性最好不啓用，或則樣式很差看）
       （13）multiSelect :true,//容許多選與上面屬性聯合屬性
       （14）plugins :[] 插件的形式，爲表格添加一些特殊的功能（eg：單元格編輯、行編輯以及行拖拽等）

例子能夠參考上面MVC裏面view層裏面的grid定義。

2. 經常使用表格的列都有哪些類型。

    （1）Ext.grid.column.Column xtype: gridcolumn 普通列

    （2）Ext.grid.column.Action xtype: actioncolumn
        在表格中渲染一組圖標按鈕,而且爲他賦予某種功能，相似於連接
          altText : String 設置應用image元素上的alt
          handler : function(view,rowindex,collndex,item,e);
          icon     : 圖標資源地址
          iconCls : 圖標樣式
          items   : 多個圖標的數組   //在使用MVC的時候建議不要用若是你們有好得放大請與uspcat聯繫
                function(o,item,rowIndex,colIndex ,e)
          stopSelection : 設置是否單擊選中不選中

   （3）Ext.grid.column.Boolean xtype: booleancolumn
          falseText,

          trueText

   （4）Ext.grid.column.Date xtype: datecolumn
          format:'Y年m月的日'

   （5）Ext.grid.column.Number xtype: numbercolumn
          format:'0,000'

   （6）Ext.grid.column.Template xtype: templatecolumn
          xtype:'templatecolumn',
          tpl :"${字段的名稱}" 能夠進行動態的組合字段的值，做爲該字段的值。

   （7）Ext.grid.RowNumbererxtype: rownumberer    //顯示行號

Ext.define("AM.view.List",{
extend:'Ext.grid.Panel',
title : 'Grid Demo',//標題
alias: 'widget.userlist',
frame : true,//面板渲染
width : 1000,
height: 280,
columns : [ //列模式
    Ext.create("Ext.grid.RowNumberer",{}),
    {text:"Name",dataIndex:'name',width:100},
    {text:"age",dataIndex:'age',width:100},
    {text:"email",dataIndex:'email',width:200,
     field:{
      xtype:'textfield',
      allowBlank:false
     }
    },{
     text:'sex',
     dataIndex:'sex',
     width:50,
     DDName:'sy_sex',
     renderer:function(value){
      if(value){
       if(value == "女"){
        return "<font color='green'>"+value+"</font>"
       }else if(value == "男"){
        return "<font color='red'>"+value+"</font>"
       }
      }
     }
    },{
     text:'isIt',
     dataIndex:'isIt',
     xtype : "booleancolumn",
     width:50,
     trueText:'是',
     falseText:'不是'
    },{
     text:'birthday',
     dataIndex:'birthday',
     xtype : "datecolumn",
     width:150,
     format:'Y年m月d日'
    },{
     text:'deposit',
     dataIndex:'deposit',
     xtype:'numbercolumn',
     width:150,
     format:'0,000'
    },{
     text:'描述',xtype:'templatecolumn',
     tpl:'姓名是{name} 年齡是{age}',
     width:150
    },{
     text:'Action',xtype:'actioncolumn',
     id:'delete',
     icon:'app/view/image/table_delete.png',
     width:50//,
//     items :[
//     {},{}
//     ]
//     handler:function(grid,row,col){
//     alert(row+" "+col);
//     }
    }
],
tbar :[
    {xtype:'button',text:'添加',iconCls:'table_add'},
    {xtype:'button',id:'delete',text:'刪除',iconCls:'table_remove'},
    {xtype:'button',text:'修改',iconCls:'table_edit'},
    {xtype:'button',text:'查看',iconCls:'table_comm'}
],
dockedItems :[{
    xtype:'pagingtoolbar',
    store:'Users',
    dock:'bottom',
    displayInfo:true
}],
plugins:[
    Ext.create("Ext.grid.plugin.CellEditing",{
     clicksToEdit : 2 //單擊幾下
    })
],
selType:'checkboxmodel',//設定選擇模式
multiSelect:true,//運行多選
store : 'Users',
initComponent:function(){
  this.callParent(arguments);
}
});

3. 選擇模型Ext.selection.Model的用法（嵌套在一些高級組件使用）以及表格的一些特性功能。

選擇模型Ext.selection.Model的用法

    （1）選擇模式的根類Ext.selection.Model (經過選擇模式裏面提供的方法進行操做行的選擇)
           重要方法：
                撤銷選擇 deselect( Ext.data.Model/Index records, Boolean suppressEvent ) : void
                獲得選擇的數據getSelection( ) : Array
                獲得最後被選擇數據getLastSelected( ) : void
                判斷你指定的數據是否被選擇上isSelected( Record/Number record ) : Boolean
                選擇你指定的行selectRange( Ext.data.Model/Number startRow, Ext.data.Model/Number endRow, [Boolean keepExisting], Object dir ) : void
                keepExisting true保留已選則的項,false從新選擇，不保留已選則的項

   （2）隱藏了一個單元格的選擇模式 selType: 'cellmodel'    (從這發現的Ext.grid.plugin.CellEditing)
           重要方法
                獲得被選擇的單元格getCurrentPosition() Object
                    Ext.JSON.encode()
                    itemclick( Ext.view.View this, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObject e, Object options )

                selectByPosition({"row":5,"column":6}) 很實用，選中你要特殊處理的數據單元格

   （3） Ext.selection.CheckboxModel 多選框選擇器
        重要方法

   （4）Ext.selection.RowModel      rowmodel 行選擇器（經過鼠標單擊表的行記錄進行選擇）
         重要屬性
              multiSelect 容許多選
              simpleSelect 單選選擇功能
              enableKeyNav 容許使用鍵盤上下鍵選擇

表格的一些特性功能

   （1）Ext.grid.feature.RowBody 表格的行體（在行的下面來一個空白行，顯示你所須要的信息）
          重要方法
                getAdditionalData( Object data, Number idx, Ext.data.Model record, Object orig ) : void
                若是你要展現這個面板那麼必須複寫這個方法
                features: [
                        Ext.create("Ext.grid.feature.RowBody",{
                            getAdditionalData:function(data,idx,record,orig){
                                ......
                            }
                        })
                ],
                2.必須返回行體的對象
                var headerCt = this.view.headerCt,
                    colspan = headerCt.getColumnCount();
                return {
                    rowBody: "",
                    rowBodyCls: this.rowBodyCls,
                    rowBodyColspan: colspan
                };

   （2）Ext.grid.feature.AbstractSummary negative 可以在表格數據的最後作一些統計功能。

                                                                   （eg：統計某一列的平局值等）
          Ext.grid.feature.Summary
               實用方法是在
                    第一步
                    features: [{
                        ftype: 'summary'
                    }],
                    第二步
                    columns中配置summaryType: 'count', (count,sum,min,max,average)
                    summaryRenderer: function(value, summaryData, dataIndex) {
                       return Ext.String.format(' : '+value);
                    }
    用於對某一列，進行求平均值等。

   （3）Ext.grid.feature.Grouping
          在store中設置能夠分組的屬性
            groupField : ' '
          在view中增長代碼
            Ext.create("Ext.grid.feature.Grouping",{
                    groupByText : "職業分組",
                    groupHeaderTpl : "職業{name} 一共{rows.length}人",
                    showGroupsText : "展現分組",
                    startCollapsed : true

            }

（4）其它功能:

重要事件
                  groupclick
          groupdblclick
          groupcontextmenu
          groupexpand
                  groupcollapse

（5）Ext.grid.feature.GroupingSummary

（6）Ext.grid.feature.Chunking

Ext.define("AM.view.List",{
extend:'Ext.grid.Panel',
title : 'Grid Demo',//標題
alias: 'widget.userlist',
frame : true,//面板渲染
width : 1100,
height: 450,
features: [
  Ext.create("Ext.grid.feature.RowBody",{
      getAdditionalData: function(data, idx, record, orig) {
          var headerCt = this.view.headerCt,
              colspan = headerCt.getColumnCount();
          return {
              rowBody: record.get('email'),
              rowBodyCls: this.rowBodyCls,
              rowBodyColspan: colspan
          };
      }
  }),{
   ftype: 'summary'
  },Ext.create("Ext.grid.feature.Grouping",{
     groupByText : "性別分組",
     groupHeaderTpl : "性別{name} 一共{rows.length}人",
     showGroupsText : "展現分組"

  })
],
columns : [ //列模式
    Ext.create("Ext.grid.RowNumberer",{}),
    {text:"Name",dataIndex:'name',width:100},
    {text:"age",dataIndex:'age',width:100,
     summaryType:'average',
     summaryRenderer: function(value, summaryData, dataIndex) {
              return Ext.util.Format.number(value,"00.0")
           }
    },
    {text:"email",dataIndex:'email',width:200,
     field:{
      xtype:'textfield',
      allowBlank:false
     }
    },{
     text:'sex',
     dataIndex:'sex',
     width:50,
     DDName:'sy_sex',
     renderer:function(value){
      if(value){
       if(value == "女"){
        return "<font color='green'>"+value+"</font>"
       }else if(value == "男"){
        return "<font color='red'>"+value+"</font>"
       }
      }
     }
    },{
     text:'isIt',
     dataIndex:'isIt',
     xtype : "booleancolumn",
     width:50,
     trueText:'是',
     falseText:'不是'
    },{
     text:'birthday',
     dataIndex:'birthday',
     xtype : "datecolumn",
     width:150,
     format:'Y年m月d日'
    },{
     text:'deposit',
     dataIndex:'deposit',
     xtype:'numbercolumn',
     width:150,
     format:'0,000'
    },{
     text:'描述',xtype:'templatecolumn',
     tpl:'姓名是{name} 年齡是{age}',
     width:150
    },{
     text:'Action',xtype:'actioncolumn',
     id:'delete',
     icon:'app/view/image/table_delete.png',
     width:50//,
//     items :[
//     {},{}
//     ]
//     handler:function(grid,row,col){
//     alert(row+" "+col);
//     }
    }
],
tbar :[
    {xtype:'button',text:'添加',iconCls:'table_add'},
    {xtype:'button',id:'del',text:'刪除',iconCls:'table_remove'},
    {xtype:'button',text:'修改',iconCls:'table_edit'},
    {xtype:'button',text:'查看',iconCls:'table_comm'},
    {xtype:'button',id:'selection',text:'selection',iconCls:'table_comm'}
],
dockedItems :[{
    xtype:'pagingtoolbar',
    store:'Users',
    dock:'bottom',
    displayInfo:true
}],
plugins:[
    Ext.create("Ext.grid.plugin.CellEditing",{
     clicksToEdit : 2
    })
],
//selType:'rowmodel',//設定選擇模式
selType:'cellmodel',
//multiSelect:true,//運行多選
//enableKeyNav :true,
store : 'Users',
initComponent:function(){
  this.callParent(arguments);
}
});

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',
init:function(){
  this.control({
   'userlist':{
    itemclick:function(View, record, item, index, e, options ){
     var sm = View.getSelectionModel();//.getSelection();
        //alert(Ext.JSON.encode(sm.getCurrentPosition()));
     sm.selectByPosition({"row":1,"column":2});
    }
   },
   'userlist button[id=selection]':{
    click:function(o){
     var gird = o.ownerCt.ownerCt;
     var sm = gird.getSelectionModel();
     //sm.deselect(0);
     //alert(sm.getLastSelected().get('name'))
     //alert(sm.isSelected(0));
     //sm.selectRange(1,2,true);
     sm.selectByPosition({"row":2,"column":3});
    }
   },
   'userlist button[id=del]':{
    click:function(o){
     var gird = o.ownerCt.ownerCt;
      var data = gird.getSelectionModel().getSelection();
      if(data.length == 0){
       Ext.Msg.alert("提示","您最少要選擇一條數據");
      }else{
       //1.先獲得ID的數據(name)
       var st = gird.getStore();
       var ids = [];
       Ext.Array.each(data,function(record){
        ids.push(record.get('name'));
       })
       //2.後臺操做(delet)
       Ext.Ajax.request({
        url:'/extjs/extjs!deleteData.action',
        params:{ids:ids.join(",")},
        method:'POST',
        timeout:2000,
        success:function(response,opts){
         Ext.Array.each(data,function(record){
          st.remove(record);
         })
        }
       })
       //3.前端操做DOM進行刪除(ExtJs)
      }
    }
   },
   "userlist actioncolumn[id=delete]":{
    click : function(o,item,rowIndex,colIndex ,e){
     alert(rowIndex+" "+colIndex);
    }
   }
  });
},
views:[
  'List'
],
stores :[
  "Users"
],
models :[
  "User"
]
});

4.插件使用以及其它的特性使用。

（1）可編輯插件的根 Ext.grid.plugin.Editing
        Ext.grid.plugin.Editing
   Ext.grid.plugin.CellEditing 這個不講(以前課程講過)
             保存修改的兩種辦法：
             a、設立保存按鈕,用戶單擊的時候保存數據

                st.sync(); //數據與後臺進行同步，通常不用，他會把整個記錄傳到後臺
                           //若是不寫這句，下面的語句是得不到數據的
                var records = st.getUpdatedRecords();
                Ext.Array.each(records,function(model){
                    model.commit(); //前臺的小紅點會消失
                });

                咱們能夠selectModel來得到修改的數據，組裝後在日後臺傳入。

            b.註冊edit事件
                e.record.commit(); //前臺的小紅點會消失
        Ext.grid.plugin.RowEditing
             使用方法:(有Bug推薦4.0.1a版本仍是不要用這個功能)
             Ext.create('Ext.grid.plugin.RowEditing', {
                    clicksToEdit: 1
       })

（2）Ext.grid.plugin.DragDrop 表格拖拽
       主意:配置有變化
       viewConfig:{
          plugins:[
            Ext.create('Ext.grid.plugin.DragDrop', {
                ddGroup:'ddTree', //拖放組的名稱
                dragGroup :'userlist', //拖拽組()名稱
                dropGroup :'userlist' //釋放租名稱
                enableDrag:true, //是否啓用
                enableDrop:true
            })]
   }
      處理事件
      listeners: {
        drop: function(node, data, dropRec, dropPosition) {
              var st = this.getStore();
              for(i=0;i<st.getCount();i++){
                  st.getAt(i).set('index',i+1);
              }
        }
      }

（3）Ext.toolbar.Paging 分頁組件

       //第一種經常使用分頁
     dockedItems: [{
          xtype: 'pagingtoolbar',
          store: store,
          dock: 'bottom',
          displayInfo: true
      }],

      //第二種分頁的形式(條狀，撥動分頁)
      Ext.Loader.setPath('Ext.ux', 'http://www.cnblogs.com/../extjs4/examples/ux');
      Ext.require([
          'Ext.ux.data.PagingMemoryProxy',
          'Ext.ux.SlidingPager'
      ]);
      bbar: Ext.create('Ext.PagingToolbar', {
         pageSize: 10,
         store: store,
         displayInfo: true,
         plugins: Ext.create('Ext.ux.SlidingPager', {}) ---- 重點是這
      })

（4）Ext.grid.property.Grid
      屬性配置框面板
      當經過頁面自動配置一些屬性時候了能夠考慮用

（5）列鎖定
      {text:"age",dataIndex:'age',width:100,locked:true},相似於excel裏的凍結功能

（6）複雜表頭
       列裏面又包含列(不能和字段過濾一塊兒使用)
       columns：{
          text:'other',columns:[
            {text:"age",dataIndex:'age',width:100,locked: true},
            {text:"int",dataIndex:'index',width:100}]
      }

（7）字段過濾
    Ext.require([
        'Ext.ux.grid.FiltersFeature'
    ]);
    Ext.define("AM.class.filters",{
        alias: 'widget.filters',
        ftype: 'filters',
            encode: false,
            local: true,
            filters: [{
                    type: 'boolean',
                    dataIndex: 'visible'
                }
         ]
    })
    view層中
    features: [Ext.create("AM.class.filters")],
    列中添加配置{filterable: true,text:"age",dataIndex:'age',width:100,filter: {type: 'numeric'}}

Ext.define("AM.util.filters",{
alias: 'widget.filters',
ftype: 'filters',
        encode: false,
        local: true,
        filters: [{
                type: 'boolean',
                dataIndex: 'visible'
            }
     ]
})

Ext.define("AM.view.List",{
extend:'Ext.grid.Panel',
title : 'Grid Demo',//標題
alias: 'widget.userlist',
frame : true,//面板渲染
width : 500,
height: 380,
columns : [ //列模式
    //{text:"Name",dataIndex:'name',width:100,locked:true},
    {text:"Name",dataIndex:'name',width:100},
    //{text:'others',columns:[
     {text:"age",dataIndex:'age',width:100,filterable: true,filter: {type: 'numeric'}},
     {text:"email",dataIndex:'email',width:250,
      field:{
       xtype:'textfield',
       allowBlank:false
      }
     },{
      text:'index',dataIndex:'index',width:100
     }
    //]}
],
features: [Ext.create("AM.util.filters")],
tbar :[
    {xtype:'button',text:'添加',iconCls:'table_add'},
    {xtype:'button',id:'delete',text:'刪除',iconCls:'table_remove'},
    {xtype:'button',text:'修改',iconCls:'table_edit'},
    {xtype:'button',text:'查看',iconCls:'table_comm'},
    {xtype:'button',text:'save',id:'save',iconCls:'table_comm'}
],
dockedItems :[{
    xtype:'pagingtoolbar',
    store:'Users',
    dock:'bottom',
    displayInfo:true,
    plugins: Ext.create('Ext.ux.SlidingPager', {})
}],
//plugins:[
//    Ext.create("Ext.grid.plugin.CellEditing",{
//     clicksToEdit : 2
//    })
//    Ext.create('Ext.grid.plugin.RowEditing', {
//              clicksToEdit: 1
//          })
//],
viewConfig:{
  plugins:[
         Ext.create('Ext.grid.plugin.DragDrop', {
         ddGroup:'ddTree', //拖放組的名稱
             dragGroup :'userlist', //拖拽組名稱
             dropGroup :'userlist', //釋放租名稱
             enableDrag:true, //是否啓用
             enableDrop:true
         })],
  listeners: {
        drop: function(node, data, dropRec, dropPosition) {
                var st = this.getStore();
                for(i=0;i<st.getCount();i++){
                    st.getAt(i).set('index',i+1);
              }
        }
    }
},
//selType:'checkboxmodel',//設定選擇模式
//multiSelect:true,//運行多選
store : 'Users',
initComponent:function(){
  this.callParent(arguments);
}
});

MVC學習

從這個圖中咱們能夠很清楚的看到M 、V、C在ExtJS4.0裏面所對應數據類型。

靠右邊是對應的代碼結構。

下描述一下這model、store、view、controller以及application這幾者之間的關係。

（1）application：它是MVC的入口，用來告訴ExtJS到那裏去找對應js文件以及啓動加載controller與view連個模塊的代碼。

//打開動態加載js功能
Ext.Loader.setConfig({
  enabled:true
});
Ext.application({
  name : 'AM',//應用的名字 (根) 利用MVC時這時定義的包路徑須要與命名空間的層次關係一致
  appFolder : "app",//應用的目錄
  launch:function(){//當前頁面加載完成執行的函數
         Ext.create('Ext.container.Viewport', { //簡單建立一個試圖（填充整個瀏覽器）
         layout:'auto',//自動填充佈局
             items: {
             xtype: 'userlist', //引用已經定義的別名進行初始化類
                 title: 'Users',
                 html : 'List of users will Go here'
             }
         });
  },
  controllers:[
   'Users'
  ]
});

（2）controller：這一層主要是用來處理業務邏輯，即View上一些動做所觸發要執行的操做都在此實現。同時它也是關聯view、store以及model的地方。

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',
init:function(){
  this.control({
   'userlist button[id=delete]':{
    click:function(o){
     var gird = o.ownerCt.ownerCt;
      var data = gird.getSelectionModel().getSelection();
      if(data.length == 0){
       Ext.Msg.alert("提示","您最少要選擇一條數據");
      }else{
       //1.先獲得ID的數據(name)
       var st = gird.getStore();
       var ids = [];
       Ext.Array.each(data,function(record){
        ids.push(record.get('name'));
       })
       //2.後臺操做(delet)
       Ext.Ajax.request({
        url:'/extjs/extjs!deleteData.action',
        params:{ids:ids.join(",")},
        method:'POST',
        timeout:2000,
        success:function(response,opts){
         Ext.Array.each(data,function(record){
          st.remove(record);
         })
        }
       })
       //3.前端操做DOM進行刪除(ExtJs)
      }
    }
   }
  });
},
views:[
  'List' //必須是文件名稱
],
stores :[
  "Users" //
],
models :[
  "User" //這個就是store裏面引用的model，所在js文件的名字，保持和定義model的類名同樣。eg:AM.model.User
         //（這個主要是給store層用的，當store在當前緩存中找不到指定命名空間定義的model時，再去加載User.js文件，
         //再根據文件內容初始化定義model。若是緩存中已經有了model的定義，其實這個是能夠不要的。）
      //一樣views、store均可以經過各類各樣的工廠生成，來去掉。
]
});

（3）model、store：它們倆主要作爲模型數據層。主要是給view層提供數據展現的。

//User數據集合
Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
model: 'AM.model.User',
storeId: 's_user',
proxy:{
     type:'ajax',
     url:'/extjs/extjs!getUserList.action',
     reader: {
         type: 'json',
         root: 'topics'
     },writer:{
   type:'json'
  }
},
autoLoad: true //很關鍵
});

（4）view：這一層主要負責頁面展現，也是確確實實能看見的一層。

<SPAN style="COLOR: #008000">Ext.define("AM.view.List",{
extend:'Ext.grid.Panel',
title : 'Grid Demo',//標題
alias: 'widget.userlist',//別名定義
frame : true,//面板渲染
width : 600,
height: 280,
columns : [ //列模式
    {text:"Name",dataIndex:'name',width:100},
    {text:"age",dataIndex:'age',width:100},
    {text:"email",dataIndex:'email',width:350,
     field:{
      xtype:'textfield',
      allowBlank:false
     }
    }
],
tbar :[
    {xtype:'button',text:'添加',iconCls:'table_add'},
    {xtype:'button',id:'delete',text:'刪除',iconCls:'table_remove'},
    {xtype:'button',text:'修改',iconCls:'table_edit'},
    {xtype:'button',text:'查看',iconCls:'table_comm'}
],
dockedItems :[{
    xtype:'pagingtoolbar',
    store:'Users',
    dock:'bottom',
    displayInfo:true
}],
plugins:[
    Ext.create("Ext.grid.plugin.CellEditing",{
     clicksToEdit : 2
    })
],
selType:'checkboxmodel',//設定選擇模式
multiSelect:true,//運行多選
store : 'Users',
initComponent:function(){
  this.callParent(arguments);
}
});

</SPAN>

Ext事件機制、AJax以及Ext經常使用類

1. Ext事件機制

（1）事件的3中綁定方式

HTML/DHTML

DOM

EXTJS

（2）Ext.util.Observable 事件的基類

它爲全部支持事件機制的extjs組建提供事件的支持。

若是咱們本身建立新的組建須要有時間的支持那麼咱們就繼承它。

事件的分類：

標準事件[鍵盤按鈕按下,鼠標的單擊雙擊,滑過滑動]。

業務事件[當面板收起的時候觸發,當組建被銷燬的時候觸發,當每個對象的屬數值不爲空的時候觸發]。

（3）addManagedListener 收管制的監聽

它是由調用的組建管理的,當組建執行了銷燬命令的時候全部被組建管制的事件所有銷燬。

（4）relayEvents 事件的分發和傳播(控制實現事件在不一樣空間或對象內的傳播)

好比說孩子喝完三鹿就去醫院呀,老爸就要帶着去醫院

（5）事件對象Ext.EventObject

不是一個單例,不能被直接new出來,他會存活早事件處理的函數中

（6）事件管理器Ext.EventManager

它能夠更方便的爲頁面元素綁定事件處理函數

方法:addListener 爲元素增減事件

2. Ext中的Ajax是 Ext.data.Connection的一個子類，提供了用簡單的方式進行Ajax的功能實現

（1）主要方法:

abort : 終止一個沒有完成Ajax請求

isLoading : 判斷指定的Ajax請求是否是正在運行

paresStatus : 返回請求響應的代碼

request : 發送服務器請求

//json格式的數據
var jsondata = "{id:'01',name:'uspcat.com','age':26,email:'yunfengcheng2008@126.com'}";
//xml格式的數據
var xmldata = "<user><name>mlmlml</name><age>19</age></user>";
//構建Ext的Ajax請求
Ext.Ajax.request({
url : 'person.jsp',
method : 'POST',
timeout :3000,

//請求的參數值
params:{id:'01'},

//能夠提交form表單，只須要寫表單的ID
form:"myform",

//下面是兩種不一樣格式的請求參數
jsonData:jsondata,
xmlData：xmldata,

//一些操做的函數，第一個爲響應的值，第二個參數是請求的參數值
success :function(response , options){
alert(eval(response.responseText)[0].name);
},
failure :function(response , options){
alert(response.responseText+" "+options)
}
});

（2）Ext.ElementLoader:方便咱們從新構建頁面

load方法

startAutoRefresh 方法

//get經過dom元素的id方式得到的是元素的對象
//getCmp經過定義對象ID的方式得到的是定義的對象，而不是簡簡單單的元素了
//getDom經過dom元素的id方式得到的是dom元素
var time = Ext.get("time").getLoader();

//ajax經常使用的局部改變元素的值
time.load({
url:'/extjs/extjs!getTime.action',
renderer:function(loader,response,request){
  var time = response.responseText;
  Ext.getDom("time").value = time;
}
});
//給元素設置定時的axja請求方式
i.startAutoRefresh(1000,{
url:'/extjs/extjs!getI.action',
renderer:function(loader,response,request){
  var i = response.responseText;
  Ext.getDom("i").value = i;
}
});

3. Ext以及core包下面的Domhelper、Element類。

（1）Ext.core.Element

API解釋

他是組建和控件的基礎

他對一個DOM對象的封裝(Document Object Model)

a、如何獲得Element

Ext.core.Element.fly(String/HTMLElement el, [String named] ) : Element

Ext.get(Mixed el) : Element

b、Element 相關方法

addClsOnClick( String className ) : Ext.core.Element。

addClsOnOver( String className ) : Ext.core.Element。

addKeyMap( Object config ) : Ext.util.KeyMap。

addKeyListener( Number/Array/Object/String key, Function fn, [Object scope] ) : Ext.util.KeyMap。

appendChild( String/HTMLElement/Array/Element/CompositeElement el ) : Ext.core.Element

createChild( Object config, [HTMLElement insertBefore], [Boolean returnDom] ) : Ext.core.Element。

（2）Ext.core.DomHelper

API解釋

他能夠很容易的操做頁面的HTML.和DOM元素

append( Mixed el, Object/String o, [Boolean returnElement] ) : HTMLElement/Ext.core.Element--------追加一個孩子。

applyStyles---爲元素添加樣式 eg：Ext.core.DomHelper.applyStyles(Ext.get("p1"),"color:red");

//下面兩個是被當作兄弟追加的

insertAfter( Mixed el, Object o, [Boolean returnElement] ) :

insertBefore( Mixed el, Object/String o, [Boolean returnElement] ) :

//建立dom結構，經過給的標籤字符串

createDom( Object/String o ) : HTMLElement

eg：var html = Ext.core.DomHelper.createDom("<h1>hello</h1>");

（3）Ext

//方法是執行在文件加載完以後

onReady( Function fn, Object scope, Boolean withDomReady, Object options ) : void

get()//不在多說

query( String path, [Node root] ) : Array

http://www.w3school.com.cn/xpath/xpath_axes.asp

語法看 Ext.DomQuery

getCmp( String id ) : void---返回組建管理器管理的ID組件

isEmpty( Mixed value, [Boolean allowEmptyString] ) : Boolean

namespace( String namespace1, String namespace2, String etc ) : Object

each( Array/NodeList/Mixed iterable, Function fn, Object scope, Boolean reverse ) : Boolean

apply( Object object, Object config, Object defaults ) : Object

encode( Mixed o ) : String

select( String/Array selector, [Boolean unique], [HTMLElement/String root] )

typeOf( Mixed value ) :判斷參數是一個什麼樣的類型，返回的是字符串，eg：string、function

//這個是直接到頁面中得到元素的對象
var div01 = Ext.core.Element.fly("div01");
//鼠標滑過的時候增長一個樣式滑出的時候移除樣式,值是樣式的名稱
div01.addClsOnOver("divC");
//這個是直接到Ext.ComponentManagerMap中拿，沒有的話，就用第一個到頁面中拿，再返回
var input01 = Ext.get("input01");

var fn1 = function(){
alert("單擊B按鈕調用這個函數")
}
//給一個輸入框添加鍵盤B鍵響應功能
//key是你要觸發的那個鍵，ctrl是否須要與ctrl鍵結合，fn是觸發函數
input01.addKeyMap({key:Ext.EventObject.B,ctrl:false,fn:fn1,scope:input01});
//和上面一本同樣，只是添加更加複雜的，處理起來更加方便
/*第一個觸發條件的參數是一個對象(條件能夠進行組合):
{key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}*/
//第二個是觸發函數fn
input01.addKeyListener({key:Ext.EventObject.X,ctrl:true},function(){
alert("單擊ctrl+x")
},input01);

function createChild(){
var el = document.createElement("h5");
el.appendChild(document.createTextNode("我是被追加的"));
return el;
}
Ext.get("div02").appendChild(createChild());
//經過構造對象，來建立DOM
Ext.getBody().createChild({
tag:'li',
id:'item1',
html:'我是第一個個節點'
});

3. ExtJS4.0中util包裏面的一些工具類用法。

（1）.Ext.util.CSS

Ext.util.CSS.createStyleSheet(".c{color:red}","red");

建立一個樣式表，相似於你在css文件裏面定義的內容。

Ext.get("d1").addClsOnOver("c");

在鼠標滑過期，動態的給某個元素對象的class賦值爲剛剛定義的名爲c樣式表。

Ext.util.CSS.getRule(".c",true);

得到當前的樣式的對象，能夠從這個對象得到一些你須要的參數。

Ext.util.CSS.swapStyleSheet("sheet1","1.css");第一個參數是當前引用樣式的ID，第二個是也是的URL路勁

動態的切換，你所引用的樣式表。（即假如你還有一個樣式表2.css，裏面1.css定義的樣式名稱同樣，這時你能夠用這個函數Ext.util.CSS.swapStyleSheet("sheet2","2.css")把目前引用1.css切換成2.css。）

通常用於不一樣風格的樣式切換。

注意ID惟一。

Ext.util.CSS.removeStyleSheet("red");

移除當前，頁面已經定義了的樣式，傳入樣式的ID便可。

Ext.util.CSS.updateRule(".c","color","#990055");

更新某個已經定義了樣式中的某個屬性的值。

（2）.Ext.util.ClickRepeater click的轉發器是Ext.util.Observable的子類

Ext.onReady(function(){
//控制元素在指定時間內被單擊(當前元素沒有數失去焦點)
var cl = new Ext.util.ClickRepeater(Ext.get("b4"),{
  delay:3000,//首次單擊時候的間隔事件
  interval:4000,//發生首次重複事件調用以後每一次事件的相隔時間
  stopDefault:true,//中止這個el上得默認單擊事件
  handler:function(){
   alert("單擊我");
  }
});
//第一次單擊立刻會觸發事件若是不去點擊其餘的元素那麼3秒或就會自定執行第二次
//一或會以4秒的間隔執行相應的程序
})

3）.Ext.util.DelayedTask 代替setTimeout

（4）.Ext.util.Format 格式化的公共類

用於一些字符串經常使用操做、日期以及小數的格式化等。

（5）.Ext.util.MixedCollection 集合類

強大之處在於它同時能夠存放各工種各樣的對象。而且提供不少操做集合裏對象的方法。

（6）.Ext.util.TaskRunner 模擬線程控制

模擬多線程的實現。

Ext.onReady(function(){
var runner = new Ext.util.TaskRunner();
var task = {
  run:function(){
   Ext.getDom("t1").value = Ext.util.Format.date(new Date(),"Y-m-d-s");
  },
  interval:1000
}
runner.start(task);
Ext.get("b6").on("click",function(){

  runner.stop(task);
})
})

Ext4.0新特性以及經常使用數據處理功能

1. extjs4.0對原生JavaScript功能進行了擴展（API中的Utilities模塊中的NativeExtensions）

    Utilities：經常使用的一些工具處理類
    Native Extensions
       Ext.Array
       Ext.Number
       Ext.Object
       Ext.String
       Ext.JSON
       Ext.Date
       Ext.Function

具體擴展了那些，請參照具體的API說明，擴展的原理eg：

var Person = {name:'yfc',age:26};
    //alert(Person['name']);
    //extjs4.0提供getKey的函數
    //alert(Ext.Object.getKey(Person,'yfc'));
    Object.prototype.getValue = function(key,defValue){
        if(this[key]){
            return this[key];
        }else{
            return defValue;
        }
    }
alert(Person.getValue("email","pcat@126.com"));
//因爲給Object的原型加上了一個getValue的函數，這樣全部的對象（都繼承Object）默認都會擁有這個函數。

2. 事件機制與新特性

（1）給對象加事件：

Ext.get("元素ID").on("click",function(){
//函數處理部分
});

（2）新特性：create與define（extend 、requires、config、mixins、alias以及statics ）。

create：在ExtJs4.0中你能夠經過new方式也能夠用create的方式獲得一個對象的實例，在4.0版本中建議用create的方式來建立實例，這樣ExtJS會對建立的實例進行統一管理。

//create第一個參數爲類路徑，第二個參數爲該類的一些初始化參數值（以對象的形式傳遞）
var win = Ext.create('Ext.window.Window',{
     width:400,
     height:300,
     title:'uspcat'
       });

win.show();

alias：別名的做用，能夠把一個對象的內部函數暴漏處理啊，給其餘對象直接調用。eg：

var o = {
say : function(){
alert(11111);
}
}

//經過o.say()調用函數

var fn = Ext.Function.alias(o,'say');
fn();//經過別名的方式咱們就能夠直接調用fn()等於o.say()。

define：是用來定義一個類的，eg：

//create第一個參數是類的全路徑，第二個參數則是類的內容
Ext.define('Bmsys.ml.Window', {
extend:'Ext.window.Window',
        title: 'Window',
        closeAction: 'hide',
        width: 380,
        height: 300,
        resizable: false,
        modal: true,
        //定義一些本身的擴展參數
        myTitile: 'myWindow',
        setTitle: function(){
              this.title = this.myTitle;
        }

        //初始化的方法(相似Java中的構造方法)
        initComponent: function(){
              this.setTitle();
              this.callParent(arguments);
        }
 });

var win = Ext.create('Bmsys.ml.Window',{
titile: 'youWindow';
}
);

win.show();//此時建立出來窗體的標題是myWindow，說明建立時，傳入的初始化參數比構造器先執行。

注意：屬性只能在define時定義，不能經過win.myHeight = function(){...}添加屬性。

requires: JS的異步加載（按需加載），解決了網絡js文件大而形成頁面打開慢得問題，只有當成須要用到這個類時Ext纔去到後臺加載包含這個類的js文件；在這裏就要，要求咱們在寫js類的時候要儘可能的模塊化，一個類就是一個js文件，並且類名與js文件名一致，命名空間定義規範。

//這時候要啓用自動加載
Ext.Loader.setConfig({
enabled:true,
paths:{
myApp:'js/Bmsys/ml' //js文件相對路徑，須要與命名空間保持一致
}
});

//這時候只要保證Window.js放在js/Bmsys/ml這個目錄下命名空間爲Bmsys.ml.Window就能夠了。
//這時就不須要在JSP文件中引入Window.js,等到下面的程序被執行時，纔會根據命名空間去到後臺加載Window.js。
//原理就是經過命名空間與文件路徑，拼接好後經過寫入<script>標籤的方式加載。
var win = Ext.create('Bmsys.ml.Window',{
                   titile: 'youWindow',
                   requires: ['Bmsys.ml.Window']
             }
).show();

config: 這個屬性就是把你定義類的屬性自動的加上get、set方法，省去本身去寫的麻煩事。
Ext.define('Bmsys.ml.Window', {
extend:'Ext.window.Window',
        title: 'Window',
        width: 380,
        height: 300,
        //定義一些本身的擴展參數
        myTitile: 'myWindow',
        config: {
              myHeight : 800
        }
});

var win = Ext.create('Bmsys.ml.Window',{});

alert(win.getMyTitle());//報錯，沒有定義getMyTitle函數
alert(win.getMyHeight());//正常彈出值爲800

//放在config裏面定義的屬性，Ext會自動給這個屬性加上get、set方法。
- mixins：類的混合（多繼承實現），由於咱們在用define定義類的時候，extend只能繼承一個類。爲了擁有其它類定義好的方法及功能，咱們能夠經過類的混合來實現。
Ext.define("say",{
cansay:function(){
  alert("hello");
}
})
Ext.define("sing",{
sing:function(){
  alert("sing hello 123");
}
})

//經過類的混合，就能夠輕鬆擁有上面兩個類裏面的函數。
Ext.define('user',{
mixins :{
  say : 'say',
  sing: 'sing'
}
});

var u = Ext.create("user",{});
u.cansay();//say類裏面的方法
u.sing();//sing類裏面的方法
- static：相似java中靜態，咱們能夠定義一些靜態的屬性以及方法，經過類名'.'的方式來訪問。
Ext.define('Computer', {
     statics: {
         factory: function(brand) {
             // 'this' in static methods refer to the class itself
             return new this(brand);
         }
     },
     constructor: function() { ... }
});
//直接經過類名'.'的方式訪問靜態方法
var dellComputer = Computer.factory('Dell');

3. 數據模型model（MVC中的M層）

數據模型對真實世界中對事物在系統中的抽象，extjs4.0中的mode至關於DB中的table 或 JAVA 中的Class。

（1）model的幾種建立以及實例的方法。

//咱們利用Ext.define來建立咱們的模型類
//DB table person(name,age,email)
Ext.define("person",{
extend:"Ext.data.Model",
fields:[
  {name:'name',type:'auto'},
  {name:'age',type:'int'},
  {name:'email',type:'auto'}
]
});
//定義的時候，不須要每次寫extend:"Ext.data.Model"
Ext.regModel("user",{
fields:[
  {name:'name',type:'auto'},
  {name:'age',type:'int'},
  {name:'email',type:'auto'}
]
});
//實例化咱們的person類
//1.new關鍵字
var p = new person({
name:'uspcat.com',
age:26,
email:'yunfengcheng2008@126.com'
});
//alert(p.get('name'));
var p1 = Ext.create("person",{
name:'uspcat.com',
age:26,
email:'yunfengcheng2008@126.com'
});
//alert(p1.get('age'));
var p2 = Ext.ModelMgr.create({
name:'uspcat.com',
age:26,
email:'yunfengcheng2008@126.com'
},'person');
alert(p2.get('email'));

//實例不能直接經過getName獲得類名，由於這個方法是類的 class object.getClass.getName
//alert(p2.getName());

//經過類.getName能夠得到類名，由於person是模型類的定義，而不是實例
alert(person.getName());
（2）model模型Validations以及經過修改原始類來實現自定義驗證器。

//在校驗以前，修改原始類裏屬性的默認值
Ext.data.validations.lengthMessage = "錯誤的長度";

Ext.onReady(function(){
//經過apply方法來在原始的校驗器類上擴展咱們自定義驗證機制的的一個新的驗證方法
Ext.apply(Ext.data.validations,{
     //自定義的校驗類型函數
  age:function(config, value){
   var min = config.min;
   var max = config.max;
   if(min <= value && value<=max){
    return true;
   }else{
    this.ageMessage = this.ageMessage+"他的範圍應該是["+min+"~"+max+"]";
    return false;
   }
  },
  ageMessage:'age數據出現的了錯誤'
});
//定義一個帶有校驗的模型類
Ext.define("person",{
  extend:"Ext.data.Model",
  fields:[
   {name:'name',type:'auto'},
   {name:'age',type:'int'},
   {name:'email',type:'auto'}
  ],
  validations:[
      //type的值就是Ext.data.validations裏方法名稱
   //field是你要校驗字段名
   //field後面的參數就是名稱等於type值的函數的參數。
   {type:"length",field:"name",min:2,max:6},
   {type:'age',field:"age",min:0,max:150}
  ]
});
var p1 = Ext.create("person",{
  name:'uspcat.com',
  age:-26,
  email:'yunfengcheng2008@126.com'
});

//經過validate()能夠獲得數據校驗的錯誤集合
//每一個error裏面含有兩個屬性(field---校驗字段的名,message---校驗函數返回的錯誤信息)
var errors = p1.validate();
var errorInfo = [];
errors.each(function(v){
  errorInfo.push(v.field+" "+v.message);
});
alert(errorInfo.join("\n"));
});

注意：自定義的校驗器，你能夠經過利用apply方法來爲原始的類增長，也能夠經過繼承的方式實現。

（3）數據代理proxy：就是經過與後臺的交互來完成數據模型，數據填充的服務類。

Ext.define("person",{
extend:"Ext.data.Model",
fields:[
  {name:'name',type:'auto'},
  {name:'age',type:'int'},
  {name:'email',type:'auto'}
],
//經過代理從後臺獲取數據（數據要與model的fields裏面的字段相對應）
proxy:{
  type:'ajax',
   url:'person.jsp'
}
});
var p = Ext.ModelManager.getModel("person");
//經過load方法來觸發proxy加載數據
p.load(1, {
scope: this,
//record.data就是加載進來的一個數據實例對象
success: function(record, operation) {
  alert(record.data.name)
}
});

（4）Molde的一對多和多對一關係。

//類老師
Ext.regModel("teacher",{
fideld:[
  {name:'teacherId',type:"int"},
  {name:'name',type:"auto"}
],
//創建老師與學生的1對多關係
hasMany:{
      //所關聯的模型
   model: 'student',
   name : 'getStudent',
   //關係字段
   filterProperty: 'teacher_Id'
}
});
//學生
Ext.regModel("student",{
fideld:[
  {name:'studentId',type:"int"},
  {name:'name',type:"auto"},
  {name:"teacher_Id",type:'int'}
]
});
//假設t是老師的一個實例，就能夠經過t.students 獲得子類student的一個store數據集合

3. 數據代理Proxy

    數據代理proxy是進行數據讀寫的主要途徑,經過代理操做數據進行CRUD。

CRUD的每一步操做都會獲得惟一的Ext.data.Operation實例，它包含了全部的請求參數。經過構造Ext.data.Operation來傳入請求參數。

（1）數據代理proxy目錄結構

Ext.data.proxy.Proxy 代理類的根類(它分爲客戶端(Client)代理和服務器代理(Server))

A、Ext.data.proxy.Client 客戶端代理

Ext.data.proxy.Memory 普通的內存代理。

Ext.data.proxy.WebStorage 瀏覽器客戶端存儲代理（cookie操做）。

Ext.data.proxy.SessionStorage 瀏覽器級別代理，瀏覽器關閉數據消失。

Ext.data.proxy.LocalStorage 本地化的級別代理，數據能夠保存在瀏覽器文件裏，瀏覽器關閉後，下次打開還在(不能誇瀏覽器)。

B、Ext.data.proxy.Server 服務器端代理

Ext.data.proxy.Ajax 異步加載的方式。

Ext.data.proxy.Rest 一種特使的Ajax。

Ext.data.proxy.JsonP 跨域交互的代理（請求的數據url不在同域內），跨域是有嚴重的安全隱患的，extjs的跨域也是須要服務器端坐相應的配合。

Ext.data.proxy.Direct 命令.

4. 工做在Proxy下的讀寫器

（1）Reader : 主要用於將proxy數據代理讀取的數據按照不一樣的規則進行解析,講解析好的數據保存到Model中

結構圖

Ext.data.reader.Reader 讀取器的根類

  Ext.data.reader.Json JSON格式的讀取器

  Ext.data.reader.Array 擴展JSON的Array讀取器

  Ext.data.reader.Xml XML格式的讀取器

var userData = {
//讀寫器默認讀取的記錄總數的屬性
//total : 200,

//採用咱們自定義的變量來標識總條數，這時後須要在讀寫器中配置total所對應咱們自定義的變量
count:250,
user:[{auditor:'yunfengcheng',info:{
  userID:'1',
  name:'uspcat.com',
  orders:[
   {id:'001',name:'pen'},
   {id:'002',name:'book'}
  ]
}}]
};
//model
Ext.regModel("user",{
fields:[
  {name:'userID',type:'string'},
  {name:'name',type:'string'}
],
//配置一對多的關係
hasMany: {model: 'order'}
});
Ext.regModel("order",{
fields:[
  {name:'id',type:'string'},
  {name:'name',type:'string'}
],
//配置多對一的關係
belongsTo: {type: 'belongsTo', model: 'user'}
});
var mproxy = Ext.create("Ext.data.proxy.Memory",{
model:'user',
data:userData,
//讀寫時的參數配置
reader:{
  type:'json',//讀取的類型（json/xml/array）
  root:'user',//指定讀取開始的根節點
  implicitIncludes:true,//是否級聯讀取關聯的子節點（一對多的關係中體現）
  totalProperty:'count',//配置咱們返回的總條數變量名稱
  record : 'info'//服務器返回的數據可能很複雜,用record能夠篩選出有用的數據信息,裝在帶Model中，其它的參數忽略。
}
});
//用內存代理來讀取數據，其它的方式同樣
mproxy.read(new Ext.data.Operation(),function(result){
var datas = result.resultSet.records;
alert(result.resultSet.total);
Ext.Array.each(datas,function(model){
  alert(model.get('name'));
});
var user = result.resultSet.records[0];
var orders = user.orders();
orders.each(function(order){
  alert(order.get('name'))
});
})

（2）Writer ：把前臺的js對象數據按照不一樣的方式寫到後臺。
結構圖

  Ext.data.writer.Writer

  Ext.data.writer.Json 對象被解釋成JSON的形式傳到後臺

  Ext.data.writer.Xml 對象被解釋成XML的形式傳到後臺

Ext.regModel("person",{
fields:[
  'name','age'
],
proxy :{//在proxy下，你能夠配置reader（讀），一樣也能夠配置writer（寫）
  type:'ajax',
   url:'person.jsp',
  writer:{//配置一些寫的參數
   //type:'json'
   type:'xml' //把js對象以xml的方式，傳入後臺
  }
}
});
Ext.ModelMgr.create({
name:'uspcat.con',
age:1
},'person').save();

5. Store : 是一個存儲數據對象Model的集合緩存,它能夠爲extjs中的可視化組建提供數據源 (GridPanel,ComboBox)等。（在ExtJS中佔有重要的地位，它也屬於Model層）

（1）類結構
Ext.data.AbstractStore

Ext.data.Store 沒有特殊狀況這個類就能夠滿平常的開發了

Ext.data.ArrayStore

Ext.data.DirectStore

  Ext.data.ArrayStore 內置輔助的類

  Ext.data.JsonStroe 內置輔助的類

Ext.data.TreeStore

（2）Ext.data.Store 使用

  參數

autoLoad(Boolean/Object) ：自動加載數據，自動調用load

data(Array) ：內置數據對象的數組，初始化的是就要被裝在

model(Model) ：數據集合相關的模型

fields(Field) ：字段的集合，程序會自動生成對於的Model，這樣咱們就不須要再定義model。

  方法

each( Function f, [Object scope] ) : void 變量數據中的Model

Ext.define("person",{
extend:'Ext.data.Model',
fields:[
  {name:'name'},
  {name:'age'}
],
proxy:{
  type:'memory'
}
})
var s = new Ext.data.Store({
//model:'person',
data:[
  {name:'uspcat.com',age:1},
  {name:'yfc',age:26}
],
//有了fields，咱們就不須要在單獨定義Model而且引用
fields:[
  {name:'name'},
  {name:'age'}
],
//經過data屬性，請偶們已經可以把數據初始化好了
//proxy是動態的區後臺去數據
//proxy:{
// type:'ajax',
// url:'person.jsp'
//}
//autoLoad:true
});
s.load(function(records, operation, success){
//遍歷
Ext.Array.each(records,function(model){
  alert(model.get('name'));
});
//過濾出字段name='yfc'
s.filter('name',"yfc");
s.each(function(model){
  alert(model.get('name'));
});
//經過正則來查找數據集裏面的記錄，返回該記錄的索引
var index = s.find('name','yfc',0,false,true,false);
alert(s.getAt(index));//當前的Model對象
});

EXTJS的基本概念

1. 組件component : 可以以圖形化形式呈現界面的類，其中還能夠分爲容器組件與元件組件。

容器組件:可以包含其它容器或者元件組件的類，其是進行單元化組件開發的基礎
元件組件：能圖形化形式表現一個片面功能的組件，其不只在實現了原有傳統WEB程序的現有組件，並且還擴展了許多實用的組件，如刻度器、日曆、樹形列表等。

2. 類

提供功能的非圖形可形的類，它們爲圖形類提供了有力的支持

按其功能可分爲：數據支持類(Data)、拖放支持類（DD）、佈局支持類（layout）、本地狀態存儲支持類（state）、實用工具類（Util）。

密封類：不能被擴展的類

原型類：擴展了javascript標準類庫中的類

3. 方法

做爲類的功能體現，可以產生改變對象自己產生變化的直接因素

方法按訪問形式可分爲公有方法與私有方法。但因爲javascript從原理上根本不支持這種結構，所以在EXTJS中，私有與公有方法徹底憑藉着用戶自覺，沒有像JAVA那樣的強制性。

4. 事件

由類定義的，而且能夠在類對象自身狀態發生改變的觸發。

只有被定閱的事件纔會有效

若是不須要此事件，應該進行退定，加強程序的執行效率。

5. 配置選項

用以初始化一個EXTJS類對象的手段

注意，配置選項並不必定就是屬性，總算是屬性，也有可能出現屬性返回的類型與你當初指定的配置選項類型不一致的狀況。

6. 屬性

可以在程序運行期間，可以被訪問，用以瞭解當前類對象的狀態。

在實際的編程中，EXTJS的屬性設置，比較差勁，須要經過了解其源代碼，才能瞭解各類實用屬性的用處。

7. 命名空間

可以將編寫好的EXTJS類進行有效組織的手段。

這個也是EXTJS可以稱之爲優秀AJAX框架的特徵之一。

Extjs4佈局layout

posted @ 2013-04-27 18:02 趙雪丹閱讀(19) 評論(0) 編輯

ExtJs4.0 Grid分頁詳解

網上有好多關於Grid分頁的，各種語言都有，但大部分都是一樣的，都只是講了Grid分頁的語法，不多說到如何和後臺的數據庫交互，查出數據，同樣剛接觸Extjs，但願和菜鳥級別的兄弟姐妹們，共同進步。

前臺代碼：

var itemsPerPage = 2;
var store = Ext.create('Ext.data.Store', {
autoLoad: { start: 0, limit: itemsPerPage },
fields: ['AA001', 'AA002', 'AA003', 'AA004', 'AA005', 'AA006', 'AA007'],
pageSize: itemsPerPage,
proxy: {
type: 'ajax',
url: 'HandlerFun.ashx?Type=Support',
reader: {
type: 'json',
root: 'rows',
totalProperty: 'total'
}
}

});

var gridHeight = document.body.clientHeight * 19;

Ext.ClassManager.setAlias('Ext.selection.CheckboxModel', 'selection.checkboxmodel');

var grid = Ext.create('Ext.grid.Panel', {
title: '',
renderTo: "grid",
autoWidth: true,
height: gridHeight,
frame: true,
store: store,
multiSelect: false,
selModel: { selType: 'checkboxmodel' }, //在首列實現checkbox，僅此在首列
columns: [

{ header: '單據類別', width: 100, dataIndex: 'AA001', sortable: true },
{ header: '單據號碼', width: 150, dataIndex: 'AA002', sortable: true },
{ header: '單據日期', width: 80, dataIndex: 'AA003', sortable: true },
{ header: '客戶編號', width: 80, dataIndex: 'AA004', sortable: true },
{ header: '客戶分類', width: 80, dataIndex: 'AA005' },
{ header: '聯絡人', width: 80, dataIndex: 'AA006' }
{ header: '電話號碼', width: 80, dataIndex: 'AA007' }

],
bbar: [
{
xtype: 'pagingtoolbar',
store: store,
displayInfo: true
}
]
});
store.load({ params: { start: 0, limit: 2} });

後臺:

分頁原來和之前其餘的分頁原理都是一樣的，就是當前是第幾頁，然後每一頁顯示多少條記錄，到數據庫中取出來，然後show出來就Ok了！

因為是.net ，在在.ashx文件中，獲取 start 和limit，有人說start是頁，limit是此頁的數目，其實

，int page表明是頁數，page=start/limit+1 //獲取第幾頁

int beginShowCount ,showCount=page*limit-limit+1; //這是當前頁數的起始位置

int endShowCount ,endShowCount=page*limit； //這是當前頁的結束位置

表達可能很差，解釋一下起始位置，假如每頁顯示2條記錄，那就應該讀兩套記錄。那第一頁就是從第一條記錄到第二條記錄，起始就是第一條記錄，結束就是第二條記錄。

數據庫語句 select * from (select row_number() over (order by AA001) as ID,* from dbo.RegalAA) as b where ID between 1 and 5

把 1 換成 beginShowCount ,5換成 endShowCount就能夠了，

JSON對象

private string Dtb2Json(DataTable dtb, int total)
{
JavaScriptSerializer jss = new JavaScriptSerializer();
ArrayList dic = new ArrayList();
foreach (DataRow row in dtb.Rows)
{
Dictionary<string, object> drow = new Dictionary<string, object>();
foreach (DataColumn col in dtb.Columns)
{
drow.Add(col.ColumnName, row[col.ColumnName]);
}
dic.Add(drow);
}
string str = jss.Serialize(dic);
return "{" + "\"total\":" + total + ",\"rows\":" + str + "}";
// return str;
}

這裡的total是整個全部的記錄的總和哦！在前臺totalProerty那不能寫錯！

後臺代碼：

//當前是第幾頁
string start = context.Request["start"];
int currentpage = int.Parse(start);

//每一頁顯示的數目
string limit = context.Request["limit"];
int pagetotal = int.Parse(limit);
DataTable dt = BLL.GetDataToGridSupport(currentpage,pagetotal);//獲取喲顯示的記錄
DataTable dttotal = BLL.GetDataToGridSupport();//獲取總記錄數
int total = dttotal.Rows.Count;//獲取總記錄數

context.Response.Write(Dtb2Json(dt, total));

posted @ 2013-04-27 17:44 趙雪丹閱讀(14) 評論(0) 編輯

Ext Grid表格的自動寬度及高度的實現

但願Ext的表格能自適應外層的div大小，但Ext的Grid構造函數的width、height項不支持100%的設置方式，因此改用如下方式初始化Grid：

width: Ext.get("content").getWidth(),
height: Ext.get("content").getHeight(),

<div id="content">
    <div id="grid-example"></div>
<div>

#content {
width: 100%;
height: 100%;
}

完整js代碼：

// create the Grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {id:'id',header: "序號", width: 50, sortable: true, renderer: keyChange, dataIndex: 'id'},
            {header: "數據表表名", width: 100, sortable: true, renderer: hrefChange, dataIndex: 'tableAlias'},
            {header: "物理表名", width: 100, sortable: true, dataIndex: 'tableName'},
            {header: "類型", width: 75, sortable: true, dataIndex: 'type'}
        ],
        stripeRows: true,
        width: Ext.get("content").getWidth(),
        height: Ext.get("content").getHeight(),
addClass:"grid",
tbar: [{
            text: '新增模版',
            handler : function(){
window.location.href = 'templateDefineList4.html';
            }
            },{
            text: '刪除模版',
            handler : function(){

            }
        }],
        bbar: new Ext.PagingToolbar({
            pageSize: 15,
            store: store,
            displayInfo: true,
            displayMsg: '當前顯示記錄 {0} - {1} 總條數 {2}',
            emptyMsg: '無記錄'
        })
    });

posted @ 2013-04-27 17:41 趙雪丹閱讀(13) 評論(0) 編輯

ExtJS 4.0 改善Ext.grid.plugin.RowEditing (重構,v1.4版本,2011-09-11)

Ext4.0 自帶的Ext.ux.RowEditing還不夠完善,隨手寫個ux來用下,

v1.4 2011-09-12 變動內容:

1.重構,修復很多bug以及合併/新增一些配置項(具體看附件中的文檔)

2.支持jsduck生成文檔 (https://github.com/senchalabs/jsduck)

v1.0 2011.04.27 變動內容:
1.增長canceledit事件
2.增長startAdd方法,方便crud表格的添加操做
3.添加點擊取消按鈕後,自動重置或刪除記錄的功能

v1.1 2011.05.03 變動內容:
1.startAdd方法增長position參數,修復autoSync設值的bug
2.配置參數removePhantomsOnCancel更名爲autoRecoverOnCancel
3.startEdit前先調用cancelEdit函數,以便正確的恢復現場

v1.2 2011.05.04 變動內容:
1.包名改成Ext.ux.grid.plugin
2.添加配置參數hideTooltipOnAdd
3.判斷是否刪除新增記錄的邏輯優化
4.代碼風格等方面的改進

v1.3 2011.05.22 變動內容:

1. 設置clicksToEdit爲0,可取消雙擊/單擊事件觸發編輯

2. 提供field默認配置,只需給column添加一個fieldType

Js代碼

{
text: 'Enable',
dataIndex: 'enable',
width: 80,
renderer: function(v){return v?'Enable':'Disable'},
fieldType: 'checkboxfield',
field: {
boxLabel: 'Enable'
}
}

代碼以下:

Js代碼

/**
* @class Ext.ux.grid.plugin.RowEditing
* @extends Ext.grid.plugin.RowEditing
* @xtype ux.rowediting
*
* 對Ext原有的RowEditing插件增長新功能.<br/>
* Improve Ext.ux.grid.plugin.RowEditing,add some usefull features.<br/>
*
* @author tz <atian25@qq.com> <br/>
* @date 2011-08-20 <br/>
* @version 1.4 <br/>
* @blog http://atian25.iteye.com <br/>
* @forum http://www.sencha.com/forum/showthread.php?131482-Ext.ux.RowEditing-add-some-usefull-features<br/>
*
*/
Ext.define('Ext.ux.grid.plugin.RowEditing', {
extend: 'Ext.grid.plugin.RowEditing',
alias: 'plugin.ux.rowediting',
/**
* 是否添加記錄在當前位置<br/>
* whether add record at current rowIndex.<br/>
* see {@link #cfg-addPosition}
* @cfg {Boolean}
*/
addInPlace: false,
/**
* 添加記錄的具體位置 <br/>
* * 當addInPlace爲true時,該參數<=0表明當前位置以前,不然表明當前位置以後<br/>
* * 當addInPlace爲false時,表明具體的rowIndex,-1則爲最後<br/>
* Special rowIndex of added record.<br/>
* * when {@link #cfg-addInPlace} is true, this cfg means before(<=0) or after(>0) current rowIndex.<br/>
* * when {@link #cfg-addInPlace} is false, this cfg means the exact rowIndex.-1 means at the end.
* @cfg {Number}
*/
addPosition: 0,
/**
* 是否點擊觸發事件,0表明不觸發,1表明單擊,2表明雙擊,默認爲雙擊.<br/>
* The number of clicks on a grid required to display the editor (disable:0,click:1,dblclick:2)
* @cfg {Number}
*/
clicksToEdit:2,
/**
* 是否在取消編輯的時候自動刪除添加的記錄
* if true, auto remove phantom record on cancel,default is true.
* @cfg {Boolean}
*/
autoRecoverOnCancel: true,
/**
* adding flag
* @private
* @type Boolean
*/
adding: false,
autoCancel:true,
/**
* when add record, hide error tooltip for the first time
* @private
* @type Boolean
*/
hideTooltipOnAdd: true,
/**
* register canceledit event && relay canceledit event to grid
* @param {Ext.grid.Panel} grid
* @override
* @private
*/
init:function(grid){
var me = this;
/**
* 取消編輯事件.<br/>
* Fires canceledit event.And will be relayEvents to Grid.<br/>
* @see {@link Ext.ux.grid.RowActions#event-beforeaction} <br/>
* @event canceledit
* @param {Object} context
*/
me.addEvents('canceledit');
me.callParent(arguments);
grid.addEvents('canceledit');
grid.relayEvents(me, ['canceledit']);
},
/**
* 提供默認的Editor配置
* @example
* {header:'手機',dataIndex:'phone',fieldType:'numberfield',field:{allowBlank:true}}
* provide default field config
* @param {String} fieldType 可選值:numberfield,checkboxfield,passwordField
* @return {Object}
* @protected
*/
getFieldCfg: function(fieldType){
switch(fieldType){
case 'passwordField':
return {
xtype: 'textfield',
inputType: 'password',
allowBlank:false
}
case 'numberfield':
return {
xtype: 'numberfield',
hideTrigger: true,
keyNavEnabled: false,
mouseWheelEnabled: false,
allowBlank:false
}
case 'checkboxfield':
return {
xtype: 'checkboxfield',
inputValue: 'true',
uncheckedValue: 'false'
}
}
},
/**
* Help to config field,just giving a fieldType and field as additional cfg.
* see {@link #getFieldCfg}
* @private
* @override
*/
getEditor: function() {
var me = this;
if (!me.editor) {
Ext.each(me.grid.headerCt.getGridColumns(),function(item,index,allItems){
if(item.fieldType){
item.field = Ext.applyIf(item.field||{},this.getFieldCfg(item.fieldType))
}
},this)
// keep a reference for custom editor..
me.editor = me.initEditor();
}
me.editor.editingPlugin = me
return me.editor;
},
/**
* if clicksToEdit===0 then mun the click/dblclick event
* @private
* @override
*/
initEditTriggers: function(){
var me = this
var clickEvent = me.clicksToEdit === 1 ? 'click' : 'dblclick'
me.callParent(arguments);
if(me.clicksToEdit === 0){
me.mun(me.view, 'cell' + clickEvent, me.startEditByClick, me);
}
},
/**
* 添加記錄
* add a record and start edit it (will not sync store)
* @param {Model/Object} data Data to initialize the Model's fields with <br/>
* @param {Object} config see {@link #cfg-addPosition}.
*/
startAdd: function(data,config){
var me = this;
var cfg = Ext.apply({
addInPlace: this.addInPlace,
addPosition: this.addPosition,
colIndex: 0
},config)
//find the position
var position;
if(cfg.addInPlace){
var selected = me.grid.getSelectionModel().getSelection()
if(selected && selected.length>0){
position = me.grid.store.indexOf(selected[0])
console.log('a',position)
position += (cfg.addPosition<=0) ? 0: 1
}else{
position = 0
}
}else{
position = (cfg.addPosition==-1 ? me.grid.store.getCount() : cfg.addPosition) || 0
}
var record = data.isModel ? data : me.grid.store.model.create(data);
var autoSync = me.grid.store.autoSync;
me.grid.store.autoSync = false;
me.grid.store.insert(position, record);
me.grid.store.autoSync = autoSync;
me.adding = true
me.startEdit(position,cfg.colIndex);
//since autoCancel:true dont work for me
if(me.hideTooltipOnAdd && me.getEditor().hideToolTip){
me.getEditor().hideToolTip()
}
},
/**
* 編輯以前,自動取消編輯
* Modify: if is editing, cancel first.
* @private
* @override
*/
startEdit: function(record, columnHeader) {
var me = this;
if(me.editing){
me.cancelEdit();
}
me.callParent(arguments);
},
/**
* 修改adding的狀態值
* Modify: set adding=false
* @private
* @override
*/
completeEdit: function() {
var me = this;
if (me.editing && me.validateEdit()) {
me.editing = false;
me.fireEvent('edit', me.context);
}
me.adding = false
},
/**
* 取消編輯
* 1.fireEvent 'canceledit'
* 2.when autoRecoverOnCancel is true, if record is phantom then remove it
* @private
* @override
*/
cancelEdit: function(){
var me = this;
if (me.editing) {
me.getEditor().cancelEdit();
me.editing = false;
me.fireEvent('canceledit', me.context);
if (me.autoRecoverOnCancel){
if(me.adding){
me.context.record.store.remove(me.context.record);
me.adding = false
}else{
//不須要reject,由於Editor沒有更改record.
//me.context.record.reject()
}
}
}
}
})
//ext-lang-zh_CN
if (Ext.grid.RowEditor) {
Ext.apply(Ext.grid.RowEditor.prototype, {
saveBtnText: '保存',
cancelBtnText: '取消',
errorsText: '錯誤信息',
dirtyText: '已修改,你須要提交或取消變動'
});
}

posted @ 2013-04-27 17:37 趙雪丹閱讀(71) 評論(0) 編輯

Ext.form.TextField基本用法

var textfieldName = new Ext.form.TextField
        ({
              id:"textfieldName",

              allowBlank:false,//默認是true,若是是false,就是不容許空

              //假如不爲空時，定義提示信息　默認的提示信息是：This field is required
              //要使提示內容出現，須要添加 Ext.QuickTips.init();
              blankText:"請輸入數據",

              disabled:false,//默認是false

              emptyText:"請正確輸入數據",//默認是null

              fieldLabel:"用戶名稱",//默認是""

              height:"auto",//默認是auto

              hidden:false,//默認是false

              hideLabel:false,//默認是false

              hideMode:"offsets",//默認display,能夠取值：display，offsets，visibility

              inputType:"text",//輸入類型這個很重要，能夠是radio, text, password, file 默認是text

              invalidText:"invalidText：只可以輸入數字",//默認是：The value in this field is invalid

              maxLength:100,//可以輸入的內容的最大長度

              maxLengthText:"輸入內容太長了",//超出最大長度的設置信息

              minLength:2,//可以輸入的內容的最小長度

              maxLengthText:"輸入內容過短了",//沒有達到最小長度的設置信息

              readOnly:false,//內容是否只讀，默認false

              regex:/^\d$/, //正則表達式　這裏假設只容許輸入數字　若是輸入的不是數字　就會出現下面定義的提示信息

              regexText:"regexText：只可以輸入數字", //定義不符合正則表達式的提示信息

              validateOnBlur:true,//默認是true,失去焦點時驗證

              validationDelay:300,//默認是250,驗證延遲時間,毫秒數

              validationEvent:"click", //驗證事件　默認是keyup　能夠是String/Boolean

              //自定義的驗證函數　當輸入的數據不符合正則表達式的要求時，就會執行這個函數
              validator:function(){Ext.Msg.alert("提示信息","只可以輸入數字");},

              value:"",//自定義的信息　默認是：undefined

              //x:number,y:number,在容器中的x,y座標

              width:"auto",//默認是auto

              renderTo:"Bind_TextField"

        });

posted @ 2013-04-27 17:35 趙雪丹閱讀(9) 評論(0) 編輯

Extjs4---用RowEditing對數據進行增長，修改

給grid添加RowEditing:
[javascript]
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
            pluginId:'rowEditing',
            saveBtnText: '保存',
            cancelBtnText: "取消",
            autoCancel: false,
            clicksToEdit:2<span style="white-space:pre">    </span>//雙擊進行修改
        })

而後在grid裏面配置便可：
[javascript]
plugins: [
rowEditing
],

一、增長：
給「增長」添加點擊事件，點擊時，在store中添加一個新的record，並調用startEdit(0,0)方法，參數表示編輯第一行，也就是剛添加的新行
[javascript]
'center button[id = addContact]':{
                click:function(){
                    //獲得通信錄的store，並添加一個新的空行
                    var contactStore = Ext.getStore('ContactStore');
                    var contactModel = Ext.create('MS.model.Contact',{});
                    contactStore.insert(0,contactModel);
                    //獲得rowEditing添加事件
                    var rowEditing = Ext.getCmp('contactGridpanel').editingPlugin;
                    rowEditing.startEdit(0,0);
                }
            },

而後在輸入信息便可

二、修改：
當點擊「修改」時，找到選擇的列，或者雙擊某列時進行修改
[javascript]
'center button[id = updateContact]':{
                click:function(){

                    //獲得rowEditing添加事件
                    var rowEditing = Ext.getCmp('contactGridpanel').editingPlugin;
                    var data = Ext.getCmp("contactGridpanel").getSelectionModel().getSelection();
                    if(data.length == 0) {
                        Ext.MessageBox.alert(
                                '提示',
                                '請在您要修改的行前面打勾，或者直接雙擊您想修改的行！'
                        );
                    }else{
                        rowEditing.startEdit(data[0].index,0);
                    }
                }
            },

三、保存
無論是添加仍是修改，保存用的事件是grid的edit事件

[javascript]
edit:function(editor,e,eOpts){

                        // "添加" 當id爲空時，表示添加新的聯繫人
                        if(id == ''){

                            //執行操做
                            var myMask = new Ext.LoadMask(Ext.getBody(), {
                                msg: '正在添加，請稍後...',
                                removeMask: true //完成後移除
                            });
                            myMask.show();

                            //獲取uuid
                            var id = UUID.prototype.createUUID();
                            //獲取record
                            var formData = e.record.getData();

                            Ext.Ajax.request({
                                url: 'add',
                                params: {
                                    id:id
                                    //參數
                                },
                                success: function(response){
                                    var result = Ext.decode(response.responseText).result;
                                    if(result.succeed){
                                        e.record.set(id,uuid);

                                        //頁面效果，提交數據
                                        e.record.commit();
                                        //從新排序，防止出現錯位現象
                                        Ext.getStore('ContactStore').sort('id', 'DESC');

                                        //隱藏等待提示框
                                        myMask.hide();


                                        Ext.Msg.show({
                                             title:'操做提示',
                                             msg: result.msg,
                                             buttons: Ext.Msg.YES,
                                             icon: Ext.Msg.WARNING
                                        });

                                    }else{
                                        myMask.hide();
                                        Ext.Msg.show({
                                                 title:'操做提示',
                                                 msg: result.msg,
                                                 buttons: Ext.Msg.YES,
                                                 icon: Ext.Msg.WARNING
                                        });
                                    }

                                }
                            });


                        }else{
                            // "修改" 當id不爲空時，表示修改聯繫人信息

                            var myMask = new Ext.LoadMask(Ext.getBody(), {
                                msg: '正在修改，請稍後...',
                                removeMask: true //完成後移除
                            });
                            myMask.show();

                            var formData = e.record.getData();
                            Ext.Ajax.request({
                                url: 'update',
                                params: {
                                    id:formData.id
                                },
                                success: function(response){
                                    var result = Ext.decode(response.responseText).result;
                                    if(result.succeed){

                                        e.record.commit();
                                        Ext.getStore('ContactStore').sort('id', 'DESC');

                                        //隱藏
                                        myMask.hide();
                                        Ext.Msg.show({
                                             title:'操做提示',
                                             msg: result.msg,
                                             buttons: Ext.Msg.YES,
                                             icon: Ext.Msg.WARNING
                                        });

                                    }else{
                                        myMask.hide();
                                        Ext.Msg.show({
                                             title:'操做提示',
                                             msg: result.msg,
                                             buttons: Ext.Msg.YES,
                                             icon: Ext.Msg.WARNING
                                        });
                                    }
                                }
                            })
                        }
                    }
                }

posted @ 2013-04-27 17:33 趙雪丹閱讀(34) 評論(0) 編輯

Ext蒙板效果

var waitMask = new Ext.LoadMask(Ext.getBody(), { msg: "系統正在處理數據，請稍候..." }); //定義一個
waitMask.show();//show方法顯示
btnGenerate.disable();

Ext.Ajax.request(

{

method: 'POST',

url: Vars.Url,

success: function(response) {

//轉成對象
var obj = Ext.decode(response.responseText);

if (obj.success) {

Twi.Msg.Info(null, "原始記錄單生成成功！");

}

else {

Twi.Msg.Info('操做失敗', obj.message);

}

btnGenerate.enable();

waitMask.hide(); //hide()方法隱藏
},

failure: function(response, action) {

Twi.Msg.Error(null, '提交失敗,系統發生異常，異常類別爲：' + action.failureType);

btnGenerate.enable();

waitMask.hide();//隱藏
},

params:

{

sign: 'GenerateOriginalList',

MgscType: Vars.MgscType,

TaskID: Vars.TaskID,

TestItemID: Vars.TestItemID

}

});

posted @ 2013-04-27 17:30 趙雪丹閱讀(8) 評論(0) 編輯

ext grid數據修改

Grid是Ext框架中一個重要的組成部分。通常創建Grid主要實現數據的增刪改查。創建一個Grid Grid通常有三個主要的內容，ds,cm,GridPanel var ds = new Ext.data.Store(); var cm = new Ext.grid.ColumnModel(); var grid = new Ext.grid.GridPanel(); 若是要頁面載入時，Grid不顯示，事件觸發查詢並創建Grid顯示。很簡單，將GridPanel創建在事件的function中就能夠了。若是載入時就顯示Grid,這裏分幾種狀況: (1)頁面載入時，Grid顯示，並查詢和顯示出數據。 (2)頁面載入時，Grid顯示，但不發送請求數據，事件觸發查詢。該查詢條件已固定或不須要條件。 (3)頁面載入時，Grid顯示，不查詢數據，事件觸發查詢，該查詢須要從頁面上存在的文本框中得到數據做爲條件。 (4)與(3)相同，可是但願在Grid查詢過程當中有loadMask效果。對於1）直接在Ext.onReady()中創建GridPanel，而且ds調用load方法。對於2）在Ext.onReady()中創建GridPanel,而在事件的function中寫ds.load() 對於3) 在Ext.onReady()中創建GridPanel,而此時的ds爲一個假ds,它的做用僅僅是爲了可以在頁面載入時就顯示Grid,而在事件的function中則再創建一個帶有查詢條件的ds,而後用該ds從新配置Grid.grid.reconfigure(ds,cm); 對於4) 查詢的要求可由grid被新的ds從新配置的方法實現，可是會發現，這樣作時，Grid的loadMask效果也不會出現了。有一個方法，就是在事件的 function中，將Grid的render的div清空，即div.innerHTML="" 以後再從新創建一個Grid。這樣作的缺點就是會在有不少代碼重複。可能還會出現一些其餘的function的調用以及沒法取得某對象的問題。如下由第三種狀況爲例，來講明增刪改查。創建： var fds = new Ext.data.Store(); var cm = new Ext.grid.ColumnModel([ {header:'例子',width:100,dataIndex:'test', editor:new Ext.form.TextField({ id:'test' }) } ]); var sm = new Ext.grid.RowSelectionModel(); var grid = new Ext.grid.EditorGridPanel({ ds:fds, cm:cm, sm:sm, width:200, height:200, title:'舉例', renderTo:Ext.get("testdiv") }); 這裏創建EditorGridPanel，是能夠進行編輯的Grid. 1 查詢：(點擊按鈕觸發事件) function btnclick() { var Record = Ext.data.Record.create([ {name:'test'} ]); //此處將record單獨提出方便操做 var ds = new Ext.data.Store({ url:'訪問的地址', reader:new Ext.data.XmlReader({ record:'item' },Record) }); ds.load(); grid.reconfigure(ds,cm); } 2 添加新建一條數據 var r = new Record({ test:'隨便舉個例子' }); 插入到表格指定行，n爲要插到這行後（此處取了表格的行數，即插入到最後），m是編輯完畢後focus的位置列數 var n = grid.getStore().getCount(); grid.stopEditing(); grid.getStore().insert(n,r); grid.startEditing(n,m); 3 刪除刪除選定的行 var r = grid.getSelectionModel().getSelected(); ds.remove(r); 刪除多行，也同樣，用getSelections()反法取到選中的行的一個數組，而後再一一刪除。刪除全部行 ds.removeAll(); 4 修改兩種方法，一種直接手動點擊須要修改的單元格，EditorGridPanell中的ClicksToEdit來設置點擊幾下進入編輯狀態。還有一種從別處得到數據自動修改。假設一條新的數據， var nr = ['修改後的例子']; 選定你要修改的行 var recordtoedit = grid.getSelectionModel().getSelected(); 或者var recordtoedit = ds.getAt(rowIndex); recordtoedit.set('test','修改後的例子'); 還能夠在修改完畢後將修改過的行的顏色改變來標示出哪一條是修改過的。添加事件 grid.on('afteredit',function(e){ var rowIndex = e.row; grid.getView().getRow(rowIndex).style.backgroundColor="red"; //能夠增長透明度效果 grid.getView().getRow(number).style.filter = "alpha(opacity=50)"; grid.getView().getRow(number).style.MozOpacity =".5"; });