ExtJSサンプルまとめ-1

28571 ワード
ExtJs
extjs 2:http://tianya23.blog.51cto.com/1081650/821649
1、コンボボックス

  
  
  
  
    
   
   
   
   
  1. new Ext.onReady(function(){ 
    2. 
   
   
   
   
  2.     var top = new Ext.FormPanel({ 
    3. 
   
   
   
   
  3.         labelAlign: 'top', 
    4. 
   
   
   
   
  4.         frame:true, 
    5. 
   
   
   
   
  5.         title: 'Multi Column, Nested Layouts and Anchoring', 
    6. 
   
   
   
   
  6.         bodyStyle:'padding:5px 5px 0', 
    7. 
   
   
   
   
  7.         width: 600, 
    8. 
   
   
   
   
  8.         items: [{ 
    9. 
   
   
   
   
  9.             layout:'column', 
    10. 
   
   
   
   
  10.             items:[{ 
    11. 
   
   
   
   
  11.                 columnWidth:.5, 
    12. 
   
   
   
   
  12.                 layout: 'form', 
    13. 
   
   
   
   
  13.                 items: [{ 
    14. 
   
   
   
   
  14.                     xtype:'textfield', 
    15. 
   
   
   
   
  15.                     fieldLabel: 'First Name', 
    16. 
   
   
   
   
  16.                     name: 'first', 
    17. 
   
   
   
   
  17.                     anchor:'95%' 
    18. 
   
   
   
   
  18.                 }, { 
    19. 
   
   
   
   
  19.                     xtype:'textfield', 
    20. 
   
   
   
   
  20.                     fieldLabel: 'Company', 
    21. 
   
   
   
   
  21.                     name: 'company', 
    22. 
   
   
   
   
  22.                     anchor:'95%' 
    23. 
   
   
   
   
  23.                 }] 
    24. 
   
   
   
   
  24.             },{ 
    25. 
   
   
   
   
  25.                 columnWidth:.5, 
    26. 
   
   
   
   
  26.                 layout: 'form', 
    27. 
   
   
   
   
  27.                 items: [{ 
    28. 
   
   
   
   
  28.                     xtype:'textfield', 
    29. 
   
   
   
   
  29.                     fieldLabel: 'Last Name', 
    30. 
   
   
   
   
  30.                     name: 'last', 
    31. 
   
   
   
   
  31.                     anchor:'95%' 
    32. 
   
   
   
   
  32.                 },{ 
    33. 
   
   
   
   
  33.                     xtype:'textfield', 
    34. 
   
   
   
   
  34.                     fieldLabel: 'Email', 
    35. 
   
   
   
   
  35.                     name: 'email', 
    36. 
   
   
   
   
  36.                     vtype:'email', 
    37. 
   
   
   
   
  37.                     anchor:'95%' 
    38. 
   
   
   
   
  38.                 }] 
    39. 
   
   
   
   
  39.             }] 
    40. 
   
   
   
   
  40.         },{ 
    41. 
   
   
   
   
  41.             xtype:'htmleditor', 
    42. 
   
   
   
   
  42.             id:'bio', 
    43. 
   
   
   
   
  43.             fieldLabel:'Biography', 
    44. 
   
   
   
   
  44.             height:200, 
    45. 
   
   
   
   
  45.             anchor:'98%' 
    46. 
   
   
   
   
  46.         }], 
    47. 
   
   
   
   
  47.          
    48. 
   
   
   
   
  48.         buttons: [{ 
    49. 
   
   
   
   
  49.             text: 'Save' 
    50. 
   
   
   
   
  50.         },{ 
    51. 
   
   
   
   
  51.             text: 'Cancel' 
    52. 
   
   
   
   
  52.         }] 
    53. 
   
   
   
   
  53.     }); 
    54. 
   
   
   
   
  54.      
    55. 
   
   
   
   
  55.     top.render(document.body); 
    56. 
   
   
   
   
  56. }) ; 
    57.
2、ページレイアウト：layout、参考：http://virgoooos.iteye.com/blog/288924
absolute
名前の通り、コンテナ内部に指定された座標に基づいて位置を指定します。 
  • accordon
    • これが一番覚えやすいです。アコーディオンの効果です。  
  • アンチョー
    • この効果は具体的には何の効果があるか分かりません。注意してください。  1.容器内のセットは幅を指定するか、アンチョーで高さ・幅を同時に指定するか、  2.アンチョー値は通常負の値しかできません。正の値は意味がありません。  3.アンチョーは文字列の値でなければなりません。 
     
  • border
    • 容器を5つの区域に分けます。east、south、west、north、センター  
  • card
    • ウィザードをインストールするように、一枚ずつ表示します。  
  • column
    • 容器全体を一列と見なし、容器にサブ元素を入れる場合。
  • fit
    • 一つのサブ要素は容器全体に満ちます。複数のサブ要素が一つの要素だけが容器全体に満ちています。 
  • form
    • フォーム内の入力フィールドを管理するためのレイアウトです。  
  • テーブル
    • 普通の表の方法によって、サブ要素をレイアウトし、ラyoutConfig:{columns:3}、//親容器を3列に分けます。  
    3、ページをめくる効果
  • Ext.onReady(function() {     
  •     var i = 0;        
  •     var navHandler = function(direction) {     
  •         if （ディレクション == -1） {     
  •             i--;     
  •             if (i < 0) { i = 0; }     
  •         }        
  •         if （ディレクション == 1） {     
  •             i++;     
  •             if (i > 2） { i = 2. return false; }     
  •         }  
  •         var btnNext = Ext.get（「move-next」）；     
  •         var btnBack = Ext.get（「move-next」）；     
  •         if (i == 0) {     
  •             btnBack.disabled = true;     
  •         } else {     
  •             btnBack.disabled = false;     
  •         }     
  •         if (i == 2） {     
  •             btnNext.value = 仕上げる     
  •             btnNext.disabled = true;     
  •         } else {     
  •             btnNext.value = 次のステップ     
  •             btnNext.disabled = false;     
  •         }  
  •         card.get Layout().setActiveItem(i)     
  •     };     
  •    var カード = new Ext.Panel({     
  •         width: 200,     
  •         height: 200,     
  •         title: '登録ウィザード、     
  •         ラyout: 'カード     
  •         activeItem: 0, // メーク sure the active アイテム is セット オン the container config     
  •         bodyStyle: 'padding:15 px'     
  •         defaults: {     
  •             border: false     
  •         },     
  •         bar: ［     
  •             {     
  •                 id: 'move-prev'は、     
  •                 テキスト: '前のステップ     
  •                 ハンドル: navHandler.creat Delegate（this、 [-1])                         
  •             },     
  •             '->',     
  •             {     
  •                 id: 'move-next     
  •                 テキスト: '次のステップ     
  •                 ハンドル: navHandler.creat Delegate（this、 [1]     
  •             }     
  •         ],     
  •   
  •         アイテム: [{     
  •             id: 'card-0'     
  •             html数: '登録ガイドへようこそ！

    Step 1 保存先 3

    '     
  •         }, {     
  •             id: 'card-1     
  •             html数: '登録資料を記入してください。

    Step 2 保存先 3

    '     
  •         }, {     
  •             id: 'card-2     
  •             html数: '登録成功！

    Step 3 保存先 3 - Complettee

    '     
  •         }],     
  •         レンデター: 「container」     
  •     });     
  • } 
    • 4、render、render To、aplayTo、el、ショーの説明
    1.コンポーネントのレンダーメソッドを呼び出す   panel.render('div');2.構成でrender To属性を指定します。   rendent:'div'，3.構成ではappyToを指定します。これはこの属性の親要素に要素を提示します。   appyTo:'divChild'は、4.el属性を指定することにより、指定後にレンダーメソッドを呼び出します。   el:'div'   panel.render（）;5.show方法を呼び出します。   panel.show()//一般的にはhideによって表示されている要素でまとめられています。elとrender Toは似ています。いずれもあるHTML要素にレンダリングされています。
    5、FormPanel使用
    
  
  
  
  
      
   
   
   
   
    1. var simple = new Ext.FormPanel({ 
      2. 
   
   
   
   
    2.         labelWidth : 75, // label settings here cascade unless overridden 
      3. 
   
   
   
   
    3.         url : 'save-form.php', 
      4. 
   
   
   
   
    4.         frame : true, 
      5. 
   
   
   
   
    5.         title : 'Simple Form', 
      6. 
   
   
   
   
    6.         bodyStyle : 'padding:5px 5px 0', 
      7. 
   
   
   
   
    7.         width : 350, 
      8. 
   
   
   
   
    8.         defaults : { 
      9. 
   
   
   
   
    9.             width : 230 
      10. 
   
   
   
   
    10.         }, 
      11. 
   
   
   
   
    11.         defaultType : 'textfield', 
      12. 
   
   
   
   
    12.  
      13. 
   
   
   
   
    13.         items : [ { 
      14. 
   
   
   
   
    14.             fieldLabel : 'First Name', 
      15. 
   
   
   
   
    15.             name : 'first', 
      16. 
   
   
   
   
    16.             allowBlank : false 
      17. 
   
   
   
   
    17.         }, { 
      18. 
   
   
   
   
    18.             fieldLabel : 'Last Name', 
      19. 
   
   
   
   
    19.             name : 'last' 
      20. 
   
   
   
   
    20.         }, { 
      21. 
   
   
   
   
    21.             fieldLabel : 'Company', 
      22. 
   
   
   
   
    22.             name : 'company' 
      23. 
   
   
   
   
    23.         }, { 
      24. 
   
   
   
   
    24.             fieldLabel : 'Email', 
      25. 
   
   
   
   
    25.             name : 'email', 
      26. 
   
   
   
   
    26.             vtype : 'email' 
      27. 
   
   
   
   
    27.         }, new Ext.form.TimeField({ 
      28. 
   
   
   
   
    28.             fieldLabel : 'Time', 
      29. 
   
   
   
   
    29.             name : 'time', 
      30. 
   
   
   
   
    30.             minValue : '8:00am', 
      31. 
   
   
   
   
    31.             maxValue : '6:00pm' 
      32. 
   
   
   
   
    32.         }) ], 
      33. 
   
   
   
   
    33.  
      34. 
   
   
   
   
    34.         buttons : [ { 
      35. 
   
   
   
   
    35.             text : 'Save' 
      36. 
   
   
   
   
    36.         }, { 
      37. 
   
   
   
   
    37.             text : 'Cancel' 
      38. 
   
   
   
   
    38.         } ] 
      39. 
   
   
   
   
    39.     }); 
      40. 
   
   
   
   
    40.     simple.render(document.body); 
      41.
    6、viewportとborderのレイアウト
    
  
  
  
  
      
   
   
   
   
    1. new Ext.Viewport({ 
      2. 
   
   
   
   
    2.     layout: 'border', 
      3. 
   
   
   
   
    3.     items: [{ 
      4. 
   
   
   
   
    4.         region: 'north', 
      5. 
   
   
   
   
    5.         html: '<h1 class="x-panel-header">Page Title</h1>', 
      6. 
   
   
   
   
    6.         autoHeight: true, 
      7. 
   
   
   
   
    7.         border: false, 
      8. 
   
   
   
   
    8.         margins: '0 0 5 0' 
      9. 
   
   
   
   
    9.     }, { 
      10. 
   
   
   
   
    10.         region: 'west', 
      11. 
   
   
   
   
    11.         collapsible: true, 
      12. 
   
   
   
   
    12.         title: 'Navigation', 
      13. 
   
   
   
   
    13.         width: 200 
      14. 
   
   
   
   
    14.         // the west region might typically utilize a TreePanel or a Panel with Accordion layout 
      15. 
   
   
   
   
    15.     }, { 
      16. 
   
   
   
   
    16.         region: 'south', 
      17. 
   
   
   
   
    17.         title: 'Title for Panel', 
      18. 
   
   
   
   
    18.         collapsible: true, 
      19. 
   
   
   
   
    19.         html: 'Information goes here', 
      20. 
   
   
   
   
    20.         split: true, 
      21. 
   
   
   
   
    21.         height: 100, 
      22. 
   
   
   
   
    22.         minHeight: 100 
      23. 
   
   
   
   
    23.     }, { 
      24. 
   
   
   
   
    24.         region: 'east', 
      25. 
   
   
   
   
    25.         title: 'Title for the Grid Panel', 
      26. 
   
   
   
   
    26.         collapsible: true, 
      27. 
   
   
   
   
    27.         split: true, 
      28. 
   
   
   
   
    28.         width: 200, 
      29. 
   
   
   
   
    29.         xtype: 'grid', 
      30. 
   
   
   
   
    30.         // remaining grid configuration not shown ... 
      31. 
   
   
   
   
    31.         // notice that the GridPanel is added directly as the region 
      32. 
   
   
   
   
    32.         // it is not "overnested" inside another Panel 
      33. 
   
   
   
   
    33.     }, { 
      34. 
   
   
   
   
    34.         region: 'center', 
      35. 
   
   
   
   
    35.         xtype: 'tabpanel', // TabPanel itself has no title 
      36. 
   
   
   
   
    36.         items: { 
      37. 
   
   
   
   
    37.             title: 'Default Tab', 
      38. 
   
   
   
   
    38.             html: 'The first tab\'s content. Others may be added dynamically' 
      39. 
   
   
   
   
    39.         } 
      40. 
   
   
   
   
    40.     }] 
      41. 
   
   
   
   
    41. }); 
      42.
    6、store、model
    
  
  
  
  
      
   
   
   
   
    1. Ext.onReady(function() { 
      2. 
   
   
   
   
    2.     var myStore = new Ext.data.ArrayStore({ 
      3. 
   
   
   
   
    3.         fields: ['id','fullname', 'first'], 
      4. 
   
   
   
   
    4.         idIndex: 0 // id for each record will be the first element 
      5. 
   
   
   
   
    5.     }); 
      6. 
   
   
   
   
    6.     var myData = [ 
      7. 
   
   
   
   
    7.                   [1, 'Fred Flintstone', 'Fred'],  // note that id for the 
      8. 
   
   
   
   
    8.                   // record is the first 
      9. 
   
   
   
   
    9.                   // element 
      10. 
   
   
   
   
    10.                   [2, 'Barney Rubble', 'Barney'] 
      11. 
   
   
   
   
    11.                   ]; 
      12. 
   
   
   
   
    12.      
      13. 
   
   
   
   
    13.      
      14. 
   
   
   
   
    14.     myStore.loadData(myData); 
      15. 
   
   
   
   
    15.      
      16. 
   
   
   
   
    16.     myStore.each(function(model) { 
      17. 
   
   
   
   
    17.         alert(model.get('fullname')); 
      18. 
   
   
   
   
    18.     }); 
      19. 
   
   
   
   
    19. }); 
      20.
    7、パネル全体の色調を揃える
    frame:true 
    Trueはパネルの外枠としてカスタマイズ可能であり、falseは外枠の1 pxが可能な点線（デフォルトはfalse）を表しています。
    8、cobo使用
    
  
  
  
  
      
   
   
   
   
    1. new Ext.onReady(function() { 
      2. 
   
   
   
   
    2.     var mystore = new Ext.data.ArrayStore({ 
      3. 
   
   
   
   
    3.         fields : [ 'myId', 'displayText' ], 
      4. 
   
   
   
   
    4.         data : [ [ 1, 'ALL' ], [ 2, 'IP' ], [ 3, 'COOKIE' ] ] 
      5. 
   
   
   
   
    5.     }); 
      6. 
   
   
   
   
    6.     var top = new Ext.FormPanel({ 
      7. 
   
   
   
   
    7.         width : 600, 
      8. 
   
   
   
   
    8.         height : 400, 
      9. 
   
   
   
   
    9.         title : 'hello', 
      10. 
   
   
   
   
    10.         labelWidth: 50, 
      11. 
   
   
   
   
    11.         labelAlign:'right', 
      12. 
   
   
   
   
    12.         bodyStyle : 'padding:5px 5px 10 10', 
      13. 
   
   
   
   
    13.         frame : true, 
      14. 
   
   
   
   
    14.         defaults : { 
      15. 
   
   
   
   
    15.             xtype : 'combo', 
      16. 
   
   
   
   
    16.             width : 120, 
      17. 
   
   
   
   
    17.             height : 20, 
      18. 
   
   
   
   
    18.             typeAhead: true, 
      19. 
   
   
   
   
    19.             triggerAction: 'all', 
      20. 
   
   
   
   
    20.             lazyRender:true, 
      21. 
   
   
   
   
    21.             mode: 'local', 
      22. 
   
   
   
   
    22.             valueField: 'myId', 
      23. 
   
   
   
   
    23.             displayField: 'displayText' 
      24. 
   
   
   
   
    24.         }, 
      25. 
   
   
   
   
    25.         items : [ { 
      26. 
   
   
   
   
    26.             fieldLabel : 'lable1', 
      27. 
   
   
   
   
    27.             store : mystore 
      28. 
   
   
   
   
    28.         } 
      29. 
   
   
   
   
    29.         , { 
      30. 
   
   
   
   
    30.             fieldLabel : 'lable2', 
      31. 
   
   
   
   
    31.             store : mystore 
      32. 
   
   
   
   
    32.         }, { 
      33. 
   
   
   
   
    33.             fieldLabel : 'lable3', 
      34. 
   
   
   
   
    34.             store : mystore 
      35. 
   
   
   
   
    35.         }, { 
      36. 
   
   
   
   
    36.             fieldLabel : 'lable4', 
      37. 
   
   
   
   
    37.             store : mystore 
      38. 
   
   
   
   
    38.         }, { 
      39. 
   
   
   
   
    39.             fieldLabel : 'lable5', 
      40. 
   
   
   
   
    40.             store : mystore 
      41. 
   
   
   
   
    41.         }, { 
      42. 
   
   
   
   
    42.             fieldLabel : 'lable6', 
      43. 
   
   
   
   
    43.             store : mystore 
      44. 
   
   
   
   
    44.         }, { 
      45. 
   
   
   
   
    45.             fieldLabel : 'lable7', 
      46. 
   
   
   
   
    46.             store : mystore 
      47. 
   
   
   
   
    47.         }, { 
      48. 
   
   
   
   
    48.             fieldLabel : 'lable8', 
      49. 
   
   
   
   
    49.             store : mystore 
      50. 
   
   
   
   
    50.         } ], 
      51. 
   
   
   
   
    51.         buttons : [ { 
      52. 
   
   
   
   
    52.             text : 'save' 
      53. 
   
   
   
   
    53.         }, { 
      54. 
   
   
   
   
    54.             text : 'cancel' 
      55. 
   
   
   
   
    55.         } ] 
      56. 
   
   
   
   
    56.     }); 
      57. 
   
   
   
   
    57.  
      58. 
   
   
   
   
    58.     top.render(document.body); 
      59. 
   
   
   
   
    59. }); 
      60.
    9、labelラベルとcompboの間の距離を調整する。
    label Width：50、
    label Align:'right'
    10、デバッグ
    chrome:scripts->デバッグが必要なjsファイルを選択し、ブレークポイントでデバッグを行う
    ctrl+shift+i後：network->documentsでrequest転送のパラメータが確認できます。
    11、Ajax連動メニューの実現  
    
  
  
  
  
      
   
   
   
   
    1. (function(){ 
      2. 
   
   
   
   
    2.     function createChild(value,name){ 
      3. 
   
   
   
   
    3.         var el = document.createElement("option"); 
      4. 
   
   
   
   
    4.         el.setAttribute("value",value); 
      5. 
   
   
   
   
    5.         el.appendChild(document.createTextNode(name)); 
      6. 
   
   
   
   
    6.         return el; 
      7. 
   
   
   
   
    7.     } 
      8. 
   
   
   
   
    8.     var data = {}; 
      9. 
   
   
   
   
    9.      
      10. 
   
   
   
   
    10.     Ext.onReady(function(){ 
      11. 
   
   
   
   
    11.         //1.  city  dom   
      12. 
   
   
   
   
    12.         var cityObj = Ext.get("city"); 
      13. 
   
   
   
   
    13.         //2.     city      change 
      14. 
   
   
   
   
    14.         cityObj.on("change",function(e,select){ 
      15. 
   
   
   
   
    15.             //3.         
      16. 
   
   
   
   
    16.             var ids =  select.options[select.selectedIndex].value; 
      17. 
   
   
   
   
    17.             //3.1               ,            
      18. 
   
   
   
   
    18.             if(data["city"]){ 
      19. 
   
   
   
   
    19.                 //     
      20. 
   
   
   
   
    20.             }else{ 
      21. 
   
   
   
   
    21.                 // ajax 
      22. 
   
   
   
   
    22.             } 
      23. 
   
   
   
   
    23.             //4.ajax           
      24. 
   
   
   
   
    24.             Ext.Ajax.request({ 
      25. 
   
   
   
   
    25.                 url:'/extjs/extjs!menu.action', 
      26. 
   
   
   
   
    26.                 params:{ids:ids}, 
      27. 
   
   
   
   
    27.                 method:'post', 
      28. 
   
   
   
   
    28.                 timeout:4000, 
      29. 
   
   
   
   
    29.                 success:function(response,opts){ 
      30. 
   
   
   
   
    30.                     var obj = eval(response.responseText); 
      31. 
   
   
   
   
    31.                     //5.         area DOM 
      32. 
   
   
   
   
    32.                     var oldObj = Ext.get("area").dom; 
      33. 
   
   
   
   
    33.                     //6.      
      34. 
   
   
   
   
    34.                     while(oldObj.length>0){ 
      35. 
   
   
   
   
    35.                         oldObj.options.remove(oldObj.length-1); 
      36. 
   
   
   
   
    36.                     } 
      37. 
   
   
   
   
    37.                     //7.      
      38. 
   
   
   
   
    38.                     Ext.Array.each(obj,function(o){ 
      39. 
   
   
   
   
    39.                         Ext.get('area').dom.appendChild(createChild(o.valueOf(),o.name)); 
      40. 
   
   
   
   
    40.                     }) 
      41. 
   
   
   
   
    41.                     //8.                   
      42. 
   
   
   
   
    42.                 } 
      43. 
   
   
   
   
    43.             }); 
      44. 
   
   
   
   
    44.         }); 
      45. 
   
   
   
   
    45.     }); 
      46. 
   
   
   
   
    46. })() 
      47.
     
     
     
     
     
     
     
     
     
     
     
    Java初心者の階段――bubble sort（泡立ちランキング）
    elasticsearch Sheld認証の2つの方式（http/java api）