フレームワーク基本操作まとめ ExtJS3編

フレームワーク間の比較をしやすくするため、まずは現在使っているExtJS3の基本操作をまとめていきます。
随時更新予定です。

ビュー定義

HogeView

var HogeView = Ext.extend(Ext.Panel, {
  width: 500,

  initComponent: function() {
    HogeView.superclass.initComponent.call(this);
  }
});

ビュー生成

HogeView

parentView.add(new HogeView({
  height: 100
}));

ビューの動的デザイン変更

if (condition)
  view.removeClass('red');
else
  view.addClass('red');

DOMアクセス

Ext.select(‘#hoge’).createChild(htmlStr);

フィールドへの値設定/取得

this.field.getValue();
this.field.setValue(val);

モデル定義

HogeModel

// モデルクラス定義
var HogeModel = Ext.data.Record.create([
  {name: 'id'},
  {name: ‘name’}
]);

// モデルクラスメンバ定義
Ext.apply(HogeModel, {
  invalidId: -1
});

// モデルインスタンスメンバ定義
Ext.apply(HogeModel.prototype, {
  getDisplayName: function() {
    return this.get(‘name’) + ‘(‘ + this.get(‘id’) + ‘)’;
  }
});

モデル生成

HogeModel

var hoge = new HogeModel({
  id: HogeModel.invalidId,
  name: ’hoge’
});

イベント定義/送信

this.hogeButton.on(‘click’, function(button, e) {
  Ext.Msg.alert(‘title’, ‘message’);
}, this);

イベント送信

this.hogeButton.fireEvent(‘click’, this.hogeButton);

Ajax通信

Ext.Ajax.request({
  url: '/api/' + action,
  method: 'POST',
  params: {},

  success: function(httpRes) {
    var appRes = Ext.util.JSON.decode(httpRes.responseText);
  },
  failure: function(httpRes) {
  }
});