http://tianya23.blog.51cto.com/1081650/813863

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值为的值,而不是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. 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.encodeMixed 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.                                 });