ExtJS 4 트리

Tree Panel는 ExtJS에서 가장 많이 사용할 수 있는 구성 요소 중 하나로 계층화된 데이터를 보여주는 데 매우 적합하다.Tree Panel과Grid Panel는 같은 기류를 계승하기 때문에 Grid Panel에서 얻을 수 있는 모든 특성, 확장, 플러그인 등이 가져오는 장점은 Tree Panel에서도 얻을 수 있다.열, 열 너비 조정, 드래그, 렌더링, 정렬, 필터 등 특성은 두 가지 구성 요소 중 거의 차이가 없는 작업 방식이다.
간단한 트리 구성 요소를 만들기 시작합시다
먼저 Store를 생성합니다.

var treeStore = Ext.create('Ext.data.TreeStore', {

            proxy: {

                type: 'ajax',

                url: 'grade.htm?getAllGrades'

            },

            root: {

                text: 'name',

                id: 'id',

                expanded: true,

                leaf:true

            },

            folderSort: true,

            sorters: [{

                property: 'id',

                direction: 'ASC'

            }]

        });

 1 Ext.data.TreeStore

구성 항목
매개변수 유형
설명
clearOnLoad
Boolean
노드 데이터를 불러올 때 이전에 불러온 데이터를 잘 알고 있는지 설정합니다. 기본값은true
defaultRootId
String
기본 루트 노드 id 설정, 기본 루트
defaultRootProperty
String
기본 루트 속성 설정
nodeParam
String
비동기적으로 노드를 불러올 때의 매개 변수 이름, 기본값은 node
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
TreePane 만들기:

var gradeTree=Ext.create('Ext.tree.Panel', {

           store: treeStore,

            id:'gradeTree',

            bodyStyle: 'background-color:#DEEBF7',

            height: 300,

            width: 250,

            useArrows: true,

            root: {

                text:' ',

                id:'0'

            },

            rootVisible : true,

            tbar:new Ext.Toolbar({

                style:'border-top:0px;border-left:0px',

                items:[{

                    iconCls: 'icon-expand-all',

                    text:' ',

                    tooltip: ' ',

                    handler: function(){ gradeTree.getRootNode().expand(true); },

                    scope: this

                },'-',{

                    iconCls: 'icon-collapse-all',

                    text:' ',

                    tooltip: ' ',

                    handler: function(){ gradeTree.getRootNode().collapse(true); },

                    scope: this

                }]

            })

        });

gradeTree.on('itemclick',function(view,record,item,index,e,opts){  

        //   

         var treeNode=record.raw;  

         var id = treeNode.id;  

         var text=treeNode.text;  

          studentStore.loadPage(1,{params:{gradeId:id}});

        });

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

표 2 Ext.tree.Panel 주요 구성 항목
구성 항목
매개변수 유형
설명
animate
Boolean
노드를 확장하고 축소할 때 애니메이션 효과를 사용할지 여부를 설정합니다. 기본값은 Ext.enableFx
displayField
String
노드 제목의 필드 이름을 설정합니다. 기본값은text
hideHearers
Boolean
true로 설정하면 제목 숨기기
lines
Boolean
노드 앞의 점선을 표시할지 여부를 설정합니다. 기본값은true
root
Object
나무가 아닌 것을 허락하다.Panel 미리 읽기 데이터로 간단한 트리 구조를 만드는 Store 지정
rootVisible
Boolean
루트 노드의 표시 여부를 설정합니다. 기본값은true
singleExpland
Boolean
단일 전개 노드 설정, 기본값false
useArrows
Boolean
true로 설정하면 Vista 스타일의 화살표를 사용합니다. 기본값은 false입니다.
표 3 Ext.tree.Panel 주요 방법
방법
설명
collpaseAll([Function callback],[Object scope]):void
모든 전개된 노드 매개 변수 수축 설명:callback: 수축이 끝난 후 리셋 함수scope: 리셋 함수가 실행하는 작용역
expandAll([Function callback],[Object scope]):void
모든 전개된 노드 매개 변수 설명:callback: 전개가 끝난 후 리셋 함수scope: 리셋 함수가 실행하는 작용역
expandPath(String path,[String field],[String separator],[Function callback],[Object scope]):void
트리 노드를 지정한 경로 매개 변수로 전개 설명: path: 경로 문자열 filed (선택 사항): 데이터를 가져오는 필드 이름, 기본값은 id 속성 separator: 경로 스타일 문자, 기본값은'/'callback: 노드가 전개된 후의 리셋 함수, 전송된 함수의 매개 변수는 다음과 같습니다:success: 전개 성공 여부를 나타냅니다lastNode: 전개된 마지막 노드 scope: 리셋 함수가 실행하는 역할 영역
getChecked():Array
선택한 노드의 그룹을 얻다
selectPath(String path,[String field],[String separator],[Function callback],[Object scope]):void
특정 경로를 선택하는 트리 노드 매개 변수 설명: expandPath 방법과 같습니다.

코드 예 1: 다중 열 트리

Ext.onReady(function(){

        var tree = Ext.create('Ext.tree.Panel', {

            title: 'TreeGrid（ ）',

            renderTo: Ext.getBody(),

            width : 200,

            height : 120,

            fields: ['name', 'description'],

            columns: [{

                xtype: 'treecolumn',// 

                text: ' ',

                dataIndex: 'name',

                width: 100,

                sortable: true

            }, {

                text: ' ',

                dataIndex: 'description',

                flex: 1,

                sortable: true

            }],

            root: {

                name: ' ',

                description: ' ',

                expanded: true,

                children: [{

                    name: ' ',

                    description: ' ',

                    leaf: true

                }, {

                    name: ' ',

                    description: ' ',

                    leaf: true

                }]

            }

        });

    });

Ext.onReady(function(){

        var tree = Ext.create('Ext.tree.Panel', {

            title: ' ',

            width : 150,

            height : 100,

            renderTo: Ext.getBody(),

            root: {

                text: ' ',// 

                expanded: true,// 

                children: [{

                    text: ' ',// 

                    checked : true,// 

                    leaf: true//true 

                }, {

                    text: ' ',// 

                    checked : false,// 

                    leaf: true//true 

                }]

            }

        });

    });

Ext.onReady(function(){

        // 

        Ext.create('Ext.tree.Panel', {

            title: ' ',

            width: 200,

            height: 150,

            renderTo: 'tree1',

            root: {

                text: ' ',// 

                expanded: true,// 

                children: [{

                    text: ' ',// 

                    leaf: true//true 

                }, {

                    text: ' ',// 

                    leaf: true//true 

                }]

            },

            viewConfig: {

                plugins: {

                    allowContainerDrop : true,

                    ptype: 'treeviewdragdrop',

                    nodeHighlightOnRepair : true

                }

            }

        });

        

        // 

        Ext.create('Ext.tree.Panel', {

            title: ' ',

            width: 200,

            height: 150,

            renderTo: 'tree2',

            root: {

                text: ' ',

                expanded: true

            },

            viewConfig: {

                plugins: {

                    allowContainerDrop : true,

                    ptype: 'treeviewdragdrop'

                }

            }

        });

    });

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

ExtJs:xtype의 의미

내가 EXT 포럼에서 관찰한 바에 의하면 xtype를 사용할 때 의혹이 비교적 많을 것이다.심지어 어떤 사람들은 xtype를 아예 무시하거나 그것이 무엇인지 잘 모른다.그래서 나는 이 xtype의 개념을 논술하기로 ...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

ExtJS 4 트리

좋은 웹페이지 즐겨찾기