web-dev-qa-db-ja.com

ExtJsのグリッドにボタンを追加

ExtJSはとても新しいです。

ExtJSのグリッドの各行にボタンを追加する方法を知っている人はいますか？

例を挙げてください。

ありがとう

extjsgrid
12
leejava

あなたはここでそれをチェックすることができます、それが役立つことを願っています！

http://techmix.net/blog/2010/11/25/add-button-to-extjs-gridpanel-cell-using-renderer/

7
Geniet

実際、行セルのExt.Buttonsは、Extの現在の設定では不可能であると私が知る限りです。もちろん、セルのdivにあるボタンのHTMLをレンダリングすることは実際には可能ですが、実際にはそれは悪い考えだと思います。

より良い方法は、Sakiのrowactionsプラグインを実装することです。これにより、各行にボタン/アクションを簡単に追加できます。

http://rowactions.extjs.eu/

6
ChrisR

カスタムレンダラーを使用する必要がありますが、代わりにツールバーボタンを使用することをお勧めします。

ここでさらに参照したい場合は、ColumnModelクラスの documentation を参照してください。

とにかくそれはそのようなものを与えるでしょう

 var grid = new Ext.grid.GridPanel({
     store: store,
     columns: [{
         id: 'company',
         header: 'Company',
         width: 160,
         sortable: true,
         dataIndex: 'company'
     }, {
         header: 'Price',
         width: 75,
         sortable: true,
         renderer: 'usMoney',
         dataIndex: 'price'
     }, {
         header: 'Change',
         width: 75,
         sortable: true,
         renderer: change,
         dataIndex: 'change'
     }, {
         header: '% Change',
         width: 75,
         sortable: true,
         renderer: pctChange,
         dataIndex: 'pctChange'
     }, {
         header: 'Last Updated',
         width: 85,
         sortable: true,
         renderer: Ext.util.Format.dateRenderer('m/d/Y'),
         dataIndex: 'lastChange'
     }, {
         header: 'action',
         width: 85,
         sortable: false,
         renderer: function(val) {
             return '<input type="button" value="toto" id="' + val + '"/>';
         },
         dataIndex: 'somefieldofyourstore'
     }],
     stripeRows: true,
     autoExpandColumn: 'company',
     height: 350,
     width: 600,
     title: 'Array Grid',
     // config options for stateful behavior
     stateful: true,
     stateId: 'grid'
 });

このスニペットは このサンプル の抜粋です。

私がアドバイスするツールバーの方法については、 GridPanel のツールバーにボタンを追加し、 SelectionModel をフックして、ユーザーがボタンを選択しないときにボタンを無効にできるようにします。行。

4
RageZ

グリッド内の画像としてボタンを追加するために、このコードを試すこともできます。コードは次のとおりです。

new Ext.grid.ColumnModel([{
    xtype: 'actioncolumn',
    header: "Action",
    items: [{
        icon: '../images/enable.png',
        tooltip: 'Enable App',
        width: 50,
        id: 'enableAppId',
        handler: function(grid, rowIndex) {
            //add code for button click
        }
    }]
}]);

行データを有効にするためにもこれを使用しました。

2
Naresh

この質問が投稿されたので、ボタンをグリッド列に追加できるようにするExtJSグリッドコンポーネントの拡張機能を作成したので、この質問に追加の回答を追加します。

https://github.com/Inventis/Ext.ux.grid.ButtonColumn

大量の行をレンダリングする場合、古い/遅いシステムのパフォーマンスに影響を与える可能性があることに注意してください。

0
ChrisR