Extjs4 Treegrid 사용경험 공유(experience)_extjs

나는 최근 EXTJS 4의 treegrid 인스턴스를 디버깅했고 많은 기사와 공식 데모를 읽었습니다. 그 중 어느 것도 신뢰할 수 없고 표시할 수 없었습니다. C 사용에 익숙한 우리와 같은 코더의 경우 EXTJS는 단순히 무질서한 도적 그룹에 의해 유지 관리됩니다. 공식 웹 사이트에는 검색 상자조차 없으며 기본적으로 탐색에 의존하며 이는 여전히 수동입니다.

treegrid를 사용하려면 호출 페이지 헤드에 다음 파일을 로드해야 합니다.

코드 복사 코드는 다음과 같습니다.

script type="text/javascript " src="ext-all.js">
;

페이지 본문에 div를 작성하세요

코드를 복사하세요

위 관계자가 그렇게 말했는데 문제는 , JS에는 변경 사항이 없습니다. 변경하지 않으면 사라질 것입니다. 메서드가 성공적으로 실행됩니다. treegrid.js의 renderto를 div의 ID로 변경하면 됩니다.

json 데이터 파일과 css 파일을 호출 디렉터리에 복사하는 것을 잊지 마세요.
완성된 treegrid.js 코드는

코드 복사 코드는 다음과 같습니다.

/ *
이 파일은 Ext JS 4의 일부입니다.
저작권(c) 2011 Sencha Inc
연락처: http://www.sencha.com/contact
GNU 일반 공중 라이선스 사용
이 파일은 Free Software Foundation에서 게시하고 이 파일 패키지에 포함된 LICENSE 파일에 나타나는 GNU General Public License 버전 3.0의 조건에 따라 사용할 수 있습니다. GNU General Public License 버전을 확인하려면 다음 정보를 검토하세요. 공개 라이센스 버전 3.0 요구 사항이 충족됩니다: http://www.gnu.org/copyleft/gpl.html
어떤 라이센스가 귀하의 사용에 적합한지 확실하지 않은 경우 http://에서 영업 부서에 문의하십시오. www.sencha.com/contact.
*/
Ext.require([
'Ext.data.*',
'Ext.grid.*',
'Ext.tree .*'
]);
Ext.onReady(function() {
//dataUrl을 사용하는 대신 모델을 설정하고 저장하려고 합니다.
Ext.define('Task', {
확장: 'Ext.data.Model',
필드: [
{이름: '작업', 유형: '문자열'},
{이름: '사용자', 유형: '문자열' },
{이름: '기간', 유형: '문자열'}
]
})
var store = Ext.create('Ext.data.TreeStore', {
model: 'Task',
proxy: {
type: 'ajax',
//스토어는 .json 파일
url: 'treegrid.json'
에서 콘텐츠를 가져옵니다. },
folderSort: true
});
//Ext.ux.tree.TreeGrid는 더 이상 Ux가 아닙니다. 간단히 tree.TreePanel
var tree = Ext.create( 'Ext.tree .Panel', {
title: 'Core Team Projects',
width: 500,
height: 300,
renderTo: 'tree-example', //2B 공식 및 SV 파티, 이건 사실 getbody야, 네 여동생이야.
collapsible: true,
useArrows: true,
rootVisible: false,
store: store,
multiSelect: true,
singleExpand: true,
//'열 ' 속성은 이제 'headers'
columns: [{
xtype: 'treecolumn', //이를 통해 어떤 열이 트리를 표시할지 알 수 있습니다.
text: 'Task',
flex: 2,
sortable: true,
dataIndex: 'task'
},{
//사용자 정의 tpl을 사용할 수 있도록 templateheader 구성 요소를 사용해야 합니다.
xtype: 'templatecolumn',
text: 'Duration',
flex: 1,
sortable: true,
dataIndex: 'duration',
align: 'center',
//사용자 정의에 추가 행에 대한 tpl
tpl: Ext.create('Ext.XTemplate', '{duration:this.formatHours}', {
formatHours: function(v) {
if (v < 1) {
return Math.round(v * 60) ' mins';
} else if (Math.floor(v) !== v) {
var min = v - Math.floor(v) ;
return Math.floor(v) 'h ' Math.round(min * 60) 'm'
} else {
return v ' hour' (v === 1 ? '': 's');
}
}
})
},{
text: '할당 대상',
flex: 1,
dataIndex: 'user',
정렬 가능: true
}]
})