2

静的ツリー ストアがあり、ツリーをフィルター処理したいと考えています。これを行うには、tbar を追加します。この tbar のテキストフィールドからツリーをフィルタリングするにはどうすればよいですか?

これが静的データを含む私のストアです

Ext.define('TestApplication.store.TreeStoree', {
    extend: 'Ext.data.TreeStore',
    root: {
        expanded: false, 
        children: [{
            text: "Project",
            expanded: false,
            children:[
                { id: '1', text: "Transaction", leaf: true },
                { id: '2', text: "Query", leaf: true },
                { id: '3', text: "Report", leaf: true },
                { id: '4', text: "Initialization", leaf: true },
                { id: '5', text: "Sequence", leaf: true },
                { id: '6', text: "Batch", leaf: true }
            ]
        }, {
            text: "Records Display",
            expanded: false, 
            children: [
                { id: '7', text: "Previous", leaf: true },
                { id: '8', text: "Running", leaf: true }
            ]
        }, {
            text: "Photo",
            expanded: false, 
            children: [
                { id: '9', text: "Specimen", leaf: true }
            ]
        }, {
            text: "Signature",
            expanded: false, 
            children: [
                { id: '10', text: "Carbon Copy", leaf: true }
            ]
        }, {
            text: "D N A",
            expanded: false, 
            children: [
                { id: '11', text: "Plastrain", leaf: true },
                { id: '12', text: "Generic", leaf: true }
            ]
        }]
    }
});

このセクションでは、テキストフィールドを含む tbar を追加し、これから検索したい

Ext.define('TestApplication.view.display.TreeView' ,{
    extend: 'Ext.tree.Panel',
    alias : 'widget.treeView',
    rootVisible: false,
    useArrows: true,
    border:true,
    initComponent: function() {
        var me = this;
        me.tbar = [
        {
            xtype: 'treefilter', 
            emptyText: 'Search', 
            store: 'TreeStoree', 
            flex: 1 
        }
        ];
        me.callParent(arguments);
    }
});

私のカスタムツリーフィルター

Ext.define('TestApplication.view.display.CustomFilter', {
    extend: 'Ext.form.field.Trigger',
    alias: 'widget.customfilter',
    trigger1Cls: Ext.baseCSSPrefix + 'form-clear-trigger',
    trigger2Cls: Ext.baseCSSPrefix + 'form-search-trigger',

    initComponent: function() {
        var me = this;    
        me.callParent(arguments);
        me.on('change', function(){
            me.onFilterStore();
        });      

    },
    onFilterStore : function(){
                // what will be my codes here..........???????????????????
        }
});
4

1 に答える 1

0

まず、ドキュメントでわかるように、TreeStores にはフィルター アクションがありません。

いずれにしても、トリガーの適切な使用法は、各トリガーがクリックされたときに実行するアクションを定義することです。それぞれに対して、何をすべきかを処理triggerXClsする対応する を定義onTriggerXClickします。ここで小さなフィドルを参照してください。

Ext.define('TestApplication.view.display.CustomFilter', {
    extend: 'Ext.form.field.Trigger',
    alias: 'widget.customfilter',
    trigger1Cls: Ext.baseCSSPrefix + 'form-clear-trigger',
    trigger2Cls: Ext.baseCSSPrefix + 'form-search-trigger',

    initComponent: function() {
        var me = this;
        me.callParent(arguments);
        me.on({
            change: me.onFilterStore,
            scope: me,
         });

    },
    onTriggerClick: function() {
        var me = this;
        console.log('You clicked my clear trigger!');
        me.setValue('');
    },
    onTrigger2Click: function() {
         var me = this;
         console.log('You clicked my search trigger!');
    },
    onFilterStore: function(){
        console.log('change is-a happening');
    }

});

私が考えることができる最善の方法は、検索が開始されたときに、ツリーのルート ノードをカスケードし、検索テキストに一致するノードを含むまったく新しいルート ノード オブジェクトを作成することです。次に、treePanel のストアに RootNode を設定します。検索をクリアするには、元のルート ノードを復元する必要があります。

さらによいのは、ルート ノードをカスケードして、検索に一致しない項目のクラスをグレー表示されるように変更することです。これにより、検索に一致するノードが「ポップ」されます。

編集：さらに良いことに、ツリーフィルタリングに関係する答えがここにあります。それらのソリューションを試してみてください。

于 2012-12-27T17:00:56.050 に答える