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

  • 2
    Like
  • 0
    Comment
More than 1 year has passed since last update.

フレームワーク間の比較をしやすくするため、まずは現在使っている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) {
  }
});