ExtJS

cellclickのイベントでフィールド名を取得する

Gridのcellclickイベントのコールバックは cellclick(this, td, cellIndex, record, tr, rowIndex, e, eOpts ) とある。 クリックした列に関する情報はcellIndex(列のインデックス)しかもらえない。 これを対応する列のフィールド名(dataIndex)に変換するに…

関連のデータもサーバーに送るには

基本、ここに書いてあるとおり。 http://fits.hatenablog.com/entry/20120225/1330166288 ただし、サーバにrailsを使用している場合は、accepts_nested_attributes_forを使って、PUTしたデータを一度に更新したくなる。 ので、dataのkeyの部分は"_attributes…

Gridを初期表示でcollapseした場合にセルの編集ができない。

CellEditorプラグインを適用したTreeGridを表示する際にcollapsed:trueを指定すると、 表示後、expandしてもセルの編集ができない。 サンプルソース Ext.define('User', { extend: 'Ext.data.TreeModel', mixins: ["Ext.data.NodeInterface"] fields: [ {nam…

Ext.Ajax.timeoutが効かない

Ajax通信しているところでは30秒でタイムアウトになっていて、大量データを処理する場合にタイムアウトがしばしば発生していた。 とりあえずの処理で、タイムアウトを120秒にしたくて以下のコードを書いた。 Ext.Ajax.timeout= 120 * 1000; が、うまく動かず…

CheckboxModelで行を選択した時にチェックがつくのを抑止する

GridのselTypeにCheckboxModelをつけるとチェックボックス付きのグリッドを作ることができる。 Ext.define 'HogeGrid', { selType: 'checkboxmodel' ... } で、こうするとグリッドにチェックボックスが右端に追加されるけど、デフォルトだとチェックボックス…

DateFieldのフォーマット

DateFieldを使ったフォームで サーバからは"2013-01-01T00:00:00Z"みたいな形式でデータを受け取って 表示は"2013/01/01"の形式で 保存のためにサーバに送信するときは"2013-01-01"の形式で とかいう困った仕様に対応するには以下のように書く ... { xtype: …

グリッドの最終行にスクロールする

テーブルにフォーカスを当てた後で、selectionModel使って、最後のデータを選択状態にすればOK. コントローラーの実装はこんな感じ。 @getHogeGrid().getView().focus(); @getHogeGrid().getSelectionModel().select(@getHogeStore().getRange().length-1);

ExtJS+Railsでdeployできない、まだ。

昨日、deployがうまく行かないと悩んでたけど、なんとかなりそうな雰囲気。 precompileでjsが1つのファイルにマージされちゃうとうまく動かないような気がするので、以下のようにしてみた。 app/assets/javascripts/application.jsで 以下の部分を削除して、…

x-hide-visibilityとx-hide-display

前のエントリでも出てきたCSSのclass x-hide-display とは別に x-hide-visibility というclassもある。 どちらも要素を非表示にするけど、 -displayの方は非表示にされた要素のあった場所に次の要素が詰めて表示。 -visibilityはもともとあった空間を開けて…

Ext.ux.Routerの話

ExtJSのMVCではControllerでviewが発火するイベントをlistenして、モデルの適切な処理を呼び出す。 でよいはずだが、Controllerから別のコントローラーを呼び出す時のコードの書き方がいまいち良くわかってない。 遷移元に遷移先のコントローラXXXの定義を書…

通知ウィンドウを出す。

アプリからToast的な通知を出すにはExt.ux.window.Notificationを使う。 http://www.eirik.net/Ext/ux/window/Notification.html { xtype: 'button' handler: ()-> Ext.create('widget.uxNotification', { title: 'お知らせ' position: 'br' # 右下(bottom -…

ボタンに外部サイトのリンクを付ける。

ExtJSのButton(Ext.button.Button)をクリックしたときに別のURLに遷移する(または新しいウィンドウで開く)にはhref、hrefTargetを設定してやればいい。 { xtype:'button' href:'http://google.co.jp/' hrefTarget: '_blank' text: '新しいウィンドウでgoogle…