ExtJS样例总结 -1

1、组合框

1. new Ext.onReady(function(){ 
2.     var top = new Ext.FormPanel({ 
3.         labelAlign: 'top', 
4.         frame:true, 
5.         title: 'Multi Column, Nested Layouts and Anchoring', 
6.         bodyStyle:'padding:5px 5px 0', 
7.         width: 600, 
8.         items: [{ 
9.             layout:'column', 
10.             items:[{ 
11.                 columnWidth:.5, 
12.                 layout: 'form', 
13.                 items: [{ 
14.                     xtype:'textfield', 
15.                     fieldLabel: 'First Name', 
16.                     name: 'first', 
17.                     anchor:'95%' 
18.                 }, { 
19.                     xtype:'textfield', 
20.                     fieldLabel: 'Company', 
21.                     name: 'company', 
22.                     anchor:'95%' 
23.                 }] 
24.             },{ 
25.                 columnWidth:.5, 
26.                 layout: 'form', 
27.                 items: [{ 
28.                     xtype:'textfield', 
29.                     fieldLabel: 'Last Name', 
30.                     name: 'last', 
31.                     anchor:'95%' 
32.                 },{ 
33.                     xtype:'textfield', 
34.                     fieldLabel: 'Email', 
35.                     name: 'email', 
36.                     vtype:'email', 
37.                     anchor:'95%' 
38.                 }] 
39.             }] 
40.         },{ 
41.             xtype:'htmleditor', 
42.             id:'bio', 
43.             fieldLabel:'Biography', 
44.             height:200, 
45.             anchor:'98%' 
46.         }], 
47.          
48.         buttons: [{ 
49.             text: 'Save' 
50.         },{ 
51.             text: 'Cancel' 
52.         }] 
53.     }); 
54.      
55.     top.render(document.body); 
56. }) ; 

2、页面布局：layout，参考：http://virgoooos.iteye.com/blog/288924

absolute

顾名思义，在容器内部，根据指定的坐标定位显示 

• accordion

这个是最容易记的，手风琴效果  

• anchor

这个效果具体还不知道有什么用，就是知道注意一下 
1.容器内的组件要么指定宽度，要么在anchor中同时指定高/宽， 
2.anchor值通常只能为负值(指非百分比值)，正值没有意义， 
3.anchor必须为字符串值 

• border

将容器分为五个区域:east,south,west,north,center  

• card

像安装向导一样，一张一张显示  

• column

把整个容器看成一列一列的,然后向容器放入子元素时;

• fit

一个子元素将充满整个容器（如果多个子元素则只有一个元素充满整个容器） 

• form

是一种专门用于管理表单中输入字段的布局  

• table

按照普通表格的方法布局子元素，用layoutConfig:{columns:3},//将父容器分成3列  

3、翻页效果

1. Ext.onReady(function() {     
2.     var i = 0;        
3.     var navHandler = function(direction) {     
4.         if (direction == -1) {     
5.             i--;     
6.             if (i < 0) { i = 0; }     
7.         }        
8.         if (direction == 1) {     
9.             i++;     
10.             if (i > 2) { i = 2; return false; }     
11.         }  
12.         var btnNext = Ext.get("move-next");     
13.         var btnBack = Ext.get("move-next");     
14.         if (i == 0) {     
15.             btnBack.disabled = true;     
16.         } else {     
17.             btnBack.disabled = false;     
18.         }     
19.         if (i == 2) {     
20.             btnNext.value = "完成";     
21.             btnNext.disabled = true;     
22.         } else {     
23.             btnNext.value = "下一步";     
24.             btnNext.disabled = false;     
25.         }  
26.         card.getLayout().setActiveItem(i);     
27.     };     
28.    var card = new Ext.Panel({     
29.         width: 200,     
30.         height: 200,     
31.         title: '注册向导',     
32.         layout: 'card',     
33.         activeItem: 0, // make sure the active item is set on the container config!     
34.         bodyStyle: 'padding:15px',     
35.         defaults: {     
36.             border: false     
37.         },     
38.         bbar: [     
39.             {     
40.                 id: 'move-prev',     
41.                 text: '上一步',     
42.                 handler: navHandler.createDelegate(this, [-1])                         
43.             },     
44.             '->',     
45.             {     
46.                 id: 'move-next',     
47.                 text: '下一步',     
48.                 handler: navHandler.createDelegate(this, [1])     
49.             }     
50.         ],     
51.   
52.         items: [{     
53.             id: 'card-0',     
54.             html: '<h1>欢迎来到注册向导!</h1><p>Step 1 of 3</p>'     
55.         }, {     
56.             id: 'card-1',     
57.             html: '<h1>请填写注册资料!</h1><p>Step 2 of 3</p>'     
58.         }, {     
59.             id: 'card-2',     
60.             html: '<h1>注册成功!</h1><p>Step 3 of 3 - Complete</p>'     
61.         }],     
62.         renderTo: "container"     
63.     });     
64. });  

4、render、renderTo、applayTo、el、show说明

5、FormPanel使用

1. var simple = new Ext.FormPanel({ 
2.         labelWidth : 75, // label settings here cascade unless overridden 
3.         url : 'save-form.php', 
4.         frame : true, 
5.         title : 'Simple Form', 
6.         bodyStyle : 'padding:5px 5px 0', 
7.         width : 350, 
8.         defaults : { 
9.             width : 230 
10.         }, 
11.         defaultType : 'textfield', 
12.  
13.         items : [ { 
14.             fieldLabel : 'First Name', 
15.             name : 'first', 
16.             allowBlank : false 
17.         }, { 
18.             fieldLabel : 'Last Name', 
19.             name : 'last' 
20.         }, { 
21.             fieldLabel : 'Company', 
22.             name : 'company' 
23.         }, { 
24.             fieldLabel : 'Email', 
25.             name : 'email', 
26.             vtype : 'email' 
27.         }, new Ext.form.TimeField({ 
28.             fieldLabel : 'Time', 
29.             name : 'time', 
30.             minValue : '8:00am', 
31.             maxValue : '6:00pm' 
32.         }) ], 
33.  
34.         buttons : [ { 
35.             text : 'Save' 
36.         }, { 
37.             text : 'Cancel' 
38.         } ] 
39.     }); 
40.     simple.render(document.body); 

6、viewport和border布局

1. new Ext.Viewport({ 
2.     layout: 'border', 
3.     items: [{ 
4.         region: 'north', 
5.         html: '<h1 class="x-panel-header">Page Title</h1>', 
6.         autoHeight: true, 
7.         border: false, 
8.         margins: '0 0 5 0' 
9.     }, { 
10.         region: 'west', 
11.         collapsible: true, 
12.         title: 'Navigation', 
13.         width: 200 
14.         // the west region might typically utilize a TreePanel or a Panel with Accordion layout 
15.     }, { 
16.         region: 'south', 
17.         title: 'Title for Panel', 
18.         collapsible: true, 
19.         html: 'Information goes here', 
20.         split: true, 
21.         height: 100, 
22.         minHeight: 100 
23.     }, { 
24.         region: 'east', 
25.         title: 'Title for the Grid Panel', 
26.         collapsible: true, 
27.         split: true, 
28.         width: 200, 
29.         xtype: 'grid', 
30.         // remaining grid configuration not shown ... 
31.         // notice that the GridPanel is added directly as the region 
32.         // it is not "overnested" inside another Panel 
33.     }, { 
34.         region: 'center', 
35.         xtype: 'tabpanel', // TabPanel itself has no title 
36.         items: { 
37.             title: 'Default Tab', 
38.             html: 'The first tab\'s content. Others may be added dynamically' 
39.         } 
40.     }] 
41. }); 

6、store、model

1. Ext.onReady(function() { 
2.     var myStore = new Ext.data.ArrayStore({ 
3.         fields: ['id','fullname', 'first'], 
4.         idIndex: 0 // id for each record will be the first element 
5.     }); 
6.     var myData = [ 
7.                   [1, 'Fred Flintstone', 'Fred'],  // note that id for the 
8.                   // record is the first 
9.                   // element 
10.                   [2, 'Barney Rubble', 'Barney'] 
11.                   ]; 
12.      
13.      
14.     myStore.loadData(myData); 
15.      
16.     myStore.each(function(model) { 
17.         alert(model.get('fullname')); 
18.     }); 
19. }); 

7、让面板整体色调保持一致

frame:true, 

True表示为面板的边框外框可自定义的，false表示为边框可1px的点线（默认为false）。

8、combo使用

1. new Ext.onReady(function() { 
2.     var mystore = new Ext.data.ArrayStore({ 
3.         fields : [ 'myId', 'displayText' ], 
4.         data : [ [ 1, 'ALL' ], [ 2, 'IP' ], [ 3, 'COOKIE' ] ] 
5.     }); 
6.     var top = new Ext.FormPanel({ 
7.         width : 600, 
8.         height : 400, 
9.         title : 'hello', 
10.         labelWidth: 50, 
11.         labelAlign:'right', 
12.         bodyStyle : 'padding:5px 5px 10 10', 
13.         frame : true, 
14.         defaults : { 
15.             xtype : 'combo', 
16.             width : 120, 
17.             height : 20, 
18.             typeAhead: true, 
19.             triggerAction: 'all', 
20.             lazyRender:true, 
21.             mode: 'local', 
22.             valueField: 'myId', 
23.             displayField: 'displayText' 
24.         }, 
25.         items : [ { 
26.             fieldLabel : 'lable1', 
27.             store : mystore 
28.         } 
29.         , { 
30.             fieldLabel : 'lable2', 
31.             store : mystore 
32.         }, { 
33.             fieldLabel : 'lable3', 
34.             store : mystore 
35.         }, { 
36.             fieldLabel : 'lable4', 
37.             store : mystore 
38.         }, { 
39.             fieldLabel : 'lable5', 
40.             store : mystore 
41.         }, { 
42.             fieldLabel : 'lable6', 
43.             store : mystore 
44.         }, { 
45.             fieldLabel : 'lable7', 
46.             store : mystore 
47.         }, { 
48.             fieldLabel : 'lable8', 
49.             store : mystore 
50.         } ], 
51.         buttons : [ { 
52.             text : 'save' 
53.         }, { 
54.             text : 'cancel' 
55.         } ] 
56.     }); 
57.  
58.     top.render(document.body); 
59. }); 

9、调整label标签与combo之间的距离

labelWidth: 50,

labelAlign:'right'

10、调试

chrome：scripts->选择需要调试的js文件，打断点进行调试

ctrl+shift+i后：network->documents中可查看request传递的参数

11、Ajax实现联动菜单 

1. (function(){ 
2.     function createChild(value,name){ 
3.         var el = document.createElement("option"); 
4.         el.setAttribute("value",value); 
5.         el.appendChild(document.createTextNode(name)); 
6.         return el; 
7.     } 
8.     var data = {}; 
9.      
10.     Ext.onReady(function(){ 
11.         //1.得到city这个dom对象 
12.         var cityObj = Ext.get("city"); 
13.         //2.我们为这个city对象注册一个change 
14.         cityObj.on("change",function(e,select){ 
15.             //3.得到改变后的数值 
16.             var ids =  select.options[select.selectedIndex].value; 
17.             //3.1 他先去前台的缓存变量中差数据,当没有的时候在去后台拿 
18.             if(data["city"]){ 
19.                 //直接操作 
20.             }else{ 
21.                 //做ajax 
22.             } 
23.             //4.ajax请求把后台数据拿过来 
24.             Ext.Ajax.request({ 
25.                 url:'/extjs/extjs!menu.action', 
26.                 params:{ids:ids}, 
27.                 method:'post', 
28.                 timeout:4000, 
29.                 success:function(response,opts){ 
30.                     var obj = eval(response.responseText); 
31.                     //5.得到地区的哪个对象area DOM 
32.                     var oldObj = Ext.get("area").dom; 
33.                     //6.清除里面项 
34.                     while(oldObj.length>0){ 
35.                         oldObj.options.remove(oldObj.length-1); 
36.                     } 
37.                     //7.加入新的项 
38.                     Ext.Array.each(obj,function(o){ 
39.                         Ext.get('area').dom.appendChild(createChild(o.valueOf(),o.name)); 
40.                     }) 
41.                     //8.把从数据库拿到的数据进行前台页面缓存 
42.                 } 
43.             }); 
44.         }); 
45.     }); 
46. })() 

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