3

extjs3.4のコンボボックスのオプションの間に線を追加しようとしています。行を追加することはできますが、リモートの場所からデータを入力することはできません。（変更されたtplオプションを削除すると入力されます）。

これが私のコードです。'group'フィールドの間に線を追加するだけでよいので、さまざまな長さの3つの異なるフィールドがあり、それらを分離する必要があるとします。

テンプレートについて学び始めたばかりですが、APIとグーグルは、質問の時点ではまだあまり役に立ちませんでした。人々が提供できるどんなガイダンスにも感謝します。

また、このコードの一部は、APIまたは他のフォーラムを運がなく使用しようとしています。

var recipientStore = new Ext.data.Store ({
        autoload: false,
        url: '../../../messaging/inc/action.php?list=to_options',
        reader: new Ext.data.JsonReader ({
            root: 'to_options',
            id: 'id',
            fields: ['id', 'name', 'group']
        })
    });

    var setRecipient = new Ext.form.ComboBox ({
        fieldLabel: 'To',
        store: recipientStore,
        mode: 'local',
        valueField: 'id',
        displayField: 'name',
        editable: false,
        width: 150,
        triggerAction: 'all',
        value: 'group',
        tpl: '<tpl for = "."><div ext:gtip="{value}" class="x-combo-list-item">{value}</div><tpl if = "xindex == 2"><hr /></tpl></tpl>'
    });
4

3 に答える 3

5

user1637759 の回答からメモを取って、次のことを思いつきました。

Ext.define('common.field.GroupingComboBox', {

    extend: 'Ext.form.field.ComboBox',
    alias: 'widget.common.field.GroupingComboBox',

    constructor: function (args) {
        var me = this,
            groupField = args.groupField || "group",
            groupDisplayField = args.groupDisplayField || groupField,
            displayField = args.displayField || "name";

        args.tpl = new Ext.XTemplate(
            '<tpl for=".">',
            '<tpl if="this.' + groupField + ' != values.' + groupField + '">',
            '<tpl exec="this.' + groupField + ' = values.' + groupField + '"></tpl>',
            '<div class="x-panel-header-default x-panel-header-text-container x-panel-header-text x-panel-header-text-default" title="{' + groupDisplayField + '}">{' + groupDisplayField + '}</div>',
            '</tpl>',
            '<div class="x-boundlist-item">{' + displayField + '}</div>',
            '</tpl>'
        );

        me.callParent(arguments);
    }
});

これは大まかにこのように見えます

ExtJS GroupingComboBox

それ自体はダイビングラインを提供しませんが、グループ化はさまざまなセクションを区別するのに役立ちます。これはさらに優れていると思います.

警告: 私は ExtJS 4 を使用していますが、私のソリューションの一部が ExtJS 3 で失敗するかどうかはわかりません。

于 2013-03-14T20:16:52.300 に答える
3

テンプレートを正しい方法で使用して動作するようになりました。

以下は正しいコードです。

var recipientStore = new Ext.data.Store ({
    autoload: false,
    url: '../../../messaging/inc/action.php?list=to_options',
    reader: new Ext.data.JsonReader ({
        root: 'to_options',
        id: 'id',
        fields: ['id', 'name', 'group']
    })
});

var setRecipient = new Ext.form.ComboBox ({
    fieldLabel: 'To',
    store: recipientStore,
    valueField: 'id',
    displayField: 'name',
    editable: false,
    width: 150,
    allowBlank: false,
    triggerAction: 'all',
    tpl: new Ext.XTemplate(
        '<tpl for=".">',
        '<tpl if="this.group != values.group">',
        '<tpl exec="this.group = values.group"></tpl>',
        '<hr><h1><span style="color:gray;">{group}</span></h1><hr>',
        '</tpl>',
        '<div class="x-combo-list-item">{name}</div>',
        '</tpl>'
    )
});
于 2012-09-18T16:35:55.340 に答える
1

あなたが Extjs3 について尋ねたので、おそらくこの拡張機能がより良い解決策になるでしょう: http://www.sencha.com/forum/showthread.php?45412-Ext.ux.form.GroupComboBox

これは Extjs 2 用に書かれたものですが、スレッドの投稿 15 で説明した微調整を適用した後、Extjs 3 でうまく機能します。

これは Extjs 4 では機能しないことに注意してください。Extjs 4 でこれを行うための議論はここにあります: http://www.sencha.com/forum/showthread.php?134344-Grouping-Combo

于 2013-03-28T17:45:21.153 に答える