ExtJs 4.1 TreeGrid 필터를 통해 열 머리글

Question

나는 주변을 검색해 보았지만 문서를 조사해 보았지만 열을 통한 필터링을 활성화하는 방법을 모르면 일반 그리드 패널에 표시되는 방식대로 드롭 다운합니다.

ux.Grid.FilterFeatures을 구현하려고했지만 트리 패널에 적용하면 패널이 올바르게 렌더링되지 않습니다 (파란색 패널 모두). 지연된 레이아웃과 관련이 있다고 생각했지만 treegrid.hide()/treegrid.show()/treegrid.doLayout()을 입력해도 차이가 없습니다.

treepanel에서 필터 기능을 사용하는 사람이 있습니까? 아니면이 문제를 해결하는 방법에 대한 제안이있는 사람이 있습니까?

Answer 1

트리 저장소에는 필터링 기능이 없지만 이전 프로젝트에 대한 트리 저장소를 만들어야했습니다. Here's 예.

제안 사항에 따라 Ext.grid.header.Container 구성을 사용하여 자신 만의 필터 드롭 메뉴를 만들 수 있습니다 (as covered here in the docs) 이러한 필터는 위에서 설명한 것과 같이 treestore에서 일종의 필터 기능을 호출하도록 설정할 수 있습니다 .

Answer 2

Ext-Js site의 필터 예제를 트리 그리드에서 사용하도록 수정했습니다.

Ext.define('TreeGridFilter', { 
    extend: 'Ext.grid.feature.Feature' 
    , alias: 'feature.treeGridFilter' 
    , collapseOnClear: true            // collapse all nodes when clearing/resetting the filter 
    , allowParentFolders: false           // allow nodes not designated as 'leaf' (and their child items) to be matched by the filter 
    , treeGrid: null 
    , filterPropertyNames: new Array() 
    , filterPropertyValues: new Array() 
    , filterColumnRenderers: new Array() 
    , init: function (tree) { 
     var me = this; 
     treeGrid = me.tree = tree; 
     var view = me.view; 
     var headerCt = view.headerCt; 

     // Listen for header menu being created 
     headerCt.on('menucreate', me.onMenuCreate, me); 

     tree.filter = Ext.Function.bind(me.filter, me); 
     tree.clearFilter = Ext.Function.bind(me.clearFilter, me); 
    } 

    ,filter: function (value, property, re, columnRenderer) { 
     var me = this 
      , tree = me.tree 
      , matches = []            // array of nodes matching the search criteria 
      , root = tree.getRootNode()         // root node of the tree 
      , property = property || 'text'        // property is optional - will be set to the 'text' propert of the treeStore record by default 
      , visibleNodes = []           // array of nodes matching the search criteria + each parent non-leaf node up to root 
      , viewNode; 

     me.updateValueForName(property, value, columnRenderer); 
     if (me.filterPropertyNames.length == 0) {      // if the search field is empty 
      me.clearFilter(); 
      return; 
     } 

     tree.expandAll();            // expand all nodes for the the following iterative routines 

     //iterate over all nodes in the tree in order to evalute them against the search criteria 
     root.cascadeBy(function (node) { 
      var numberOfFiltersMatched = 0; 
      for (var index=0; index < me.filterPropertyNames.length; index++) 
      { 
       var propertyName = me.filterPropertyNames[index]; 
       var propertyValue = me.filterPropertyValues[index] 
       var propertyValueOfNode = node.get(propertyName); 
       if(me.filterColumnRenderers[index] != false){ 
        var renderingFunction = me.filterColumnRenderers[index]; 
        propertyValueOfNode = renderingFunction(propertyValueOfNode);   //Using the renderer function of the column 
       } 
       var regExpn = new RegExp(propertyValue, "ig")       // the regExp could be modified to allow for case-sensitive, starts with, etc. 
       if(propertyValueOfNode != null && (propertyValueOfNode+'').match(regExpn)) { 
        numberOfFiltersMatched++; 
       } 
      } 
      if(numberOfFiltersMatched == me.filterPropertyNames.length){ 
       matches.push(node);          // add the node to the matches array 
      } 
     }); 

     if (me.allowParentFolders === false) {       // if me.allowParentFolders is false (default) then remove any non-leaf nodes from the regex match 
      Ext.each(matches, function (match) { 
       if (match == null || !match.isLeaf()) { 
        Ext.Array.remove(matches, match); 
       } 
      }); 
     } 

     Ext.each(matches, function (item, i, arr) {      // loop through all matching leaf nodes 
      root.cascadeBy(function (node) {       // find each parent node containing the node from the matches array 
       if (node.contains(item) == true) { 
        visibleNodes.push(node);       // if it's an ancestor of the evaluated node add it to the visibleNodes array 
       } 
      }); 
      if (me.allowParentFolders === true && !item.isLeaf()) {  // if me.allowParentFolders is true and the item is a non-leaf item 
       item.cascadeBy(function (node) {      // iterate over its children and set them as visible 
        visibleNodes.push(node); 
       }); 
      } 
      visibleNodes.push(item);         // also add the evaluated node itself to the visibleNodes array 
     }); 

     root.cascadeBy(function (node) {        // finally loop to hide/show each node 
      viewNode = Ext.fly(tree.getView().getNode(node));   // get the dom element assocaited with each node 
      if (viewNode) {            // the first one is undefined ? escape it with a conditional 
       viewNode.setVisibilityMode(Ext.Element.DISPLAY);  // set the visibility mode of the dom node to display (vs offsets) 
       viewNode.setVisible(Ext.Array.contains(visibleNodes, node)); 
      } 
     }); 
    } 

    , clearFilter: function() { 
     var me = this 
      , tree = this.tree 
      , root = tree.getRootNode(); 

     if (me.collapseOnClear) { 
      tree.collapseAll();           // collapse the tree nodes 
     } 
     root.cascadeBy(function (node) {        // final loop to hide/show each node 
      viewNode = Ext.fly(tree.getView().getNode(node));   // get the dom element assocaited with each node 
      if (viewNode) {            // the first one is undefined ? escape it with a conditional and show all nodes 
       viewNode.show(); 
      } 
     }); 
    }, 

    onMenuCreate: function(headerCt, menu) { 
     var me = this; 
     menu.on('beforeshow', me.onMenuBeforeShow, me); 
    }, 

    onMenuBeforeShow: function(menu) { 
     var me = this; 
     var currentHeaderFilter = menu.activeHeader.filter; 
     if(currentHeaderFilter == null){ 
      if(me.menuItem == null){ 
       return; 
      } 
      me.menuItem.hide(); 
      me.menuSeparator.hide(); 
     }else if(me.menuItem != null){ 
      me.menuItem.show(); 
      me.menuSeparator.show(); 
     } 
     if(me.menuItem){ 
      var perviousFilterValue = me.getValueForName(menu.activeHeader.dataIndex); 
      if(perviousFilterValue == null || perviousFilterValue == ''){ 
       me.menuItem.setRawValue(''); 
      }else{ 
       me.menuItem.setRawValue(perviousFilterValue); 
      } 
     }else{ 
      me.menuSeparator = menu.add('-'); 

      var filterTextFiels = new Ext.form.TextField({ 
       itemId: 'filterTextBox', 
       cls : 'find-icon', 
       listeners: { 
        'change': this.onFilterTextChange 
       } 
      }); 
      me.menuItem = menu.add(filterTextFiels); 
     } 
     me.menuItem.activeDataIndex = menu.activeHeader.dataIndex; 
     me.menuItem.activeRenderer = menu.activeHeader.renderer; 
     me.menuItem.width = (currentHeaderFilter == null || currentHeaderFilter.width == null) ? 150 : currentHeaderFilter.width; 
    }, 

    onFilterTextChange : function (searchMenuItem, value) { 
     treeGrid.filter(value,searchMenuItem.activeDataIndex, null, searchMenuItem.activeRenderer); 
    }, 

    updateValueForName : function(property, value, columnRenderer){ 
     var propertyIndex = -1; 
     for (var index=0; index < this.filterPropertyNames.length; index++) 
     { 
      if(property == this.filterPropertyNames[index]){ 
       propertyIndex = index; 
       break; 
      } 
     } 
     if(propertyIndex >= 0){ 
      if(value == null || value == ''){ 
       this.filterPropertyNames.splice(propertyIndex, 1); 
       this.filterPropertyValues.splice(propertyIndex, 1); 
       this.filterColumnRenderers.splice(propertyIndex, 1); 
      }else{ 
       this.filterPropertyValues[propertyIndex] = value; 
      } 
     }else{ 
      propertyIndex = this.filterPropertyNames.length; 
      this.filterPropertyNames[propertyIndex] = property; 
      this.filterPropertyValues[propertyIndex] = value; 
      this.filterColumnRenderers[propertyIndex] = columnRenderer; 
     } 
    }, 

    getValueForName : function(property){ 
     var propertyIndex = -1; 
     for (var index=0; index < this.filterPropertyNames.length; index++) 
     { 
      if(property == this.filterPropertyNames[index]){ 
       propertyIndex = index; 
       break; 
      } 
     } 
     if(propertyIndex >= 0){ 
      return this.filterPropertyValues[propertyIndex]; 
     }else{ 
      return null; 
     } 
    } 
}); 

이 기능

은

var treeGridFilter = { 
    ftype: "treeGridFilter" 
}; 
var treeGrid= Ext.create('Ext.tree.Panel', { 
    id : 'tree-grid-id', 
    title: 'View Tree Grid', 
    features: [treeGridFilter], 
    store: store, 
    renderTo: 'grid-div', 
    columns: [{ 
     text: 'Column One', 
     dataIndex: 'columnOne', 
     filter : { 
      width: 150 
     } 
    },{ 
     text: 'Column Two', 
     dataIndex: 'columnTwo', 
     filter : { 
      width: 100 
     } 
    }] 
});