欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ExtJS样例总结-2

程序员文章站 2022-04-19 10:34:30
1、卡片式布局 1. Ext.onReady(function() { 2.     var panel = new Ext....

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 中是这样定义类的:
Js代码    
1. MyApp.LoginWindow = Ext.extend(Ext.Window, {  
2.     title: 'Log in',     
3.     initComponent: function() {  
4.         Ext.apply(this, {  
5.             items: [  
6.                 {  
7.                     xtype: 'textfield',  
8.                     name : 'username',  
9.                     fieldLabel: 'Username'  
10.                 },  
11.                 ...  
12.             ]  
13.         });  
14.    
15.         MyApp.LoginWindow.superclass.initComponent.apply(this, arguments);  
16.     }  
17. });  
 Extjs4 中改成:
Js代码    
1. Ext.define('MyApp.LoginWindow', {  
2.     extend: 'Ext.Window',  
3.    
4.     title: 'Log in',  
5.    
6.     initComponent: function() {  
7.         Ext.apply(this, {  
8.             items: [  
9.                 //as above  
10.             ]  
11.         });  
12.    
13.         MyApp.LoginWindow.superclass.initComponent.apply(this, arguments);  
14.     }  
15. });  
16.    
 这样做有两个好处:
• 不会出现忘记定出 MyApp namespace 的情况
• 如果 Ext.Window 的定义位置比 MyApp.LoginWindow 晚,使用 4 的方式可以延时定义 LoginWindow 知道找到了 Ext.Window 的定义
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、表单的提交 www.2cto.com
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),而未定义p
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:'姓名不能为空'
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.                                 });




 摘自 技术改变生活商业成就梦想