EXT关键知识点总结(感谢李赞红老师和各位大神)

前言：

1.主要是对着李赞红老师的书籍，写例子测试；

2.李赞红老师用的是2.0版本，我测试环境是3.3；版本问题，导致学习进度缓慢；

3.EXT调试较为困难！！！

--------------

Ext.MessageBox.prompt(String title，String msg,Function fn,Object scope,Boolean/Numbermultipleline);

Ext.Msg.alert(String title，String msg,Function fn,Object scope);

Ext.Msg.confirm(String title，String msg,Function fn,Object scope);

自定义消息框、进度条对话框、动画消息框animEl：Ext.Msg.show(Object config);

Ext.Element.dom

获取属性的dom，就可以用传统的方式操作；如：var username=Ext.get("name").dom.value;

Ext.onReady(

　　function(){

　　　　　　Ext.get("hello").on("click",function(){//});//Ext.Element

　　}

);

2.动画

虽然动画效果应用于Ext.Element对象，但却定义于Ext.FX类中。

Ext.FX

Ext.Element

3.元素操作与模板

Ext.DomHelper.insertHtml(String where,HTMLElement el,String html);

Ext.XTemplate 与java中的MessageFormat 很像。

4.格式化

Ext.util.Format类的静态方法

5.extjs组件结构（要深入探索）

最核心的类：Ext.util.Observable

组件分类：基本组件、工具栏组件、表单组件；

组件的生命周期

组件的渲染方法render

6.Ext.data和ComboBox ,store

前者为数据来源，后者负责显示数据。

DataProxy:从不同地方获取数据；

DataReader:数据项的逻辑结构的定义，以及对数据的解析；

Store:存放解析好的数据。

控件索取数据时通常和Store打交道。

6.1 DataProxy

子类：

a.MemoryProxy ：数组、json、XML

b.HttpProxy : 通过ajax ，需指定URL

c.ScriptTagProxy: 通HttpProxy ,支持跨域获取数据；

6.2Ext.data.DataReader 类

用来定义数据项（行）的逻辑结构，主要信息有：列的逻辑名称和数据类型、列与数据源的索引映射（mapping)等，和一些元数据，如分页信息。

子类

a.Ext.data.ArrayReader

b.Ext.data.JsonReader

c.Ext.data.XmlReader

在DataReader基础上又封装了一层，叫Ext.data.Recond.

var reader=new Ext.data.ArrayReader({},cityRecond);//第一个参数为元数据

6.3 Ext.data.Store类

var store =new Ext.data.Store({

　proxy:proxy,

　reader:reader　

}//autoLoad:true //即时加载数据，默认

);

store.load();//手动加载

子类：

Ext.data.JsonStore

Ext.data.SimpleStore

Ext.data.Store

see http://www.cnblogs.com/lulj/articles/6282373.html

7.Ext.form.ComboBox

与HTML select没有一点关系，用div实现，结构变得复杂；

"实际值："+combobox.getValue()+",显示值："+combobox.getRawValue()

举个例子：

 <script type="text/javascript">
          Ext.onReady(
           function(){
            Ext.QuickTips.init(); 
             var cities=[
                 [1,"xxx"],
                 [2,"yyy"],
                 [3,"zzz"],
                 [4,"aaa"]
             
             ];
            // var  proxy=new Ext.data.MemoryProxy(cities);
             //定义组合框中显示的数据源  
             var  proxy=new Ext.data.HttpProxy({url:"http://192.168.20.136:8080/agcom/rest/role/list",method:"GET"});
        var City=new Ext.data.Record.create(
                 [
                     {name:"roleId",type:"string",mapping:"roleId"},
                     {name:"roleCode",type:"string",mapping:"roleCode"}
                 ]
             );

            
             var reader =new Ext.data.ArrayReader({},City);
             var store=new Ext.data.Store(
                 {
                     proxy:proxy,
                     reader:reader
                 }
             );
             //store.load();
             var combobox=new Ext.form.ComboBox(
                 {
                     renderTo:"local-states",
                     triggerAction:"all",
                     store:store,
                     displayField:"roleCode",
                     valueField:"roleId",
                     mode:"remote",//"local"
                     emptyText:"请选择城市"
                     
                 }
             );
             var btn=new Ext.Button(
                 {
                     text:"列表框的值",
                     value:"cc",
                     renderTo:"PostInfo",
                     handler:function(){
                         Ext.Msg.alert("值","实际值："+combobox.getValue()+",显示值："+combobox.getRawValue());
                     }
                 }
             );
           }//function
          );
          function successCallback(response,config){
          //    alert(config.url+','+config.method);
        //  alert(response.responseText);
              //var json=Ext.util.JSON.decode(response.responseText);
              //Ext.Msg.alert("json",json);
          }
          function failure(){
             // alert("l....");
          }
          Ext.Ajax.request({
                  method:"GET",
               url: 'http://192.168.20.136:8080/agcom/rest/role/list',
               success: successCallback,
               failure: failure,
               dataType: 'JSONP',
               headers: {
                   'my-header': 'foo'
               },
               params: { foo: 'bar' }
        });
        
        new Ext.Window({
            title:"xx",
            width:400,
            height:300,
            items:[
                new Ext.Button({text:"click me."}),
                new Ext.DatePicker({})
            ],
            maximizable:true,
            minimizable:true
        }).show(Ext.getBody());
                  
          
      </script>

View Code

ajax

Ext.Ajax并不是一个类，而是一个对象，是Ext.data.Connection类型的对象，不需要new.

8.Ext.Ajax.request //默认是post方法

9.上传文件（也可以使用JQuery.AjaxFileUpload()方法）

a.使用一个不可见的iFrame去完成这个任务。
b.Ext  doFormUpload()  方法完成这个任务，统一调用Ext.Ajax.request方法即可完成文件上传(设置属性isUpload:true,)

Ext.Ajax.request  源码
  request : function(o){}//o代表方法体，默认获取当前btn的所在form

doFormUpload : function(o, ps, url){
var id = Ext.id(),
doc = document,
frame = doc.createElement('iframe'),//创建iframe，与form关联
form = Ext.getDom(o.form),//通过o取得form
hiddens = [],
hd,
encoding = 'multipart/form-data',


------------------------

 Ext.Ajax.request({
                  method:"GET",
               url: 'http://192.168.20.136:8080/agcom/rest/role/list',
               success: successCallback,
               failure: failure,
               dataType: 'JSONP',
               headers: {
                   'my-header': 'foo'
               },
               params: { foo: 'bar' }
        });

function successCallback(response,config){
          //    alert(config.url+','+config.method);
        //  alert(response.responseText);
              //var json=Ext.util.JSON.decode(response.responseText);
              //Ext.Msg.alert("json",json);
          }
          function failure(){
             // alert("l....");
          }
          //config 保存request方法中的配置选项信息

10.Ext.Panel类

子类：TreePanel,FormPanel,GridPanel,TabPanel.

11.Ext.Window类

toolbar.items.add(String key, Object o)    //增加一个组件
toolbar.items.remove(Object o)             //删除一个组件
toolbar.items.removeAt(Number index)       //删除一个组件（序号）
toolbar.items.clear()                      //删除所有组件

Ext.getCmp(win.button.id).destroy(); //删除一个组件

toolbar.render(document.body); // toolbar is rendered

toolbar.doLayout(); // refresh the layout

12.window最小化实例（from 李赞红老师）

 1 <%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
 2 <%
 3 String path = request.getContextPath();
 4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
 5 %>
 6 
 7 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 8 <html xmlns="http://www.w3.org/1999/xhtml">
 9 <head>
10 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
11  <!--  
12  <script src="http://cdn.bootcss.com/extjs/3.4.1-1/adapter/ext/ext-base.js"></script>
13  <script src="http://cdn.bootcss.com/extjs/3.4.1-1/ext-all-debug.js"></script>
14 <link href="http://cdn.bootcss.com/extjs/3.4.1-1/resources/css/ext-all.css" rel="stylesheet"/>
15 -->
16 <script src="resources/js/ext/adapter/ext/ext-base-debug.js"></script>
17  <script src="resources/js/ext/ext-all-debug.js"></script>
18 
19 <link href="<%=path%>/resources/js/ext/resources/css/ext-all.css" rel="stylesheet"/>
20  <script type="text/javascript" src="PagingGridPanel.js"></script>
21   <script type="text/javascript" src="resources/js/ext/ux/SpinnerField.js"></script>
22   <script type="text/javascript" src="resources/js/ext/ux/Spinner.js"></script>
23    <script type="text/javascript" src="resources/js/ext/examples/form/states.js"></script>
24 
25 </head>
26 <body>
27 
28 <div  id="local-states"></div>  
29 <div type="button" id="PostInfo"></div>  
30 
31 
32  <script type="text/javascript">
33          var i=1;
34           Ext.onReady(
35            function(){
36                 Ext.QuickTips.init(); 
37                 var newWin=new Ext.Button({
38                     text:"new",
39                     pressed:true,
40                     handler:function(){
41                         var win=new Ext.Window({
42                             title:"window"+(i++),
43                             width:400,
44                             height:300,
45                             minimizable:true,
46                             listeners:{
47                                 minimize:function(window){
48                                     window.hide(win.button.id);
49                                     window.minimizable=true;
50                                 }
51                             },
52                             close:function(window){
53                                 var delObj=document.getElementById(win.button.id);
54                                 win.hide(win.button.id);
55                                 //toolBar.items.remove(win.button);
56                                 Ext.getCmp(win.button.id).destroy();
57                                 toolBar.doLayout();
58                                 //delObj.parentNode.parentNode.removeChild(delObj.parentNode);
59                             }
60                         });
61                         win.show(newWin.id);
62                         win.getUpdater().update({url:"PagingGridPanel.js"});
63                         win.button=new Ext.Button({
64                             win:win,
65                             id:"id"+i,
66                             text:win.title,
67                             pressed:true,
68                             handler:function(btn){
69                                 if(btn.win.minimizable){
70                                     btn.win.show(btn.id);
71                                     btn.win.minimizable=false;
72                                 }else{
73                                     btn.win.hide(btn.id);
74                                     btn.win.minimizable=true;
75                                 }
76                             }
77                         });
78                         toolBar.addButton(win.button);
79                          toolBar.doLayout(); 
80                     }
81                 });
82                 var toolBar=new Ext.Toolbar({
83                     height:25,
84                     renderTo:Ext.getBody(),
85                     items:[
86                         newWin
87                     ]
88                 });
89             }
90            );
91                   
92           
93       </script>
94 </body>
95 </html>

View Code

13.xtype

xtype的值通常由Ext.req("form",Ext.FormPanel);类似的代码来注册。也可以直接new Ext.FormPanel

14.form 提交参数中的baseParams属性

是一个json对象，可以传中文。传统是通过隐藏域的方法

form eg.

  1 <%@ page language="java" import="java.util.*" %>
  2 <%
  3 String path = request.getContextPath();
  4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5 %>
  6 
  7 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  8 <html xmlns="http://www.w3.org/1999/xhtml">
  9 <head>
 10 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
 11  <!--  
 12  <script src="http://cdn.bootcss.com/extjs/3.4.1-1/adapter/ext/ext-base.js"></script>
 13  <script src="http://cdn.bootcss.com/extjs/3.4.1-1/ext-all-debug.js"></script>
 14 <link href="http://cdn.bootcss.com/extjs/3.4.1-1/resources/css/ext-all.css" rel="stylesheet"/>
 15 -->
 16 <script src="resources/js/ext/adapter/ext/ext-base-debug.js"></script>
 17  <script src="resources/js/ext/ext-all-debug.js"></script>
 18 
 19 <link href="<%=path%>/resources/js/ext/resources/css/ext-all.css" rel="stylesheet"/>
 20  <script type="text/javascript" src="PagingGridPanel.js"></script>
 21   <script type="text/javascript" src="resources/js/ext/ux/SpinnerField.js"></script>
 22   <script type="text/javascript" src="resources/js/ext/ux/Spinner.js"></script>
 23    <script type="text/javascript" src="resources/js/ext/examples/form/states.js"></script>
 24 
 25 
 26 <%
 27     String user=request.getParameter("username");
 28     String  dd=request.getReader().toString();
 29     
 30 %>
 31 </head>
 32 <body>
 33 <h1><%=user %></h1>
 34 <h2><%=dd %></h2>
 35 <div  id="local-states"></div>  
 36 <div type="button" id="PostInfo"></div>  
 37 
 38 
 39  <script type="text/javascript">
 40          var i=1;
 41           Ext.onReady(
 42            function(){
 43                 Ext.QuickTips.init();
 44                 var f=new Ext.form.FormPanel({
 45                     url:"/agcom/rest/user/zl0073",
 46                     method:"POST",
 47                     baseParams:{extra:"attach",id:100},
 48                     title:"ssss",
 49                     width:300,
 50                     height:140,
 51                     bodyStyle:"padding:6px",
 52                     labelAlign:"right",
 53                     frame:true,
 54                     items:[
 55                         new Ext.form.TextField({
 56                             name:"username",
 57                             allowBlank:false,
 58                             fieldLabel:"用户名",
 59                             labelAlign:"right"    
 60                         }),{
 61                             name:"password",
 62                             xtype:"textfield",
 63                             inputType:"password",
 64                             fieldLabel:"密码",
 65                             allowBlank:false
 66                         
 67                         }
 68                     ],
 69                     buttons:[
 70                         {
 71                             text:"确定",
 72                             handler:function(){
 73                                 var userName=f.getForm().findField("username").getValue();//find field by name
 74                                 var password=f.getForm().findField("password").getValue();
 75                             //    Ext.Msg.alert("","用户名： "+userName+"<br> 密码： "+password);
 76                                 f.getForm().submit({
 77                                     success:function(form,action){//action.result ,, is json
 78                                         Ext.Msg.alert("ok","tijiao ok "+action.result.data);
 79                                     },
 80                                     failure:function(){
 81                                         Ext.Msg.alert("fail","tijioa fail ");
 82                                     }
 83                                 });
 84                             }
 85                         },
 86                         {
 87                             text:"重置",
 88                             handler:function(){
 89                                 f.getForm().reset();
 90                             }
 91                         }
 92                     ]
 93                 });
 94                   f.render("local-states");  
 95            }     
 96           );
 97         
 98           
 99       </script>
100 </body>
101 </html>

View Code

15.行选择模型与grid视图

Ext.grid.RowSelectionMode 只与行选择相关。数据操作与Store相关，展示、更新与grid相关。

16.获取控件

实际操作也是很简单,如:

Ext.getCmp('listname').setValue(updateitemname);

通过ID取得某个控件：

1.alertProductManagerWin.queryById(id).setValue(value)，

其中alertProductManagerWin为定义的panel

2.Ext.getCmp(id).setValue(value);

通过名字取得某个控件

1.panelName.getForm().findField(name).setValue(value);

获取form里面的field的三种方法

1)Ext.getCmp('id');

2)FormPanel.getForm().findField('id/name');

3)Ext.get('id/name');//前提是FormPanel在界面上显示出来了

获得某个panel下的某个id的控件

panel.down('#id')

sources

Ext.datePicker

Ext.namespace("com.deng");
/**
 * 日期选择器Ext.DatePicker
 */

Ext.onReady(function(){
    var dp = new Ext.DatePicker({
        renderTo: Ext.getBody(),
        minDate: Date.parseDate("2009-01-01","Y-m-d"),
        maxDate: Date.parseDate("2009-12-30","Y-m-d"),
        value: Date.parseDate("2009-12-30","Y-m-d"),
        handler: function(){
            Ext.Msg.alert("日期",Ext.util.Format.date(this.getValue(),'Y-m-d'));
        }
    });
});
/**
 * 备注：
 * value是日期控件显示后的初始值。通过getValue方法得到用户选择的日期，其它很多配置选项
 * 主要是用来做个性化和本地化，只和表现有关，和功能无关
 */

View Code

分页与Combobox (待熟练)

 1 <script type="text/javascript">
 2      
 3           Ext.onReady(
 4             function(){
 5                 var  proxy=new Ext.data.HttpProxy({url:"/testService/ext"});
 6                 var City=new Ext.data.Record.create([
 7                     {name:'did',type:'int',mapping:'did'},
 8                     {name:'dname',type:'string',mapping:'dname'}
 9                 ]);
10                 var reader=new Ext.data.JsonReader({
11                     totalProperty:'totalProperty',
12                     root:'root'
13                 },City);
14                 var store=new Ext.data.Store({
15                        proxy:proxy,
16                      reader:reader
17                 });
18                  var combobox=new Ext.form.ComboBox({
19                     emptyText:'请选择部门',
20                     pageSize:5,
21                     //readOnly:true,//加上这句，页面不展示
22                     listWidth:300,
23                      renderTo:Ext.getBody(),
24                      triggerAction:'all',
25                      store:store,
26                      displayField:'dname',
27                      valueField:'did',
28                      mode:'remote'//"local"
29                 });
30                 
31             });
32           
33       </script>

View Code

后台:

 1  protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 2         response.setContentType("text/html;charset=utf-8");
 3         PrintWriter out=response.getWriter();
 4         int start=Integer.parseInt(request.getParameter("start"));
 5         int limit=Integer.parseInt(request.getParameter("limit"));
 6 //        int start=0;
 7 //        int limit=5;
 8         System.out.println(start+","+limit);
 9         int totalProperty=17;
10         String fmt="{did:%d,dname:'%s'}";
11         StringBuffer s=new StringBuffer("{totalProperty:");
12         s.append(totalProperty).append(",root:[");
13         int end=start+limit;
14         if(end>totalProperty)end=totalProperty;
15         for(int i=start;i<end;i++){
16             s.append(String.format(fmt, i,"部门"+i));
17             if(i<end-1){
18                 s.append(",");
19             }
20         }
21         s.append("]}");
22         System.out.println(s.toString());
23         out.println(s.toString());
24         out.flush();
25         out.close();
26         
27     }

也可以看看这位哥们总结的：ComboBox（下拉列表、从后台读取数据、带分页）

GridPanel 分页例子：

 1 <script type="text/javascript">
 2      
 3   Ext.onReady(function(){  
 4     var proxy = new Ext.data.HttpProxy({url:'/testService/ext'});  
 5     var record = new Ext.data.Record.create([  
 6         {name:'hid',type:'int',mapping:'hid'},  
 7         {name:'name',type:'string',mapping:'name'},  
 8         {name:'sex',type:'string',mapping:'sex'},  
 9         {name:'birthday',type:'string',mapping:'birthday'},  
10         {name:'edu',type:'string',mapping:'edu'},  
11         {name:'memo',type:'string',mapping:'memo'}  
12     ]);  
13     var reader = new Ext.data.JsonReader({totalProperty:'totalProperty',root:'root'},record);  
14     var store = new Ext.data.Store({  
15         proxy:proxy,  
16         reader:reader  
17     });  
18     store.load({params:{start:0,limit:10}});  
19     var cm = new Ext.grid.ColumnModel([  
20         new Ext.grid.RowNumberer(),  
21         {header:'ID',width:40,dataIndex:'hid'},  
22         {header:'姓名',width:80,dataIndex:'name',tootip:'这是您的姓名'},  
23         {header:'性别',width:40,dataIndex:'sex',align:'center'},  
24         {header:'生日',width:150,dataIndex:'birthday'},  
25         {header:'学历',width:80,dataIndex:'edu',align:'center'},  
26         {id:'memo',header:'备注',dataIndex:'memo'}  
27     ]);  
28     var pagebar = new Ext.PagingToolbar({  
29         store:store,  
30         pageSize:10,  //只需要指定每一页的条数
31         displayInfo:true,  
32         displayMsg:'本页显示第{0}条到第{1}条的记录，一共条{2}。',  
33         emptyMsg:'没有记录'  
34     });  
35     var grid = new Ext.grid.GridPanel({  
36         renderTo:Ext.getBody(),  
37         title:'中国公民',  
38         width:650,  
39         autoHeight:true,  
40         autoExpandColumn:'memo',  
41         cm:cm,  
42         store:store,  
43         bbar:pagebar  //tbar top bar
44     });  
45 });  
46           
47       </script>

View Code

 1     protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 2         response.setContentType("text/html;charset=utf-8");  
 3             PrintWriter out = response.getWriter();  
 4             // 获取参苏  
 5             int start = Integer.parseInt(request.getParameter("start"));  
 6             int limit = Integer.parseInt(request.getParameter("limit"));  
 7             int totalProperty = 86;  
 8             int end = start + limit;  
 9             if (end > totalProperty) {  
10                 end = totalProperty;  
11             }  
12             // 为表格分页准备数据  
13             List<Human> root = new ArrayList<Human>();  
14             for (int i = start; i < end; i++) {  
15                 root.add(new Human(i, "无名氏" + i, "男", "1986-10-02", "博士", "<a href='http://lib.csdn.net/base/softwaretest' class='replace_word' title='软件测试知识库' target='_blank' style='color:#df3434; font-weight:bold;'>测试</a>数据"));  
16             }  
17             // 封装符合分页格式的数据  
18             Page page = new Page(totalProperty, root);  
19 //            JSONObject obj=new JSONObject();
20 //            JSONObject.fromObject(page);
21             Gson g=new Gson();
22            
23             String json =  g.toJson(page); 
24             out.println(json);  
25             out.flush();  
26             out.close();  
27         
28     }

View Code

public class Human {  
    private int hid;  
    private String name;  
    private String sex;  
    private String birthday;  
    private String edu;  
    private String memo;  
  
    public Human() {  
  
    }  
  
    public Human(int hid, String name, String sex, String birthday, String edu,  
            String memo) {  
        this.hid = hid;  
        this.name = name;  
        this.sex = sex;  
        this.birthday = birthday;  
        this.edu = edu;  
        this.memo = memo;  
    }  
}

public class Page {  
    private int totalProperty;  
    private List<Human> root;  
  
    public Page() {  
  
    }  
  
    public Page(int totalProperty, List<Human> root) {  
        this.totalProperty = totalProperty;  
        this.root = root;  
    }  
}

ref：上面那个哥们。

Ext.grid.EditGridPanel 例子

1.Ext.grid.GridEditor 是Ext.Editor的子类

EditorGridPanel的工作过程

　　0、用户点击单元格

单元格按照预设的组件显示单元格的内容并处于编辑状态
离开单元格的编辑状态
更新编辑后的内容，出现三角号表示已经被修改过
程序内部变化：将记录设置为脏读数据状态，并将修改后的记录存放在Record类型的数组modified中。

3.GridPanel 的默认的选择模型：RowSelectionModel

EditGridPanel的默认的选择模型：CellSelectionModel

(可通过setModel 切换选择模型)

4.　　Store.js中有定义：

this.modified=[];

它保存了被修改过的数据（称为脏数据）；ajax提交时只提交脏数据到后台；

posted on 2017-01-24 14:53 决心觉新阅读(651) 评论(0) 收藏举报

刷新页面返回顶部

决心觉新

EXT关键知识点总结(感谢李赞红老师和各位大神)

导航

公告