ExtJS样例总结 -1

extjs2:http://tianya23.blog.51cto.com/1081650/821649

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说明

1.调用组件的render方法
   panel.render('div');

2.在配置中指定 renderTo 属性
   renderTo:'div',

3.配置中指定 applyTo ,这将把元素呈现到该属性的父元素上
   applyTo:'divChild',

4.通过指定 el 属性,指定后调用 render 方法
   el:'div'
   panel.render();

5.通过调用 show 方法
   panel.show(); //一般用在显示已经被 hide 的元素上

总结:el与renderTo相似,都是渲染到某个HTML元素。

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. })() 

 

 

 

 

 

 

 

 

 

 

 

 

你可能感兴趣的:(ExtJs)