初心者のためのExtJS入門スマートフォン用の表示で見る初心者のためのExtJS入門ExtJSを使うので、ついでにまとめていきます2017-02-04グリッドの機能:編集[classic]ExtJS今回はグリッド上での編集機能です。編集機能はプラグイン(のクラス)で提供されています。グリッド用のプラグインはExt.grid.pluginにあり、編集可能にするにはCellEditing(セル編集)とRowEditing(行編集)を使います。セル編集グリッドの1マスずつ編集する場合は、Ext.grid.plugin.CellEditing(http://docs.sencha.com/extjs/6.2.1/classic/Ext.grid.plugin.CellEditing.html)を使います。メモ一覧グリッドクラス。}});タイトル列のセルをダブルクリックすると、テキストフィールドが表れて編集できます。プラグインの設定です。↑では、ptypeでエイリアス名を使って設定しています。clicksToEditなどのコンフィグもpluginで指定できます。この時点で画面上での編集操作が有効になります。次にcolumnsで編集したい列にeditorを設定します。'textfield'としており、編集エディタにテキストフィールドを使うようにしています。編集操作の過程でbeforeedit,canceledit,edit,validateeditイベントが発生するので、編集操作完了時に発生するeditイベントで保存するようにしています。プロキシをローカルストレージにしているので、モデルのsaveメソッドで保存できます。editorはオブジェクトリテラルにすることもでき、↓のようにすれば入力が必須になります。これだと、確定したときに入力エラーがある場合は、編集がキャンセルされて編集前の値に戻ります。false}↓だと、確定したときに入力エラーがある場合にも編集エディタは閉じません。こっちのほうが多用する気がします。false}1行編集1行を編集する場合は、Ext.grid.plugin.RowEditing(http://docs.sencha.com/extjs/6.2.1/classic/Ext.grid.plugin.RowEditing.html)を使います。メモ一覧グリッドクラス。}});今度は本文にもeditorを設定しています。保存後にthis.getView().refresh()を実行していますが、テキストエリアで広がった高さが編集完了後にちゃんと調整されなかったので、手動で対応しています(ちなみにExtJS6.2.1です)。いうのはExtJSで良くある残念なパターンです。Ext.grid.column.Widgetを使って入力フィールドを表示したままにする頻度は少ないかもしれないですが、こんな感じにもできます。これはプラグイン関係ないです。メモ一覧グリッドクラス。]});ウィジェットとして、テキストフィールドとテキストエリアを表示させ、changeイベント時に保存しています。感じもしますが、まあ、こういうことも可能です(今はlistenersプロパティに直接イベントハンドラを設定していますが、きれいに整理するならビューコントローラに書くほうが良さげ)。メソッドで編集を開始するCellEditingプラグインの場合、startEditByPositionメソッドで編集を開始できます。そのためには、プラグインの参照を取得する必要があります。(ちなみにRowEditingプラグインの場合は、編集開始するメソッドはstartEditです)プラグインは、グリッドのgetPluginメソッドで取得できます。その際、引数にプラグインのIDを指定するので、↓のようにIDを振っておきます。}]あとはプラグインを取得して、startEditByPositionを実行するだけです。17:06グリッドの機能:編集[classic]Tweet広告を非表示にする関連記事2017-08-19ツリーパネル[modern]今回はmodernのツリーパネルです。(2)今回はツリーグリッドを取り上げます。(2)今回もExtJS6.5のmodernグリッド改善点です。(2)ツリーパネル[modern]任意のコンフィグを双方向バインディングに対応するスポットライト[classic]Googleマップアイコンフォントアイコンフォントのパッケージ作成suspendLayouts・resumeLayoutsES6で書いてみるExt.Deferredで非同期処理をまとめるビューモデルのデータにモデルを設定して使用するプラグインの作り方ミックスインの作り方ボタンのUIにバインディングできるように工夫するはてなブログをはじめよう!sham-memoさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。