Extjs 6.2 트리스트 변경 선택 동적으로

Question

필자는 treelist를 사용하고 있으며 Afterrender 함수에서 내 탐색 목록을 동적으로 변경하려고합니다.

Ext.create({ 
    xtype: 'treelist', 
    reference: 'navigationTreeList', 
    itemId: 'navigationTreeList', 
    ui: 'nav', 
    store: Ext.create('Ext.data.Store', { 
     fields: [{ 
      name: 'text' 
     }], 
     root: { 
      expanded: true, 
      children: [{ 
        text: 'Dashboard', 
        iconCls: 'x-fa fa-home', 
        rowCls: 'nav-tree-badge', 
        viewType: 'dashboardcei', 
        routeId: 'cei/dashboardcei', 
        leaf: true 
       }, 
       { 
        text: 'Create Application', 
        iconCls: 'x-fa fa-send', 
        rowCls: 'nav-tree-badge', 
        routeId: 'cei/create-application', 
        viewType: 'create-application', 
        leaf: true 
       }, 
       { 
        text: 'Application Status', 
        iconCls: 'x-fa fa-user', 
        routeId: 'cei/application-status', 
        viewType: 'application-status', 
        leaf: true 
       } 
      ] 
     } 
    }), 
    width: 250, 
    expanderFirst: false, 
    expanderOnly: false, 
    listeners: { 
     afterrender: function(tree) { 

      var selection = tree.getStore().getData().items[1]; // bydefault "create application page should be open instead of dashboard" 
      tree.fireEvent('selectionchange', tree, selection); 
     } 
    } 
}); 

위의 렌더링 기능에서 treelist에서 페이지로드시 기본적으로 "응용 프로그램 페이지 만들기"를 열어 보는 실험입니다. 그 열기는 페이지지만, 실제로 선택은 선택처럼 일어나지 않는다. 나는 지난 이틀간 문제가 해결 되었다면 아무도 도와 줄 수 없다.

Answer 1

selection 동적 변경 방법을 사용해야한다. treelist.

귀하의 요구 사항에 따라, 작은 SENCHA FIDDLE 데모를 만들었습니다. 희망이 당신을 도울 것입니다 또는 귀하의 요구 사항을 달성하기 위해 당신을 안내합니다.

Ext.create('Ext.panel.Panel', { 
    layout: 'hbox', 
    title: 'Navigation tree list example', 
    renderTo: Ext.getBody(), 
    border: 1, 
    height: window.innerHeight, 
    viewModel: { 
     selection: null 
    }, 
    style: { 
     borderColor: '#ccc', 
     borderStyle: 'solid', 
     borderWidth: '1px' 
    }, 
    items: [{ 
     xtype: 'treelist', 
     flex: 0.30, 
     store: { 
      root: { 
       expanded: true, 
       children: [{ 
        text: 'Dashboard', 
        id: 'dashboard', 
        iconCls: 'x-fa fa-home', 
        rowCls: 'nav-tree-badge', 
        viewType: 'dashboardcei', 
        routeId: 'cei/dashboardcei', 
        leaf: true 
       }, { 
        text: 'Create Application', 
        id: 'createapp', 
        iconCls: 'x-fa fa-send', 
        rowCls: 'nav-tree-badge', 
        routeId: 'cei/create-application', 
        viewType: 'create-application', 
        leaf: true 
       }, { 
        text: 'Application Status', 
        id: 'appstatus', 
        iconCls: 'x-fa fa-user', 
        routeId: 'cei/application-status', 
        viewType: 'application-status', 
        leaf: true 
       }] 
      } 
     }, 
     listeners: { 
      selectionchange: function (tree, node) { 
       this.up('panel').getViewModel().set('selection', node); 
      } 
     } 
    }, { 
     margin: '10 0 0 0', 
     flex: 0.70, 
     height: '100%', 
     bind: { 
      title: '{selection.text}' 
     }, 
     style: { 
      borderColor: '#ccc', 
      borderStyle: 'solid', 
      borderWidth: '1px' 
     }, 
     itemId: 'rightPanel' 
    }], 
    buttons: [{ 
     text: 'Dashboard', 
     name: 'dashboard', 
     handler: function() { 
      this.up('panel').doSetNode(this); 
     } 
    }, { 
     text: 'Create Application', 
     name: 'createapp', 
     handler: function() { 
      this.up('panel').doSetNode(this); 
     } 
    }, { 
     text: 'Application Status', 
     name: 'appstatus', 
     handler: function() { 
      this.up('panel').doSetNode(this); 
     } 
    }], 
    //function will fire on bottom button click 
    doSetNode: function (button) { 
     var tree = this.down('treelist'), 
      newSelection = tree.getStore().findRecord('id', button.name); 
     tree.setSelection(newSelection); 
    } 
});