집 >
기사 > 웹 프론트엔드 > Extjs4 Treegrid 사용경험 공유(experience)_extjs
Extjs4 Treegrid 사용경험 공유(experience)_extjs
WBOY원래의
2016-05-16 17:30:321318검색
나는 최근 EXTJS 4의 treegrid 인스턴스를 디버깅했고 많은 기사와 공식 데모를 읽었습니다. 그 중 어느 것도 신뢰할 수 없고 표시할 수 없었습니다. C 사용에 익숙한 우리와 같은 코더의 경우 EXTJS는 단순히 무질서한 도적 그룹에 의해 유지 관리됩니다. 공식 웹 사이트에는 검색 상자조차 없으며 기본적으로 탐색에 의존하며 이는 여전히 수동입니다.
/ * 이 파일은 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 }] })
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.