ExtJSサンプルまとめ-2

45283 ワード
職場 ExtJs レジャー
http://tianya23.blog.51cto.com/1081650/813863
1、カードレイアウト

  
  
  
  
    
   
   
   
   
  1. Ext.onReady(function() { 
    2. 
   
   
   
   
  2.     var panel = new Ext.Panel({ 
    3. 
   
   
   
   
  3.         title : 'CardLayout', 
    4. 
   
   
   
   
  4.         width : 400, 
    5. 
   
   
   
   
  5.         height : 400, 
    6. 
   
   
   
   
  6.         frame : true, 
    7. 
   
   
   
   
  7.         applyTo : 'container', 
    8. 
   
   
   
   
  8.         autoScroll : true, 
    9. 
   
   
   
   
  9.         collapsible : true, 
    10. 
   
   
   
   
  10.         defaults : { 
    11. 
   
   
   
   
  11.             bodyStyle : 'background-color:#FFFFFF;padding:15px' 
    12. 
   
   
   
   
  12.         }, 
    13. 
   
   
   
   
  13.         layout : 'card', 
    14. 
   
   
   
   
  14.         activeItem : 0, 
    15. 
   
   
   
   
  15.         items : [ { 
    16. 
   
   
   
   
  16.             title : 'one', 
    17. 
   
   
   
   
  17.             html : '123', 
    18. 
   
   
   
   
  18.             id : 'p1' 
    19. 
   
   
   
   
  19.         }, { 
    20. 
   
   
   
   
  20.             title : 'Two', 
    21. 
   
   
   
   
  21.             html : '234', 
    22. 
   
   
   
   
  22.             id : 'p2' 
    23. 
   
   
   
   
  23.         }, { 
    24. 
   
   
   
   
  24.             title : 'Three', 
    25. 
   
   
   
   
  25.             html : '255', 
    26. 
   
   
   
   
  26.             id : 'p3' 
    27. 
   
   
   
   
  27.         } ], 
    28. 
   
   
   
   
  28.         buttons : [ { 
    29. 
   
   
   
   
  29.             text : '   ', 
    30. 
   
   
   
   
  30.             handler : ChangePage 
    31. 
   
   
   
   
  31.         }, { 
    32. 
   
   
   
   
  32.             text : '   ', 
    33. 
   
   
   
   
  33.             handler : ChangePage 
    34. 
   
   
   
   
  34.         } ] 
    35. 
   
   
   
   
  35.     }) 
    36. 
   
   
   
   
  36.     function ChangePage(btn) { 
    37. 
   
   
   
   
  37.         var index = Number(panel.layout.activeItem.id.substring(1)); 
    38. 
   
   
   
   
  38.         if (btn.text == '   ') { 
    39. 
   
   
   
   
  39.             index--; 
    40. 
   
   
   
   
  40.             if (index < 1) 
    41. 
   
   
   
   
  41.                 index = 1; 
    42. 
   
   
   
   
  42.         } else { 
    43. 
   
   
   
   
  43.             index++; 
    44. 
   
   
   
   
  44.             if (index > 3) 
    45. 
   
   
   
   
  45.                 index = 3; 
    46. 
   
   
   
   
  46.         } 
    47. 
   
   
   
   
  47.         panel.layout.setActiveItem('p' + index); 
    48. 
   
   
   
   
  48.     } 
    49. 
   
   
   
   
  49. }) 
    50.
2、クリックしたら選択します

  
  
  
  
    
   
   
   
   
  1. var panel = new Ext.Panel({ 
    2. 
   
   
   
   
  2.         width : 400, 
    3. 
   
   
   
   
  3.         height : 100, 
    4. 
   
   
   
   
  4.         frame:true, 
    5. 
   
   
   
   
  5.         defaults : { 
    6. 
   
   
   
   
  6.             xtype : 'textfield', 
    7. 
   
   
   
   
  7.             width : 140, 
    8. 
   
   
   
   
  8.             selectOnFocus : true, 
    9. 
   
   
   
   
  9.         }, 
    10. 
   
   
   
   
  10.         layout : 'form', 
    11. 
   
   
   
   
  11.         items : [ { 
    12. 
   
   
   
   
  12.             fieldLabel : '    ', 
    13. 
   
   
   
   
  13.             name : 'startTime', 
    14. 
   
   
   
   
  14.             value : new Date().dateFormat('Y-m-d H:i:s') 
    15. 
   
   
   
   
  15.         }, { 
    16. 
   
   
   
   
  16.             fieldLabel : '    ', 
    17. 
   
   
   
   
  17.             name : 'endTime', 
    18. 
   
   
   
   
  18.             value : new Date().dateFormat('Y-m-d H:i:s') 
    19. 
   
   
   
   
  19.         }, { 
    20. 
   
   
   
   
  20.             fieldLabel : 'IP', 
    21. 
   
   
   
   
  21.             name : 'searchIp' 
    22. 
   
   
   
   
  22.         } ] 
    23. 
   
   
   
   
  23.     }); 
    24.
3、textfieldの内容を取得する:Ext.getCmp(“name 1”).getValue();
id:'name 1',イベントハンドリングを追加

  
  
  
  
    
   
   
   
   
  1. handler : function() { 
    2. 
   
   
   
   
  2.                 var content = Ext.getCmp("name1").getValue(); //  
    3. 
   
   
   
   
  3.                 if (content == "") { 
    4. 
   
   
   
   
  4.                     alert("      ！"); 
    5. 
   
   
   
   
  5.                     // return false; 
    6. 
   
   
   
   
  6.                 } 
    7. 
   
   
   
   
  7.                 Ext.getCmp("name2").setValue(content); //  
    8. 
   
   
   
   
  8.             } 
    9.
(1)fs.form.findField(id/name).setValue(value)  (2)Ext.get(id/name).setValue(value)  (3)Ext.getCmp(id).setValue(value)    form内のfieldを取得する3つの方法  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. 
   
   
   
   
  2.     constructor: function(){ 
    3. 
   
   
   
   
  3.         this.state = "hungry";// full 
    4. 
   
   
   
   
  4.         this.setMilk = function(milk) { 
    5. 
   
   
   
   
  5.             this.fireEvent('hungry',milk);//   
    6. 
   
   
   
   
  6.         }, 
    7. 
   
   
   
   
  7.         this.addEvents({'hungry':true}),//   
    8. 
   
   
   
   
  8.         this.addListener('hungry',function(milk){ 
    9. 
   
   
   
   
  9.             if(this.state == 'hungry'){ 
    10. 
   
   
   
   
  10.                 this.drink(milk); 
    11. 
   
   
   
   
  11.             }else{ 
    12. 
   
   
   
   
  12.                 alert("i am not hungry!"); 
    13. 
   
   
   
   
  13.             } 
    14. 
   
   
   
   
  14.         }),//   
    15. 
   
   
   
   
  15.         this.drink = function(milk) { 
    16. 
   
   
   
   
  16.             alert("drink one bottle of milk: " + milk); 
    17. 
   
   
   
   
  17.         }; 
    18. 
   
   
   
   
  18.  
    19. 
   
   
   
   
  19.     } 
    20. 
   
   
   
   
  20. }); 
    21. 
   
   
   
   
  21. var children = new Children(); 
    22. 
   
   
   
   
  22. children.setMilk('san lu milk!'); 
    23.
5、パンの中のbuttonの放置位置
buttonAlign:'センター'
6、ボタンにイベントを追加する

  
  
  
  
    
   
   
   
   
  1. var btn = new Ext.Button({text:'  '}); 
    2. 
   
   
   
   
  2.     var i = 0; 
    3. 
   
   
   
   
  3.     btn.on("click", function() { 
    4. 
   
   
   
   
  4.         var win = new Ext.Window({title:'title'+ i++,width:200, height:100}); 
    5. 
   
   
   
   
  5.         win.show(); 
    6. 
   
   
   
   
  6.     }); 
    7.
7、htmlページのテキストに値を付ける

  
  
  
  
    
   
   
   
   
  1. Ext.get('b1').on("click",function() { 
    2. 
   
   
   
   
  2.     Ext.Ajax.request({ 
    3. 
   
   
   
   
  3.         url : 'hello.jsp', 
    4. 
   
   
   
   
  4.         method : 'post', 
    5. 
   
   
   
   
  5.         params : { 
    6. 
   
   
   
   
  6.             id : '01' 
    7. 
   
   
   
   
  7.         }, 
    8. 
   
   
   
   
  8.         timeout : 3000, 
    9. 
   
   
   
   
  9.         success : function(response, opts) { 
    10. 
   
   
   
   
  10.             var time = response.responseText; 
    11. 
   
   
   
   
  11.             Ext.getDom('hello2').value = time; 
    12. 
   
   
   
   
  12.         }, 
    13. 
   
   
   
   
  13.         failure : function(response, opts) { 
    14. 
   
   
   
   
  14.             alert(response.responseText); 
    15. 
   
   
   
   
  15.         } 
    16. 
   
   
   
   
  16.     }); 
    17. 
   
   
   
   
  17. }); 
    18.
8、クラスの定義
Extjs 3では、クラスを定義します. 
Jsコード   
收藏代码
  • MyApp.Login Window = Ext.exted(Ext.Window) {  
  •     title: 'ログ in'     
  •     initComponent: function() {  
  •         Ext.アプリ(this、 {  
  •             アイテム: ［  
  •                 {  
  •                     xtype: 'textfield'は、  
  •                     name : 'username  
  •                     fieldLabel: 'Username  
  •                 },  
  •                 ...  
  •             ]  
  •         });  
  •    
  •         MyApp.LoginWindow.superclass.initComponent.appy(this, アーグメンント  
  •     }  
  • )  
    •  Extjs 4で以下に変更します 
    Jsコード   
    收藏代码
  • Ext.define('MyApp.Login Window'は、 {  
  •     exted: 'Ext.Window'は、  
  •    
  •     title: 'ログ in'  
  •    
  •     initComponent: function() {  
  •         Ext.アプリ(this、 {  
  •             アイテム: ［  
  •                 //as above  
  •             ]  
  •         });  
  •    
  •         MyApp.LoginWindow.superclass.initComponent.appy(this, アーグメンント  
  •     }  
  • )  
  •    
    •  このようにすると二つのメリットがあります. 
  • MyApp namespaceを忘れてしまうことはありません.
  • Ext.Windowの定義位置がMyApp.Login Windowより遅い場合、4を使用してLogin Windowを定義することができます.Ext.Windowの定義が見つかりました.
    9、オブジェクトを作成する
    extjs 3.x:new MyApp.Login Window()
    extjs 4.x:Ext.creat(「MyApp.Login Window」、{…)
    10、名前空間の定義と使用
    定義:Ext.namespace('Ext.exampledia')  
    
  
  
  
  
      
   
   
   
   
    1. Ext.namespace('Ext.exampledata'); 
      2. 
   
   
   
   
    2.  
      3. 
   
   
   
   
    3. Ext.exampledata.states = [ 
      4. 
   
   
   
   
    4.         ['AL', 'Alabama', 'The Heart of Dixie'], 
      5. 
   
   
   
   
    5.         ['AK', 'Alaska', 'The Land of the Midnight Sun'], 
      6. 
   
   
   
   
    6.         ['AZ', 'Arizona', 'The Grand Canyon State'], 
      7. 
   
   
   
   
    7.         ['AR', 'Arkansas', 'The Natural State'] 
      8. 
   
   
   
   
    8.     ]; 
      9.
    名前空間で定義されたクラスを使う
    
  
  
  
  
      
   
   
   
   
    1. var store = new Ext.data.ArrayStore({ 
      2. 
   
   
   
   
    2.       fields: ['abbr', 'state', 'nick'], 
      3. 
   
   
   
   
    3.       data : Ext.exampledata.states 
      4. 
   
   
   
   
    4.   }); 
      5.
    compboxを使って内容を取得する:
    
  
  
  
  
      
   
   
   
   
    1. var combo = new Ext.form.ComboBox({ 
      2. 
   
   
   
   
    2.       store: store, 
      3. 
   
   
   
   
    3.       displayField:'state', 
      4. 
   
   
   
   
    4.       typeAhead: true, 
      5. 
   
   
   
   
    5.       mode: 'local', 
      6. 
   
   
   
   
    6.       forceSelection: true, 
      7. 
   
   
   
   
    7.       triggerAction: 'all', 
      8. 
   
   
   
   
    8.       emptyText:'Select a state...', 
      9. 
   
   
   
   
    9.       selectOnFocus:true, 
      10. 
   
   
   
   
    10.   }); 
      11.
    【注意】取得内容:store、その中のフィールドを取得する:displayField
    11、ext 3におけるstoreの使い方
    
  
  
  
  
      
   
   
   
   
    1. var store2 = new Ext.data.ArrayStore({ 
      2. 
   
   
   
   
    2.        fields : ['id', 'text'], 
      3. 
   
   
   
   
    3.        data : [['1', '  '], ['2', '  '], ['3', '  '], ['4', '  '], 
      4. 
   
   
   
   
    4.          ['5', '  '], ['6', '  '], ['7', '  '], ['8', '  '], 
      5. 
   
   
   
   
    5.          ['9', '  '], ['10', '  '], ['11', '   '], ['12', '   ']] 
      6. 
   
   
   
   
    6.     }); 
      7. 
   
   
   
   
    7.     
      8. 
   
   
   
   
    8.    var combo2 = new Ext.form.ComboBox({ 
      9. 
   
   
   
   
    9.        store: store2, 
      10. 
   
   
   
   
    10.        displayField:'text', 
      11. 
   
   
   
   
    11.        typeAhead: true, 
      12. 
   
   
   
   
    12.        mode: 'local', 
      13. 
   
   
   
   
    13.        forceSelection: true, 
      14. 
   
   
   
   
    14.        triggerAction: 'all', 
      15. 
   
   
   
   
    15.        emptyText:'Select a state...', 
      16. 
   
   
   
   
    16.        selectOnFocus:true, 
      17. 
   
   
   
   
    17.     }); 
      18.
    12、compboの自動補完
    type Ahead:true、
    標準値:  value:1、ここでvalue値はvalue Fieldの値で、displayFieldではありません.
    13、コールバック関数で伝達されるパラメータを確認する
    consone.dir(argments);
    14、コールバック関数
    
  
  
  
  
      
   
   
   
   
    1. listeners : { 
      2. 
   
   
   
   
    2.                 render : rend 
      3. 
   
   
   
   
    3.             } 
      4.
     
    ステップ1:listenersを追加する 
    ステップ2:対応するクラスでは、例えば、レンダーを検索する.
    ステップ3:自分の処理関数を書くということは、例えばレンドメソッドのように、コールバックで完了することです.
    
  
  
  
  
      
   
   
   
   
    1. function rend(btn) { 
      2. 
   
   
   
   
    2.         Ext.Msg.alert(btn.title, btn.title + " is rendered!"); 
      3. 
   
   
   
   
    3.     } 
      4.
     
    完全な例は以下の通りです.
    
  
  
  
  
      
   
   
   
   
    1. Ext.onReady(function() { 
      2. 
   
   
   
   
    2.     function rend(btn) { 
      3. 
   
   
   
   
    3.         Ext.Msg.alert(btn.title, btn.title + " is rendered!"); 
      4. 
   
   
   
   
    4.     } 
      5. 
   
   
   
   
    5.     var tabs = new Ext.TabPanel({ 
      6. 
   
   
   
   
    6.         renderTo : 'my-tabs', 
      7. 
   
   
   
   
    7.         activeTab : 1, 
      8. 
   
   
   
   
    8.         items : [ { 
      9. 
   
   
   
   
    9.             xtype : 'panel', 
      10. 
   
   
   
   
    10.             title : 'Tab 1', 
      11. 
   
   
   
   
    11.             html : 'tab1 content..........', 
      12. 
   
   
   
   
    12.             listeners : { 
      13. 
   
   
   
   
    13.                 render : rend 
      14. 
   
   
   
   
    14.             } 
      15. 
   
   
   
   
    15.         }, { 
      16. 
   
   
   
   
    16.             xtype : 'panel', 
      17. 
   
   
   
   
    17.             title : 'Tab 2', 
      18. 
   
   
   
   
    18.             html : 'tab2 content...&&&&&&&.......', 
      19. 
   
   
   
   
    19.             listeners : { 
      20. 
   
   
   
   
    20.                 render : rend 
      21. 
   
   
   
   
    21.             } 
      22. 
   
   
   
   
    22.         }, { 
      23. 
   
   
   
   
    23.             xtype : 'panel', 
      24. 
   
   
   
   
    24.             title : 'Tab 3', 
      25. 
   
   
   
   
    25.             autoLoad : "news.html", 
      26. 
   
   
   
   
    26.             listeners : { 
      27. 
   
   
   
   
    27.                 render : rend 
      28. 
   
   
   
   
    28.             } 
      29. 
   
   
   
   
    29.         } ] 
      30. 
   
   
   
   
    30.     }); 
      31. 
   
   
   
   
    31.     new Ext.Viewport({ 
      32. 
   
   
   
   
    32.         layout : 'fit', 
      33. 
   
   
   
   
    33.         items : tabs 
      34. 
   
   
   
   
    34.     }); 
      35. 
   
   
   
   
    35. }); 
      36.
    15、ハンドル
    
  
  
  
  
      
   
   
   
   
    1. xtype : 'button', 
      2. 
   
   
   
   
    2.         text : 'add tab', 
      3. 
   
   
   
   
    3.         handler : function() { 
      4. 
   
   
   
   
    4.             tabs.add({ 
      5. 
   
   
   
   
    5.                 title : 'new table' 
      6. 
   
   
   
   
    6.             }); 
      7. 
   
   
   
   
    7.         } 
      8.
    16、grid panel
    
  
  
  
  
      
   
   
   
   
    1. Ext.onReady(function() { 
      2. 
   
   
   
   
    2.     var data = [ [ 1, 'EasyJWeb', 'EasyJF', 'www.easyjf.com' ], 
      3. 
   
   
   
   
    3.             [ 2, 'jfox', 'huihoo', 'www.huihoo.org' ], 
      4. 
   
   
   
   
    4.             [ 3, 'jdon', 'jdon', 'www.jdon.com' ], 
      5. 
   
   
   
   
    5.             [ 4, 'springside', 'springside', 'www.springside.org.cn' ] ]; 
      6. 
   
   
   
   
    6.     var store = new Ext.data.SimpleStore({ 
      7. 
   
   
   
   
    7.         data : data, 
      8. 
   
   
   
   
    8.         fields : [ "id", "name", "organization", "homepage" ] 
      9. 
   
   
   
   
    9.     }); 
      10. 
   
   
   
   
    10.     var grid = new Ext.grid.GridPanel({ 
      11. 
   
   
   
   
    11.         renderTo : "hello", 
      12. 
   
   
   
   
    12.         title : "  Java        ", 
      13. 
   
   
   
   
    13.         height : 150, 
      14. 
   
   
   
   
    14.         width : 600, 
      15. 
   
   
   
   
    15.         columns : [ { 
      16. 
   
   
   
   
    16.             header : "    ", 
      17. 
   
   
   
   
    17.             dataIndex : "name" 
      18. 
   
   
   
   
    18.         }, { 
      19. 
   
   
   
   
    19.             header : "    ", 
      20. 
   
   
   
   
    20.             dataIndex : "organization" 
      21. 
   
   
   
   
    21.         }, { 
      22. 
   
   
   
   
    22.             header : "  ", 
      23. 
   
   
   
   
    23.             dataIndex : "homepage" 
      24. 
   
   
   
   
    24.         } ], 
      25. 
   
   
   
   
    25.         store : store, 
      26. 
   
   
   
   
    26.         autoExpandColumn : 2 
      27. 
   
   
   
   
    27.     }); 
      28. 
   
   
   
   
    28. }); 
      29.
    17、フォームの提出
    
  
  
  
  
      
   
   
   
   
    1. function simpleForm() { 
      2. 
   
   
   
   
    2.     var panel = new Ext.form.FormPanel({ 
      3. 
   
   
   
   
    3.         title : 'user basic info', 
      4. 
   
   
   
   
    4.         width : 400, 
      5. 
   
   
   
   
    5.         height : 200, 
      6. 
   
   
   
   
    6.         frame : true, 
      7. 
   
   
   
   
    7.         labelAlign : 'left', 
      8. 
   
   
   
   
    8.         labelWidth : 80, 
      9. 
   
   
   
   
    9.         items : [ { 
      10. 
   
   
   
   
    10.             xtype : 'textfield', 
      11. 
   
   
   
   
    11.             fieldLabel : 'username', 
      12. 
   
   
   
   
    12.             name : 'username', 
      13. 
   
   
   
   
    13.             id : 'user', 
      14. 
   
   
   
   
    14.             value : 'abc' 
      15. 
   
   
   
   
    15.         }, { 
      16. 
   
   
   
   
    16.             xtype : 'textfield', 
      17. 
   
   
   
   
    17.             fieldLabel : 'password', 
      18. 
   
   
   
   
    18.             inputType : 'password', 
      19. 
   
   
   
   
    19.             name : 'password', 
      20. 
   
   
   
   
    20.             value : 'hello1234' 
      21. 
   
   
   
   
    21.         }, { 
      22. 
   
   
   
   
    22.             xtype : 'datefield', 
      23. 
   
   
   
   
    23.             fieldLabel : 'birthday', 
      24. 
   
   
   
   
    24.             name : 'birthday', 
      25. 
   
   
   
   
    25.             value : new Date().format('Y-m-d') 
      26. 
   
   
   
   
    26.         }, { 
      27. 
   
   
   
   
    27.             xtype : 'textfield', 
      28. 
   
   
   
   
    28.             fieldLabel : 'email', 
      29. 
   
   
   
   
    29.             name : 'email', 
      30. 
   
   
   
   
    30.             value : '[email protected]' 
      31. 
   
   
   
   
    31.         }, { 
      32. 
   
   
   
   
    32.             xtype : 'textarea', 
      33. 
   
   
   
   
    33.             fieldLabel : 'description', 
      34. 
   
   
   
   
    34.             name : 'description', 
      35. 
   
   
   
   
    35.             value : 'hello world' 
      36. 
   
   
   
   
    36.         } ], 
      37. 
   
   
   
   
    37.         buttons : [ { 
      38. 
   
   
   
   
    38.             text : 'save', 
      39. 
   
   
   
   
    39.             handler : function() { 
      40. 
   
   
   
   
    40.                 panel.getForm().submit({ 
      41. 
   
   
   
   
    41.                     url : 'UserServlet', 
      42. 
   
   
   
   
    42.                     params : { 
      43. 
   
   
   
   
    43.                         k1 : 'v1' 
      44. 
   
   
   
   
    44.                     }, 
      45. 
   
   
   
   
    45.                     success : function(form, action) { 
      46. 
   
   
   
   
    46.                         Ext.Msg.alert('Success', "it is ok now"); 
      47. 
   
   
   
   
    47.                     }, 
      48. 
   
   
   
   
    48.                 }); 
      49. 
   
   
   
   
    49.             } 
      50. 
   
   
   
   
    50.         }, { 
      51. 
   
   
   
   
    51.             text : 'cancel', 
      52. 
   
   
   
   
    52.             handler : function() { 
      53. 
   
   
   
   
    53.                 panel.hide(); 
      54. 
   
   
   
   
    54.             } 
      55. 
   
   
   
   
    55.         }, { 
      56. 
   
   
   
   
    56.             text : 'reset', 
      57. 
   
   
   
   
    57.             handler : function() { 
      58. 
   
   
   
   
    58.                 //findField   id ，   name 
      59. 
   
   
   
   
    59.                 alert(panel.getForm().findField("user").getValue()); 
      60. 
   
   
   
   
    60.                 panel.getForm().reset(); 
      61. 
   
   
   
   
    61.             } 
      62. 
   
   
   
   
    62.         }, { 
      63. 
   
   
   
   
    63.             text : 'load', 
      64. 
   
   
   
   
    64.             handler : function() { 
      65. 
   
   
   
   
    65.                 panel.getForm().load({ 
      66. 
   
   
   
   
    66.                     url : 'LoadDataServlet', 
      67. 
   
   
   
   
    67.                     params : { 
      68. 
   
   
   
   
    68.                         k1 : 'v1' 
      69. 
   
   
   
   
    69.                     } 
      70. 
   
   
   
   
    70.                     //    
      71. 
   
   
   
   
    71.                 }); 
      72. 
   
   
   
   
    72.             } 
      73. 
   
   
   
   
    73.         } ] 
      74. 
   
   
   
   
    74.     }); 
      75. 
   
   
   
   
    75.     panel.render(document.body); 
      76. 
   
   
   
   
    76. } 
      77. 
   
   
   
   
    77.  
      78. 
   
   
   
   
    78. Ext.onReady(simpleForm); 
      79.
    18、直接domノード(Dcument.body)にレンダリングし、divを定義していません.
    
  
  
  
  
      
   
   
   
   
    1. var panel = new Ext.Panel({ 
      2. 
   
   
   
   
    2.         width : 400, 
      3. 
   
   
   
   
    3.         height : 300, 
      4. 
   
   
   
   
    4.         title : 'my title' 
      5. 
   
   
   
   
    5.     }); 
      6. 
   
   
   
   
    6.     panel.render(document.body); 
      7.
    19、パネルの五大部分
    
  
  
  
  
      
   
   
   
   
    1. var panel = new Ext.Panel({ 
      2. 
   
   
   
   
    2.         width : 400, 
      3. 
   
   
   
   
    3.         height : 300, 
      4. 
   
   
   
   
    4.         title : 'my title', 
      5. 
   
   
   
   
    5.         tbar:[{text:'save'},'-',{text:'edit'}], 
      6. 
   
   
   
   
    6.         bbar:[{text:'next page'},'->',{text:'up page'}], 
      7. 
   
   
   
   
    7.         buttonAlign:'center', 
      8. 
   
   
   
   
    8.         buttons:[{text:'  '},{text:'  '}], 
      9. 
   
   
   
   
    9.         html : '<h1>     body  </h1>' 
      10. 
   
   
   
   
    10.     }); 
      11. 
   
   
   
   
    11.     panel.render(document.body); 
      12.
    20、認証のためにカスタムメッセージを追加する
    ステップ1:まず以下の内容を追加しなければなりません.機能は初期化tipsとヒントを右側に表示させ、デフォルトではマウスに従って起動します.
    
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side'; 
    ステップ2:
    
  
  
  
  
      
   
   
   
   
    1. allowBlank : false, 
      2. 
   
   
   
   
    2. blankText:'      ' 
      3.
    空の場合、最終的に提示された内容は右に表示されます.blankTextの内容が表示されます.
    21、ipアドレス検証
    
  
  
  
  
      
   
   
   
   
    1. allowBlank : false,                                    
      2. 
   
   
   
   
    2. blankText:"IP    ",                                    
      3. 
   
   
   
   
    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])))$/ 
      4.
    22、ObjectとString変換
    ObjectをJSON(String):Ext.util.JSON.encode( Mixed o)
    JSONをObjectに変換します.Ext.util.JSON.decode(String) Json
    recordをオブジェクトに変換:record.data 
      
    
  
  
  
  
      
   
   
   
   
    1. var blackListRecords = []; 
      2. 
   
   
   
   
    2.                         Ext.each(selectedRecords, function(record) { 
      3. 
   
   
   
   
    3.                                     //versions.push(record.get('version')); 
      4. 
   
   
   
   
    4.                                     //appId = record.get('appId'); 
      5. 
   
   
   
   
    5.                                     blackListRecords.push(Ext.util.JSON.encode(record.data)); 
      6. 
   
   
   
   
    6.                                 }) 
      7. 
   
   
   
   
    7.                         Ext.Ajax.request({ 
      8. 
   
   
   
   
    8.                                     url : '../../blackList/deleteBlackLists.do', 
      9. 
   
   
   
   
    9.                                     params : { 
      10. 
   
   
   
   
    10.                                         records : blackListRecords 
      11. 
   
   
   
   
    11.                                     }, 
      12. 
   
   
   
   
    12.                                     success : function() { 
      13. 
   
   
   
   
    13.                                         Ext.MessageBox.alert('  ', '    !'); 
      14. 
   
   
   
   
    14.                                     } 
      15. 
   
   
   
   
    15.                                 }); 
      16.
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    • ターゲット検出(六)——Faster R-CSN
    CFボス195(div 2)A:Vasily the Bear and Triangle