ExtJSで
柔軟に開発仕事をこなす方法

1. ExtJS で 柔軟に開発仕事をこなす方法 株式会社sus4 野村亮之

3. ExtJS における仕事の分担 UI デザイナーの仕事 どのように使いやすい UI デザインを提供するか考えればよい ビジネスプロセスを重視した UI の開発（システムに依存しない）をすればよい JSON/XML 形式のデータをどうやってうまく表示するかを考えればよい プログラマの仕事 いかに高速に、結果を返せるかを考えればよい 柔軟に JSON の形式を変更できるように（情報の追加・削除など）考慮して、開発をすればよい（メンテナンシビリティ） スケールアウトする場合は、 JSON の分散と同時性のみを考慮すればよい 共通項は JSON/XML

4. 今回の事例 OTSベース動画分析ツール – Video Analytics

5. 今回の事例 OTSベース動画分析ツール – Video Analytics

10. タブパネル - HTMLを動的にロードする場合(実装例) メソッドの引数として params が渡されている 542 if(!force && compareParams(params, ppn.params) ) return; 543 544 ppn.load({ 545 url: ppn.baseurl, 546 method: 'POST', 547 params: Ext.ux.clone(params), 548 scripts: true, 549 callback: function(el) 550 { … 562 } 563 }); 指摘事項： 状態を比較するのであれば、 Ext.state.manager( ステートマネージャ ) を利用するほうがよい

11. タブパネル - HTMLを動的にロードする場合(実装例) 54 function compareParams (p1, p2) 55 { 56 if(!p1 || 'object' !== typeof p1) { 57 return false; 58 } 59 if(!p2 || 'object' !== typeof p2) { 60 return false; 61 } 62 63 for(k in p1) { 64 //p2 が空の場合 65 if(!p2. hasOwnProperty (k)) return false; 66 67 //p2 と p1 の値が違う 68 if(p2[k]!==p1[k]) return false; 69 } 70 return true; 71 }

13. Form操作の効率化とサーバとの連携(実装例) 185 editVideo: function(record) 186 { 187 var id = record.data.id; 188 if(!id) return; 189 190 var us = this.updateSwf; 191 var sn = this.swfname; 192 var form = this.addVideo( { 193 url: String.format('{0}/index.php/adminapi/video/{1}/update', baseUrl, id), 194 update: true 195 } ); 196 form.load ({ 197 url:String.format('{0}/index.php/adminapi/video/{1}/info', baseUrl, id), 198 success: function(f) 199 { 200 us(sn, form); 201 }, 202 }); 203 }, 指摘事項： ExtJS 3.0 からは Direct という機能を使って、サーバとのやり取りが実現可能。そのほうが、コード量が削減できるし、楽に運用ができるとのこと

14. Form操作の効率化とサーバとの連携(実装例) 256 var form = new Ext.FormPanel( Ext.apply ({ 257 url: String.format('{0}/index.php/adminapi/video/default/add', baseUrl), 258 method: 'POST', 259 reader: reader, 260 bodyStyle: 'padding: 1em', 261 border: false, 262 region: 'center', 263 layout: 'form', 264 items:[ … 427 xtype: 'textfield', 428 name: 'page_url', 429 fieldLabel: ' 掲載ページ URL<br />( オプション )', 430 width: 240, 431 vtype: 'url' 432 } 433 ] 434 } 435 ] 436 }, extra ));

15. Form操作の効率化とサーバとの連携(実装例) ステータスコードの返却 486 success: function(form, res) 487 { 488 var res = Ext.decode(res.response.responseText);489 if(res.success){ 490 store.reload(); 491 win.close(); 492 return; 493 } 494 495 return; 496 }, 497 failure: function(form, res) 498 { 499 var res = Ext.decode(res.response.responseText); 500 switch(res.errno){ 501 502 case 501: 503 var msg = &quot; 入力された情報が間違っています。 <br /> もう一度よく確認をしてご登録ください。 &quot;; 504 break; 505 …

16. Form周りの細かいTips Fieldの下に注意文を表示する 142 Ext.override(Ext.form.Field, { 143 144 afterRender: function() 145 { 146 var text = this.cautionText; 147 if(text){ 148 //Type is below, upper 149 var type = this.cautionType ? this.cautionType : 'below'; 150 var pElem = this.getEl().parent(); 151 //elem.dom.innerHTML += <div>text + '</div>'; 152 153 var elem = { 154 tag: 'div', 155 html: text, 156 cls: 'x-form-caution-text' 157 }; 158 159 Ext.DomHelper.append(pElem, elem); 160 } 161 Ext.form.Field.superclass.afterRender.call(this); 162 this.initEvents(); 163 this.initValue(); 164 } 165 166 }); 指摘事項： 既存クラスのオーバーライドは、 ExtJS 本体のバージョンがあがったときに動作しない可能性が残る。できるだけ、 event として処理したほうがよい 改善策としては、 override ではなく、独自の FormClass を作成して、各フォームはそれを継承するようにすればよい。

17. Form周りの細かいTips Fieldの下に注意文を表示する