Ext JS 트리 노드를 올바르게 사용자 정의하는 방법은 무엇입니까?

Ext JS 4. tree.Panel을 가지고 있는데, 노드의 모델 데이터에서 생성 된 각 노드에 사용자 정의 HTML을 표시하고자합니다. 상점을로드 할 때 노드의 text을 설정하여이 작업을 수행 할 수 있지만 마크 업을 수행하는 것은 모델 작업이 아닙니다. 그래서 내 HTML을 렌더링하는 사용자 정의 Column을 만들었습니다.Ext JS 트리 노드를 올바르게 사용자 정의하는 방법은 무엇입니까?

내 문제는 : 내가 Ext.tree.Column에서 파생되지 않는 한, 제대로 표시되지 않습니다 (외곽선, 플러스/마이너스 아이콘 등 없음). 그렇게해도 모든 것이 정상이지만, Ext.tree.Column은 Ext JS에 비공개로 표시됩니다.

내가 원하는 것을 수행하기 위해 공식적으로 지원되는 API가 있습니까?

내가 ExtJS에 4 나무 패널을 사용자 지정하는 방법에 대한 블로그 게시물, 나는 그것이 도움이되기를 바랍니다 쓴

출처

2011-12-29 Vasiliy Faronov

columns : [{ 
    xtype : 'treecolumn', 
    dataIndex : 'name', 
    renderer : function(value, record){ 
     return Ext.String.format('<div class="tree-font">{0}</div>', value); 
    }]

: http://hardtouse.com/blog/?p=24

아이디어는 CSS 마법의 많은 결합 렌더러를 사용하는 것입니다

출처

2011-12-29 20:41:09 Chao

'treecolumn'도 사용합니다. 그게 내 질문에 관한거야. –

나는 본다. ExtJS 4 TreeGrid 데모는 "treecolumn"을 사용하기 때문에 우리가 사용하는 것이 좋습니다. 여기 링크가 있습니다 : http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/tree/treegrid.js – Chao

합리적인 것 같습니다. –

위의 답변에 감사드립니다. 또한의 결과로 나타나는 "그리드"헤더를 제거하기 위해 나무 패널 설정에

hideHeaders : true,

을 추가 할 수 있습니다

columns: [{ 
    xtype: 'treecolumn', 
    dataIndex: 'text', 
    flex: 1, 
    renderer: function (value, metaData, record, rowIndex, colIndex, store, view) { 
     // see http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.tree.Column-cfg-renderer 
     var tooltipString = "Hello"; 
     metaData.tdAttr = 'data-qtip="' + tooltipString + '"'; 
     return Ext.String.format('{0} <span style="color:red;">{1}</span>', value, record.data.personname); 
    } 
}]

: 여기 형식에 대한 몇 가지 더 많은 옵션을 보여주는 또 다른 예이다 treecolumn 사용.

머레이

출처

2013-12-23 06:56:33 Murrah

Ext JS 트리 노드를 올바르게 사용자 정의하는 방법은 무엇입니까?

답변

관련 문제