17

日付とコンボ列jsfiddleを含むグリッドパネルがあります

しかし、クリックしてコンボを表示したくありません。セル内に非表示にするのではなく、クリックせずにコンボを表示したい

ここに画像の説明を入力

のような日付列についても同じです

ここに画像の説明を入力

に変更すると思いますclicksToEdit: 0が、失敗します

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

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

4

5 に答える 5

9

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

あなたのコメントに返信して、これを行う方法は次のとおりです。

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

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

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

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

于 2013-07-18T09:49:54.510 に答える
6 
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')
});
于 2013-10-10T11:16:23.140 に答える
3

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

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

これは Extjs 5 からのものです。

アップデート：

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

これは魅力のように機能しました。

于 2015-02-03T12:05:05.270 に答える
1

わかりました、これは 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"
        }]
    });
},

さらに、詳細と例については、こちらを参照してください。

于 2015-10-06T11:30:52.743 に答える