初心者のためのExtJS入門

ExtJSを使うので、ついでにまとめていきます

ツリーパネル[classic] (2)

今回はツリーグリッドを取り上げます。

基本的な使い方

Ext.tree.Panelクラスを使うと、ツリーパネルとグリッドパネルを一緒にしたようなツリーグリッドUIを利用できます。

基本的な使い方はツリーパネルと同じで、それに加えてExt.tree.Panelクラスのcolumnsコンフィグを指定するだけです。

columnsコンフィグは、ほぼExt.grid.Panelのcolumnsコンフィグと同じです。

ストアとモデルは前回と同じものを使用しました

Ext.define('Sample.view.sample.Panel', {
    extend: 'Ext.tree.Panel',
    xtype: 'sample_panel',

    requires: [
        'Ext.tree.Column',
        'Ext.grid.column.Number'
    ],

    title: 'ツリーグリッド サンプル',

    store: 'Earnings',

    columnLines: true,
    rowLines: true,
    rootVisible: false,

    columns: [
        {
            xtype: 'treecolumn',
            text: 'グループ',
            dataIndex: 'text',
            flex: 1
        },
        {
            xtype: 'numbercolumn',
            format: '0,000',
            dataIndex: 'quarter1',
            text: '第1四半期',
            width: 120,
            align: 'right'
        },
        {
            xtype: 'numbercolumn',
            format: '0,000',
            dataIndex: 'quarter2',
            text: '第2四半期',
            width: 120,
            align: 'right'
        },
        {
            xtype: 'numbercolumn',
            format: '0,000',
            dataIndex: 'quarter3',
            text: '第3四半期',
            width: 120,
            align: 'right'
        },
        {
            xtype: 'numbercolumn',
            format: '0,000',
            dataIndex: 'quarter4',
            text: '第4四半期',
            width: 120,
            align: 'right'
        }
    ]
});

f:id:sham-memo:20170807231412p:plain

編集

編集には、グリッドパネルと同じプラグインを使えます。

例えば、セル編集であれば下記のようになります。

Ext.define('Sample.view.sample.Panel', {
    extend: 'Ext.tree.Panel',
    xtype: 'sample_panel',

    requires: [
        'Ext.tree.Column',
        'Ext.grid.column.Number',
        'Ext.grid.plugin.CellEditing'
    ],

    title: 'ツリーグリッド サンプル',

    store: 'Earnings',

    columnLines: true,
    rowLines: true,
    rootVisible: false,

    columns: [
        {
            xtype: 'treecolumn',
            text: 'グループ',
            dataIndex: 'text',
            flex: 1,
            editor: 'textfield'
        },
        {
            xtype: 'numbercolumn',
            format: '0,000',
            dataIndex: 'quarter1',
            text: '第1四半期',
            width: 120,
            align: 'right',
            editor: 'numberfield'
        },
        {
            xtype: 'numbercolumn',
            format: '0,000',
            dataIndex: 'quarter2',
            text: '第2四半期',
            width: 120,
            align: 'right',
            editor: 'numberfield'
        },
        {
            xtype: 'numbercolumn',
            format: '0,000',
            dataIndex: 'quarter3',
            text: '第3四半期',
            width: 120,
            align: 'right',
            editor: 'numberfield'
        },
        {
            xtype: 'numbercolumn',
            format: '0,000',
            dataIndex: 'quarter4',
            text: '第4四半期',
            width: 120,
            align: 'right',
            editor: 'numberfield'
        }
    ],

    plugins: {
        cellediting: true
    }
});

f:id:sham-memo:20170807233505p:plain

 

 

ツリーパネルはちょっとクセがあって使いづらいですが、ツリーグリッドのUIは表現力が高いので、いろいろな場面で使いたくなりますね。