web-dev-qa-db-ja.com

Extjs-グリッド列にコンボボックスを表示する方法

私はグリッドパネルに日付とコンボ列を含めていますjsfiddle

しかし、私はクリックして自分のコンボを表示したくありません。クリックせずにコンボを表示したいのですが、

enter image description here

と同じように日付列について

enter image description here

clicksToEdit: 0が失敗

plugins: [
    Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 1
    })
]

それを行う方法、ありがとう

extjscomboboxgridextjs4.1
17
DeLe

4.2x以下でこれを実現する唯一の方法は、Skirtleのコンポーネント列のようなカスタムコンポーネントを使用することです http://skirtlesden.com/ux/component-column この列タイプでは、任意の列を挿入できますコンポーネントをセルに。

ExtJSの次のリリースには、同様の機能を可能にするガジェットグリッドと呼ばれるものがあります。

8
dbrin

コンボボックスまたは日付ピッカーは、セルをクリックしたときにのみ挿入され、クリックするまでグリッドに存在しません。セルの外観を変更する方法は、列のレンダラーを使用することです。このようにして、偽のトリガーボックスを背景画像などに追加できます。

あなたのコメントへの返信として、以下にその方法を示します。

{
    xtype: 'gridcolumn',
    renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
        metaData.tdCls = 'fake-combo';

        return value;
    },
    text: 'MyColumn8',
    editor: {
        xtype: 'combobox',
        store: ...
    }
}

すべてのレンダラーオプションについて docs を調べます。指定できるさまざまなクラスと、DomHelperで使用される属性があります。 cssクラスは背景画像を持つことができますが、ここで実験する必要があります。やりたいことと一貫したレイアウトを得るのは簡単ではありませんが、セルにレンダリングされるdivへの完全なアクセス権があります。 FirebugまたはChrome Dev Toolsで結果を必ず確認してください。何が起こっているかを正確に示します。

コンボボックスのスクリーンショットを撮って、背景画像として設定することもできます。しかし、レンダラーでコンボボックスを作成しようとしないでください。それは、それが機能する方法ではありません。すべての行に実際のコンボボックスを持つことはカスタムのみであり、多くの行がある場合はパフォーマンスに影響を与える可能性があります。

8
Benjamin E.
var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    columns: [{
        header: 'Category',
        dataIndex: 'CategoryName',
        editor: {
            xtype: 'combobox',
            store: 'categoryStore',
            displayField: 'CategoryName',
            valueField: 'CategoryID'
        }
    }],
    width: 450,
    renderTo: Ext.getElementById('hede')
});
6
Eren

このリンクを試してください。

http://docs.sencha.com/extjs/5.0/components/grids/widgets_widgets_columns.html

これはExtjs 5からです。

更新：

{
    xtype: 'widgetcolumn',
    text: 'Progress',
    width: 120,
    widget: {
        xtype: 'combobox'
    }
}

これは魅力のように働きました。

2
Gugan

以上が、Sencha EXTJSでコンボボックスを使用する方法の完全な例です。

var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    columns: [{
        xtype: 'gridcolumn',
        text: 'UserStatus',
        dataIndex: 'userstatus',
        editor: {
            xtype: 'combobox',
            allowBlank: false,
            displayField: 'Name',
            valueField: 'Id',
            queryMode: 'local',
            store: this.getStatusChoicesStore()
        }
    }],
    width: 450,
    renderTo: Ext.getElementById('hede')
});

今度はthis.getStatusChoicesStore（）関数がこのコンボボックスの選択肢を提供します（この関数はどこにでも定義できます。列の定義、私にとっては、関数を作成すると読みやすくなります）：

getStatusChoicesStore: function() {
    return Ext.create('Ext.data.Store', {
        data: [{
            Id: 0,
            Name: "Active"
        }, {
            Id: 1,
            Name: "Inactive"
        }]
    });
},

さらに、より多くの情報と例を見つけることができます here 。

1
PedroD