1、卡片式布局

1. Ext.onReady(function() { 
2.     var panel = new Ext.Panel({ 
3.         title : 'CardLayout', 
4.         width : 400, 
5.         height : 400, 
6.         frame : true, 
7.         applyTo : 'container', 
8.         autoScroll : true, 
9.         collapsible : true, 
10.         defaults : { 
11.             bodyStyle : 'background-color:#FFFFFF;padding:15px' 
12.         }, 
13.         layout : 'card', 
14.         activeItem : 0, 
15.         items : [ { 
16.             title : 'one', 
17.             html : '123', 
18.             id : 'p1' 
19.         }, { 
20.             title : 'Two', 
21.             html : '234', 
22.             id : 'p2' 
23.         }, { 
24.             title : 'Three', 
25.             html : '255', 
26.             id : 'p3' 
27.         } ], 
28.         buttons : [ { 
29.             text : '上一页', 
30.             handler : ChangePage 
31.         }, { 
32.             text : '下一页', 
33.             handler : ChangePage 
34.         } ] 
35.     }) 
36.     function ChangePage(btn) { 
37.         var index = Number(panel.layout.activeItem.id.substring(1)); 
38.         if (btn.text == '上一页') { 
39.             index--; 
40.             if (index < 1) 
41.                 index = 1; 
42.         } else { 
43.             index++; 
44.             if (index > 3) 
45.                 index = 3; 
46.         } 
47.         panel.layout.setActiveItem('p' + index); 
48.     } 
49. }) 

2、点击即选中

1. var panel = new Ext.Panel({ 
2.         width : 400, 
3.         height : 100, 
4.         frame:true, 
5.         defaults : { 
6.             xtype : 'textfield', 
7.             width : 140, 
8.             selectOnFocus : true, 
9.         }, 
10.         layout : 'form', 
11.         items : [ { 
12.             fieldLabel : '开始时间', 
13.             name : 'startTime', 
14.             value : new Date().dateFormat('Y-m-d H:i:s') 
15.         }, { 
16.             fieldLabel : '结束时间', 
17.             name : 'endTime', 
18.             value : new Date().dateFormat('Y-m-d H:i:s') 
19.         }, { 
20.             fieldLabel : 'IP', 
21.             name : 'searchIp' 
22.         } ] 
23.     }); 

3、获取textfield的内容：Ext.getCmp("name1").getValue();

id : 'name1'，增加事件处理

1. handler : function() { 
2.                 var content = Ext.getCmp("name1").getValue(); //取值
3.                 if (content == "") { 
4.                     alert("内容不能为空！"); 
5.                     // return false; 
6.                 } 
7.                 Ext.getCmp("name2").setValue(content); //设值
8.             } 

(1) fs.form.findField(id/name).setValue(value); 
(2) Ext.get(id/name).setValue(value); 
(3) Ext.getCmp(id).setValue(value);   
获取form里面的field的三种方法 
1)Ext.getCmp('id'); 
2)FormPanel.getForm().findField('id/name');

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

4、时间监听器

1. Children = Ext.extend(Ext.util.Observable, { 
2.     constructor: function(){ 
3.         this.state = "hungry";//或full 
4.         this.setMilk = function(milk) { 
5.             this.fireEvent('hungry',milk);//调用 
6.         }, 
7.         this.addEvents({'hungry':true}),//申明 
8.         this.addListener('hungry',function(milk){ 
9.             if(this.state == 'hungry'){ 
10.                 this.drink(milk); 
11.             }else{ 
12.                 alert("i am not hungry!"); 
13.             } 
14.         }),//注册 
15.         this.drink = function(milk) { 
16.             alert("drink one bottle of milk: " + milk); 
17.         }; 
18.  
19.     } 
20. }); 
21. var children = new Children(); 
22. children.setMilk('san lu milk!'); 

5、panel中button的放置位置

buttonAlign : 'center',

6、为按钮增加事件

1. var btn = new Ext.Button({text:'点击'}); 
2.     var i = 0; 
3.     btn.on("click", function() { 
4.         var win = new Ext.Window({title:'title'+ i++,width:200, height:100}); 
5.         win.show(); 
6.     }); 

7、为html页面中的text文本赋值

1. Ext.get('b1').on("click",function() { 
2.     Ext.Ajax.request({ 
3.         url : 'hello.jsp', 
4.         method : 'post', 
5.         params : { 
6.             id : '01' 
7.         }, 
8.         timeout : 3000, 
9.         success : function(response, opts) { 
10.             var time = response.responseText; 
11.             Ext.getDom('hello2').value = time; 
12.         }, 
13.         failure : function(response, opts) { 
14.             alert(response.responseText); 
15.         } 
16.     }); 
17. }); 

8、类的定义

Extjs 3 中是这样定义类的： 

9、创建对象

extjs 3.x: new MyApp.LoginWindow();

extjs 4.x: Ext.create("MyApp.LoginWindow",{...})

10、定义和使用命名空间

定义：Ext.namespace('Ext.exampledata'); 

1. Ext.namespace('Ext.exampledata'); 
2.  
3. Ext.exampledata.states = [ 
4.         ['AL', 'Alabama', 'The Heart of Dixie'], 
5.         ['AK', 'Alaska', 'The Land of the Midnight Sun'], 
6.         ['AZ', 'Arizona', 'The Grand Canyon State'], 
7.         ['AR', 'Arkansas', 'The Natural State'] 
8.     ]; 

使用命名空间下定义的类

1. var store = new Ext.data.ArrayStore({ 
2.       fields: ['abbr', 'state', 'nick'], 
3.       data : Ext.exampledata.states 
4.   }); 

使用combobox获取内容：

1. var combo = new Ext.form.ComboBox({ 
2.       store: store, 
3.       displayField:'state', 
4.       typeAhead: true, 
5.       mode: 'local', 
6.       forceSelection: true, 
7.       triggerAction: 'all', 
8.       emptyText:'Select a state...', 
9.       selectOnFocus:true, 
10.   }); 

【注意】获取内容：store,获取其中某个字段：displayField

11、ext3中的store用法

1. var store2 = new Ext.data.ArrayStore({ 
2.        fields : ['id', 'text'], 
3.        data : [['1', '一月'], ['2', '二月'], ['3', '三月'], ['4', '四月'], 
4.          ['5', '五月'], ['6', '六月'], ['7', '七月'], ['8', '八月'], 
5.          ['9', '九月'], ['10', '十月'], ['11', '十一月'], ['12', '十二月']] 
6.     }); 
7.     
8.    var combo2 = new Ext.form.ComboBox({ 
9.        store: store2, 
10.        displayField:'text', 
11.        typeAhead: true, 
12.        mode: 'local', 
13.        forceSelection: true, 
14.        triggerAction: 'all', 
15.        emptyText:'Select a state...', 
16.        selectOnFocus:true, 
17.     }); 

12、combo中的自动补全

typeAhead : true,

默认值：  value : 1,其中value值为valueField的值，而不是displayField

13、查看回调函数中传递的参数

console.dir(arguments);

14、回调函数

1. listeners : { 
2.                 render : rend 
3.             } 

 

步骤1：添加listeners 

步骤2：在相应类中查找回调event，例如：render

步骤3：写自己的处理函数，即回调中要完成的事情，例如rend方法

1. function rend(btn) { 
2.         Ext.Msg.alert(btn.title, btn.title + " is rendered!"); 
3.     } 

 

完整例子如下：

1. Ext.onReady(function() { 
2.     function rend(btn) { 
3.         Ext.Msg.alert(btn.title, btn.title + " is rendered!"); 
4.     } 
5.     var tabs = new Ext.TabPanel({ 
6.         renderTo : 'my-tabs', 
7.         activeTab : 1, 
8.         items : [ { 
9.             xtype : 'panel', 
10.             title : 'Tab 1', 
11.             html : 'tab1 content..........', 
12.             listeners : { 
13.                 render : rend 
14.             } 
15.         }, { 
16.             xtype : 'panel', 
17.             title : 'Tab 2', 
18.             html : 'tab2 content...&&&&&&&.......', 
19.             listeners : { 
20.                 render : rend 
21.             } 
22.         }, { 
23.             xtype : 'panel', 
24.             title : 'Tab 3', 
25.             autoLoad : "news.html", 
26.             listeners : { 
27.                 render : rend 
28.             } 
29.         } ] 
30.     }); 
31.     new Ext.Viewport({ 
32.         layout : 'fit', 
33.         items : tabs 
34.     }); 
35. }); 

15、handler

1. xtype : 'button', 
2.         text : 'add tab', 
3.         handler : function() { 
4.             tabs.add({ 
5.                 title : 'new table' 
6.             }); 
7.         } 

16、grid panel

1. Ext.onReady(function() { 
2.     var data = [ [ 1, 'EasyJWeb', 'EasyJF', 'www.easyjf.com' ], 
3.             [ 2, 'jfox', 'huihoo', 'www.huihoo.org' ], 
4.             [ 3, 'jdon', 'jdon', 'www.jdon.com' ], 
5.             [ 4, 'springside', 'springside', 'www.springside.org.cn' ] ]; 
6.     var store = new Ext.data.SimpleStore({ 
7.         data : data, 
8.         fields : [ "id", "name", "organization", "homepage" ] 
9.     }); 
10.     var grid = new Ext.grid.GridPanel({ 
11.         renderTo : "hello", 
12.         title : "中国Java 开源产品及团队", 
13.         height : 150, 
14.         width : 600, 
15.         columns : [ { 
16.             header : "项目名称", 
17.             dataIndex : "name" 
18.         }, { 
19.             header : "开发团队", 
20.             dataIndex : "organization" 
21.         }, { 
22.             header : "网址", 
23.             dataIndex : "homepage" 
24.         } ], 
25.         store : store, 
26.         autoExpandColumn : 2 
27.     }); 
28. }); 

17、表单的提交

1. function simpleForm() { 
2.     var panel = new Ext.form.FormPanel({ 
3.         title : 'user basic info', 
4.         width : 400, 
5.         height : 200, 
6.         frame : true, 
7.         labelAlign : 'left', 
8.         labelWidth : 80, 
9.         items : [ { 
10.             xtype : 'textfield', 
11.             fieldLabel : 'username', 
12.             name : 'username', 
13.             id : 'user', 
14.             value : 'abc' 
15.         }, { 
16.             xtype : 'textfield', 
17.             fieldLabel : 'password', 
18.             inputType : 'password', 
19.             name : 'password', 
20.             value : 'hello1234' 
21.         }, { 
22.             xtype : 'datefield', 
23.             fieldLabel : 'birthday', 
24.             name : 'birthday', 
25.             value : new Date().format('Y-m-d') 
26.         }, { 
27.             xtype : 'textfield', 
28.             fieldLabel : 'email', 
29.             name : 'email', 
30.             value : 'abc@sina.com' 
31.         }, { 
32.             xtype : 'textarea', 
33.             fieldLabel : 'description', 
34.             name : 'description', 
35.             value : 'hello world' 
36.         } ], 
37.         buttons : [ { 
38.             text : 'save', 
39.             handler : function() { 
40.                 panel.getForm().submit({ 
41.                     url : 'UserServlet', 
42.                     params : { 
43.                         k1 : 'v1' 
44.                     }, 
45.                     success : function(form, action) { 
46.                         Ext.Msg.alert('Success', "it is ok now"); 
47.                     }, 
48.                 }); 
49.             } 
50.         }, { 
51.             text : 'cancel', 
52.             handler : function() { 
53.                 panel.hide(); 
54.             } 
55.         }, { 
56.             text : 'reset', 
57.             handler : function() { 
58.                 //findField必须去id的，而不是name 
59.                 alert(panel.getForm().findField("user").getValue()); 
60.                 panel.getForm().reset(); 
61.             } 
62.         }, { 
63.             text : 'load', 
64.             handler : function() { 
65.                 panel.getForm().load({ 
66.                     url : 'LoadDataServlet', 
67.                     params : { 
68.                         k1 : 'v1' 
69.                     } 
70.                     //待完善 
71.                 }); 
72.             } 
73.         } ] 
74.     }); 
75.     panel.render(document.body); 
76. } 
77.  
78. Ext.onReady(simpleForm); 

18、直接渲染到dom节点（document.body），而未定义div

1. var panel = new Ext.Panel({ 
2.         width : 400, 
3.         height : 300, 
4.         title : 'my title' 
5.     }); 
6.     panel.render(document.body); 

19、面板的五大部分

1. var panel = new Ext.Panel({ 
2.         width : 400, 
3.         height : 300, 
4.         title : 'my title', 
5.         tbar:[{text:'save'},'-',{text:'edit'}], 
6.         bbar:[{text:'next page'},'->',{text:'up page'}], 
7.         buttonAlign:'center', 
8.         buttons:[{text:'确定'},{text:'取消'}], 
9.         html : '<h1>这是面板的body部分</h1>' 
10.     }); 
11.     panel.render(document.body); 

20、为验证添加自定义提示

步骤1：必须先添加上如下内容，功能在于：初始化tips和让提示出现在右侧，默认会跟着鼠标一起动

Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side'; 

步骤2：

1. allowBlank : false, 
2. blankText:'姓名不能为空' 

为空时，最终提示的内容会出现在右边，显示blankText的内容

21、ip地址验证

1. allowBlank : false,                                    
2. blankText:"IP不能为空",                                    
3. regex: /^(([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))\.)((d|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))\.){2}([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))$/ 

22、Object和String转换

将Object转换为JSON（即String）:Ext.util.JSON.encode( Mixed o)

将JSON转换为Object（即对象）:Ext.util.JSON.decode(String json)

将record转换为对象： record.data 

 

1. var blackListRecords = []; 
2.                         Ext.each(selectedRecords, function(record) { 
3.                                     //versions.push(record.get('version')); 
4.                                     //appId = record.get('appId'); 
5.                                     blackListRecords.push(Ext.util.JSON.encode(record.data)); 
6.                                 }) 
7.                         Ext.Ajax.request({ 
8.                                     url : '../../blackList/deleteBlackLists.do', 
9.                                     params : { 
10.                                         records : blackListRecords 
11.                                     }, 
12.                                     success : function() { 
13.                                         Ext.MessageBox.alert('成功', '删除成功!'); 
14.                                     } 
15.                                 }); 

 

 本文转自 tianya23 51CTO博客，原文链接：http://blog.51cto.com/tianya23/821649，如需转载请自行联系原作者