ExtJSサンプルまとめ-3

33115 ワード
職場 ExtJs レジャー
http://tianya23.blog.51cto.com/1081650/813863
http://tianya23.blog.51cto.com/1081650/821649
1、Ajax標準要求：

  
  
  
  
    
   
   
   
   
  1. Ext.Ajax.request({ 
    2. 
   
   
   
   
  2.                                     url : '../../blackList/deleteBlackLists.do', 
    3. 
   
   
   
   
  3.                                     params : { 
    4. 
   
   
   
   
  4.                                         records : blackListRecords 
    5. 
   
   
   
   
  5.                                     }, 
    6. 
   
   
   
   
  6.                                     success : function(response, opts) { 
    7. 
   
   
   
   
  7.                                         var data = Ext 
    8. 
   
   
   
   
  8.                                                 .decode(response.responseText); 
    9. 
   
   
   
   
  9.                                         if (data.success) { 
    10. 
   
   
   
   
  10.                                             Ext.MessageBox.alert('  ', '    !'); 
    11. 
   
   
   
   
  11.                                         } else { 
    12. 
   
   
   
   
  12.                                             Ext.MessageBox.alert('  ', '    !'); 
    13. 
   
   
   
   
  13.                                         } 
    14. 
   
   
   
   
  14.                                     }, 
    15. 
   
   
   
   
  15.                                     failure : function() { 
    16. 
   
   
   
   
  16.                                         Ext.MessageBox.alert('  ', '    !'); 
    17. 
   
   
   
   
  17.                                     } 
    18. 
   
   
   
   
  18.                                 }); 
    19.
2、ログイン

  
  
  
  
    
   
   
   
   
  1. Ext.onReady(function() { 
    2. 
   
   
   
   
  2.     Ext.QuickTips.init(); 
    3. 
   
   
   
   
  3.     var adminRadio = new Ext.form.Radio({ 
    4. 
   
   
   
   
  4.                 boxLabel : '   ', 
    5. 
   
   
   
   
  5.                 inputValue : 'admin', 
    6. 
   
   
   
   
  6.                 listeners : { 
    7. 
   
   
   
   
  7.                     'check' : function() { 
    8. 
   
   
   
   
  8.                         if (adminRadio.getValue()) { 
    9. 
   
   
   
   
  9.                             userRadio.setValue(false); 
    10. 
   
   
   
   
  10.                             adminRadio.setValue(true); 
    11. 
   
   
   
   
  11.                         } 
    12. 
   
   
   
   
  12.                     } 
    13. 
   
   
   
   
  13.                 } 
    14. 
   
   
   
   
  14.             }); 
    15. 
   
   
   
   
  15.     var userRadio = new Ext.form.Radio({ 
    16. 
   
   
   
   
  16.                 boxLabel : '    ', 
    17. 
   
   
   
   
  17.                 inputValue : 'user', 
    18. 
   
   
   
   
  18.                 listeners : { 
    19. 
   
   
   
   
  19.                     'check' : function() { 
    20. 
   
   
   
   
  20.                         if (userRadio.getValue()) { 
    21. 
   
   
   
   
  21.                             adminRadio.setValue(false); 
    22. 
   
   
   
   
  22.                             userRadio.setValue(true); 
    23. 
   
   
   
   
  23.                         } 
    24. 
   
   
   
   
  24.                     } 
    25. 
   
   
   
   
  25.                 } 
    26. 
   
   
   
   
  26.             }); 
    27. 
   
   
   
   
  27.     var _form = new Ext.form.FormPanel({ 
    28. 
   
   
   
   
  28.                 title : '    ', 
    29. 
   
   
   
   
  29.                 frame : true, 
    30. 
   
   
   
   
  30.                 width : 290, 
    31. 
   
   
   
   
  31.                 height : 160, 
    32. 
   
   
   
   
  32.                 layout : 'form', 
    33. 
   
   
   
   
  33.                 buttonAlign : 'center', 
    34. 
   
   
   
   
  34.                 labelAlign : 'center', 
    35. 
   
   
   
   
  35.                 defaults : { 
    36. 
   
   
   
   
  36.                     width : 160, 
    37. 
   
   
   
   
  37.                     labelWidth : 80, 
    38. 
   
   
   
   
  38.                     xtype : 'textfield' 
    39. 
   
   
   
   
  39.                 }, 
    40. 
   
   
   
   
  40.                 items : [{ 
    41. 
   
   
   
   
  41.                             fieldLabel : '     ', 
    42. 
   
   
   
   
  42.                             vtype : 'alpha', 
    43. 
   
   
   
   
  43.                             id : 'name', 
    44. 
   
   
   
   
  44.                             name : 'name' 
    45. 
   
   
   
   
  45.                         }, { 
    46. 
   
   
   
   
  46.                             fieldLabel : '     ', 
    47. 
   
   
   
   
  47.                             inputType : 'password', 
    48. 
   
   
   
   
  48.                             vtype : 'alpha', 
    49. 
   
   
   
   
  49.                             id : 'pass', 
    50. 
   
   
   
   
  50.                             name : 'pass' 
    51. 
   
   
   
   
  51.                         }, { 
    52. 
   
   
   
   
  52.                             xtype : 'radiogroup', 
    53. 
   
   
   
   
  53.                             fieldLabel : '    ', 
    54. 
   
   
   
   
  54.                             id : 'typeRadio', 
    55. 
   
   
   
   
  55.                             items : [adminRadio, userRadio] 
    56. 
   
   
   
   
  56.                         }], 
    57. 
   
   
   
   
  57.                 buttons : [{ 
    58. 
   
   
   
   
  58.                             text : '   ', 
    59. 
   
   
   
   
  59.                             style : 'margin-right:15' 
    60. 
   
   
   
   
  60.                         }, { 
    61. 
   
   
   
   
  61.                             text : '   ', 
    62. 
   
   
   
   
  62.                             style : 'margin-left:15', 
    63. 
   
   
   
   
  63.                             handler : function() { 
    64. 
   
   
   
   
  64.                                 var _name = _form.findById('name').setValue(''); 
    65. 
   
   
   
   
  65.                                 var _pass = _form.findById('pass').setValue(''); 
    66. 
   
   
   
   
  66.                             } 
    67. 
   
   
   
   
  67.                         }] 
    68. 
   
   
   
   
  68.             }); 
    69. 
   
   
   
   
  69.             _form.render('container'); 
    70. 
   
   
   
   
  70. }) 
    71.
 3、columnレイアウトの中のfieldLabelが消える解決方法：中にlayoutを加える。 : 'form'  

  
  
  
  
    
   
   
   
   
  1. layout : 'form', 
    2. 
   
   
   
   
  2. items : [item_ListType, { 
    3. 
   
   
   
   
  3.             layout : 'column', 
    4. 
   
   
   
   
  4.             border : false, 
    5. 
   
   
   
   
  5.             labelWidth : 60, 
    6. 
   
   
   
   
  6.             items : [{ 
    7. 
   
   
   
   
  7.                         layout : 'form', 
    8. 
   
   
   
   
  8.                         items : listType 
    9. 
   
   
   
   
  9.                     }, { 
    10. 
   
   
   
   
  10.                         layout : 'form', 
    11. 
   
   
   
   
  11.                         items : item_simpleQuery 
    12. 
   
   
   
   
  12.                     }] 
    13. 
   
   
   
   
  13.         }, { 
    14. 
   
   
   
   
  14.             layout : 'column', 
    15. 
   
   
   
   
  15.             border : false, 
    16. 
   
   
   
   
  16.             items : [{ 
    17. 
   
   
   
   
  17.                         layout : 'form', 
    18. 
   
   
   
   
  18.                         items : item_startTime 
    19. 
   
   
   
   
  19.                     }, { 
    20. 
   
   
   
   
  20.                         layout : 'form', 
    21. 
   
   
   
   
  21.                         items : item_endTime 
    22. 
   
   
   
   
  22.                     }] 
    23. 
   
   
   
   
  23.         }] 
    24.
 4、htmlのdomノード：body
Dcument.body
5、new Ext.Viewport：
レンダーやショーはいらないので、divを先に定義する必要もありません。
全体のレイアウトによく使われます。
6、windowの機能点
モダリティウィンドウ：modal : ボロア
7、ダイアログ
confirmダイアログ:

  
  
  
  
    
   
   
   
   
  1. Ext.Msg.confirm('Name', '      ？', function(btn) { 
    2. 
   
   
   
   
  2.         if (btn == 'yes') { 
    3. 
   
   
   
   
  3.             // process text value and close... 
    4. 
   
   
   
   
  4.             Ext.Msg.alert('Status', "     "); 
    5. 
   
   
   
   
  5.             //btn.hide(); 
    6. 
   
   
   
   
  6.         } else { 
    7. 
   
   
   
   
  7.             Ext.Msg.alert('Status', "    "); 
    8. 
   
   
   
   
  8.         } 
    9. 
   
   
   
   
  9.     }); 
    10.
promptダイアログ:

  
  
  
  
    
   
   
   
   
  1. Ext.Msg.prompt('Name', 'Please enter your name:', function(btn, text){ 
    2. 
   
   
   
   
  2.     if (btn == 'ok'){ 
    3. 
   
   
   
   
  3.         // process text value and close... 
    4. 
   
   
   
   
  4.         Ext.Msg.alert('Status', text); 
    5. 
   
   
   
   
  5.         //btn.hide(); 
    6. 
   
   
   
   
  6.     } 
    7. 
   
   
   
   
  7. }); 
    8.
モーダルダイアログ:modal: true  

  
  
  
  
    
   
   
   
   
  1. var window = new Ext.Window({ 
    2. 
   
   
   
   
  2.                     width : 400, 
    3. 
   
   
   
   
  3.                     height : 300, 
    4. 
   
   
   
   
  4.                     modal: true 
    5. 
   
   
   
   
  5.                 }); 
    6. 
   
   
   
   
  6.                 window.show(); 
    7.
 
8、ツリー展開

  
  
  
  
    
   
   
   
   
  1. var vroot = new Ext.tree.TreeNode({ 
    2. 
   
   
   
   
  2.     text : 'root node', 
    3. 
   
   
   
   
  3.     expanded : tree, 
    4. 
   
   
   
   
  4. // hidden : true 
    5. 
   
   
   
   
  5. }); 
    6. 
   
   
   
   
  6.  
    7. 
   
   
   
   
  7. var sub11 = new Ext.tree.TreeNode({ 
    8. 
   
   
   
   
  8.     text : 'sub node11' 
    9. 
   
   
   
   
  9. }); 
    10. 
   
   
   
   
  10. var sub12 = new Ext.tree.TreeNode({ 
    11. 
   
   
   
   
  11.     text : 'sub node12' 
    12. 
   
   
   
   
  12. }); 
    13. 
   
   
   
   
  13. var sub1 = new Ext.tree.TreeNode({ 
    14. 
   
   
   
   
  14.     text : 'sub node1' 
    15. 
   
   
   
   
  15. }); 
    16. 
   
   
   
   
  16. sub1.appendChild(sub11); 
    17. 
   
   
   
   
  17. sub1.appendChild(sub12); 
    18. 
   
   
   
   
  18.  
    19. 
   
   
   
   
  19. var sub2 = new Ext.tree.TreeNode({ 
    20. 
   
   
   
   
  20.     text : 'sub node1' 
    21. 
   
   
   
   
  21. }); 
    22. 
   
   
   
   
  22. var sub31 = new Ext.tree.TreeNode({ 
    23. 
   
   
   
   
  23.     text : 'sub node11' 
    24. 
   
   
   
   
  24. }); 
    25. 
   
   
   
   
  25. var sub32 = new Ext.tree.TreeNode({ 
    26. 
   
   
   
   
  26.     text : 'sub node12' 
    27. 
   
   
   
   
  27. }); 
    28. 
   
   
   
   
  28.  
    29. 
   
   
   
   
  29. var sub3 = new Ext.tree.TreeNode({ 
    30. 
   
   
   
   
  30.     text : 'sub node1' 
    31. 
   
   
   
   
  31. }); 
    32. 
   
   
   
   
  32. sub3.appendChild(sub31); 
    33. 
   
   
   
   
  33. sub3.appendChild(sub32); 
    34. 
   
   
   
   
  34.  
    35. 
   
   
   
   
  35. var sub4 = new Ext.tree.TreeNode({ 
    36. 
   
   
   
   
  36.     text : 'sub node1' 
    37. 
   
   
   
   
  37. }); 
    38. 
   
   
   
   
  38.  
    39. 
   
   
   
   
  39. vroot.appendChild(sub1); 
    40. 
   
   
   
   
  40. vroot.appendChild(sub2); 
    41. 
   
   
   
   
  41. vroot.appendChild(sub3); 
    42. 
   
   
   
   
  42. vroot.appendChild(sub4); 
    43. 
   
   
   
   
  43.  
    44. 
   
   
   
   
  44. var tree = new Ext.tree.TreePanel({ 
    45. 
   
   
   
   
  45.     title : 'tree panel', 
    46. 
   
   
   
   
  46.     root : vroot, 
    47. 
   
   
   
   
  47.     width : 400, 
    48. 
   
   
   
   
  48.     height : 300, 
    49. 
   
   
   
   
  49.     listeners : { 
    50. 
   
   
   
   
  50.         afterrender : function(p) { 
    51. 
   
   
   
   
  51.             var root = p.getRootNode(); 
    52. 
   
   
   
   
  52.             root.expand(); 
    53. 
   
   
   
   
  53.             var children = root.childNodes; 
    54. 
   
   
   
   
  54.             Ext.each(children, function(child) { 
    55. 
   
   
   
   
  55.                 if (!child.isLeaf()) { 
    56. 
   
   
   
   
  56.                     child.expand(); 
    57. 
   
   
   
   
  57.                 } 
    58. 
   
   
   
   
  58.             }); 
    59. 
   
   
   
   
  59.         } 
    60. 
   
   
   
   
  60.     } 
    61. 
   
   
   
   
  61. }); 
    62. 
   
   
   
   
  62. tree.render(document.body); 
    63.
 8、Aray配列操作： Ext.each
  • Ext.each（children、 function(child) { 
    •                 if (!child.isLeaf() { 
  •                     child.expand() 
    •                 } 
  •             }); 
    •  
     9、treeまとめ
    ルートノードを隠す：TreePanelのroot Visibleを使う：false
    すべてを展開します。TreePanelのexpandAll()
    すべてを収める:collappseAll()
    10、formフィードバック
    
  
  
  
  
      
   
   
   
   
    1. Ext.Ajax.request({ 
      2. 
   
   
   
   
    2.                         url : '../../server/getServerById.do', 
      3. 
   
   
   
   
    3.                         params : { 
      4. 
   
   
   
   
    4.                             serverId : serverId 
      5. 
   
   
   
   
    5.                         }, 
      6. 
   
   
   
   
    6.                         success : function(response, opts) { 
      7. 
   
   
   
   
    7.                             console.log(response); 
      8. 
   
   
   
   
    8.                             var data = Ext.decode(response.responseText).data[0]; 
      9. 
   
   
   
   
    9.                             server.getComponent(0).getForm().setValues(data); 
      10. 
   
   
   
   
    10.                         }, 
      11. 
   
   
   
   
    11.                         failure : function(response, opts) { 
      12. 
   
   
   
   
    12.                             Ext.Msg.alert("info", "  server  "); 
      13. 
   
   
   
   
    13.                         } 
      14. 
   
   
   
   
    14.             }); 
      15.
    11、textfieldを灰にする
    //disabled：true、提出不可
    readOnly：true、 
    style：“background：萶C 1；” 
    12、フォームリセットと設定
    リセット:
    
  
  
  
  
      
   
   
   
   
    1. text : 'reset', 
      2. 
   
   
   
   
    2. handler : function() { 
      3. 
   
   
   
   
    3.     fpanel.getForm().reset(); 
      4. 
   
   
   
   
    4. } 
      5.
    設定値:
    
  
  
  
  
      
   
   
   
   
    1. text : 'set value', 
      2. 
   
   
   
   
    2. handler : function() { 
      3. 
   
   
   
   
    3.     fpanel.getForm().setValues([ { 
      4. 
   
   
   
   
    4.         id : 'name', 
      5. 
   
   
   
   
    5.         value : 'zhangsan' 
      6. 
   
   
   
   
    6.     }, { 
      7. 
   
   
   
   
    7.         id : 'age', 
      8. 
   
   
   
   
    8.         value : '15' 
      9. 
   
   
   
   
    9.     }, { 
      10. 
   
   
   
   
    10.         id : 'description', 
      11. 
   
   
   
   
    11.         value : 'my name is zhangsan!' 
      12. 
   
   
   
   
    12.     } ]); 
      13. 
   
   
   
   
    13. } 
      14.
    検索値:
    
  
  
  
  
      
   
   
   
   
    1. text : 'find value', 
      2. 
   
   
   
   
    2. handler : function() { 
      3. 
   
   
   
   
    3.     var nameValue = fpanel.getForm().findField('name').getValue(); 
      4. 
   
   
   
   
    4.     alert(nameValue); 
      5. 
   
   
   
   
    5. } 
      6.
    13、リモート取得データ
    servlet:
    中国語を含む最初の設定文字セット：レスポンス.set CharcterEnccoding（「utf-8」）；
    
  
  
  
  
      
   
   
   
   
    1. response.getWriter() 
      2. 
   
   
   
   
    2.                     .write("{success:true,msg:'  ',data : {name : 'lisi', age :'20',description : 'i am lisi!'}}"); 
      3.
    【注意】フォーマットは：{success:true，msg:'成功'，data : {name : 'lisi メッセージ :'20'}、そのうち：success、dataがキーワードです。
    先端ロードデータ:
    
  
  
  
  
      
   
   
   
   
    1. text : 'load value from remote', 
      2. 
   
   
   
   
    2. handler : function() { 
      3. 
   
   
   
   
    3.     fpanel.getForm().load({ 
      4. 
   
   
   
   
    4.         url : 'LoginServlet', 
      5. 
   
   
   
   
    5.         params : { 
      6. 
   
   
   
   
    6.             appId : 5 
      7. 
   
   
   
   
    7.         } 
      8. 
   
   
   
   
    8.     }) 
      9. 
   
   
   
   
    9. } 
      10.
    14、起動とローディング：アフタヌーンイベントの傍受
    
  
  
  
  
      
   
   
   
   
    1. listeners : { 
      2. 
   
   
   
   
    2.             'afterrender' : function() { 
      3. 
   
   
   
   
    3.                 fpanel.getForm().load({ 
      4. 
   
   
   
   
    4.                     url : 'LoginServlet', 
      5. 
   
   
   
   
    5.                     params : { 
      6. 
   
   
   
   
    6.                         appId : 5 
      7. 
   
   
   
   
    7.                     }, 
      8. 
   
   
   
   
    8.                     success : function(response, responseText) { 
      9. 
   
   
   
   
    9.                         Ext.Msg.alert('success', responseText.msg); 
      10. 
   
   
   
   
    10.                     }, 
      11. 
   
   
   
   
    11.                     failure : function(response, responseText) { 
      12. 
   
   
   
   
    12.                         Ext.Msg.alert('fali', responseText.msg); 
      13. 
   
   
   
   
    13.                     } 
      14. 
   
   
   
   
    14.                 }) 
      15. 
   
   
   
   
    15.  
      16. 
   
   
   
   
    16.             } 
      17. 
   
   
   
   
    17.         }
      18.
    15、gridの内容を動的に更新する
    成功後、再度searchメソッドを呼び出し、gridの内容を再度確認する。
    16、commbo表示と伝達の異なる値の処理
    
  
  
  
  
      
   
   
   
   
    1. var listKey = new Ext.form.ComboBox({ 
      2. 
   
   
   
   
    2.                     fieldLabel : '    ', 
      3. 
   
   
   
   
    3.                     //name : 'listKey', 
      4. 
   
   
   
   
    4.                     width : 130, 
      5. 
   
   
   
   
    5.                     typeAhead : true, 
      6. 
   
   
   
   
    6.                     triggerAction : 'all', 
      7. 
   
   
   
   
    7.                     lazyRender : true, 
      8. 
   
   
   
   
    8.                     mode : 'local', 
      9. 
   
   
   
   
    9.                     allowBlank : false, 
      10. 
   
   
   
   
    10.                     store : new Ext.data.ArrayStore({ 
      11. 
   
   
   
   
    11.                                 fields : ['listKeyDisplay', 'list_Key'], 
      12. 
   
   
   
   
    12.                                 data : [ ['all', ''],['ip', 'ip'], ['cookie', 'cookie'],['__last_loginid__', '__last_loginid__']] 
      13. 
   
   
   
   
    13.                             }), 
      14. 
   
   
   
   
    14.                     hiddenName:'listKey', 
      15. 
   
   
   
   
    15.                     displayField : 'listKeyDisplay', 
      16. 
   
   
   
   
    16.                     valueField : 'list_Key', 
      17. 
   
   
   
   
    17.                     listeners:{ 
      18. 
   
   
   
   
    18.                         afterrender: function(thiz) { 
      19. 
   
   
   
   
    19.                             thiz.selectText('all'); 
      20. 
   
   
   
   
    20.                         } 
      21. 
   
   
   
   
    21.                     } 
      22. 
   
   
   
   
    22.                 }); 
      23.
    【注意】hiddenNameは必ずあります。でなければdisplayの値を伝えます。valueの値転送を設定しますが、display値は無効ですので、afterrenderを使って設定します。
    17、フォームの提出
    方法1：buttonを取得することにより、増加したclickイベントでajax要求を使用し、requestでform属性を追加でき、フォームのパラメータを取得して提出する。
    方法2：formというコンポーネントを取得してsubmitを操作する
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    AndroidオープンソースフレームUniversal-Ingel-loader学習なし——WeakMemoryCacheとFuzyKery MemoryCache
    Problem 16 of 2の1000乗