extjs studies four treePanel
10158 단어 EXT
tree.html:
Tree display
<br>
<br>
<br>
<br>
<br>
<br>
forever.js are tools:
Ext.ns("org.forever.util");
Ext.define('org.forever.util.TreeUtil', {
extend: 'Object',
userName: ' Default ',//property
constructor: function(config){// Constructor
Ext.apply(this, config);
}
});
// Recursive update node selected
org.forever.util.TreeUtil.updateCheckStatus = function(parentNode, checked){
Ext.each(parentNode.childNodes, function(childNode, index, allItems){
//Ext.Msg.alert(' Node information ',node.get('text')+';index=' + index);
childNode.set('checked', checked);
org.forever.util.TreeUtil.updateCheckStatus(childNode, checked);
});
}
tree-app.js is the process initialization code:
Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', 'ext4/ux/');
Ext.onReady(function(){
var tabscrollermenu = Ext.create('Ext.ux.TabScrollerMenu', {
ptype: 'tabscrollermenu',
maxText: 15,
pageSize: 10
});
var simpleTreePanel = createSimpleTree();
var checkTreePanel = createCheckTree();
var tabPanel = Ext.create('Ext.tab.Panel', {
region: 'center',
activeTab: 1,
plugins: [tabscrollermenu],
items: [simpleTreePanel, checkTreePanel]
});
Ext.create('Ext.Window', {
title: 'tree app',
width: 500,
height: 400,
x: 100,
y: 100,
bodyStyle: 'padding: 5px;',
layout: 'border',
items: [tabPanel]
}).show();
});
tree-simple.js is to create a simple tree, extract the value of the node operation.
function createSimpleTree(){
var treeStore;
var treePanel;
var toolbarPanel;
store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
text: " The root node ",
children: [{
text: "1-1",
leaf: true
}, {
text: "1-2",
expanded: true,
children: [{
text: "2-1",
leaf: true
}, {
text: "2-2",
leaf: true
}]
}, {
text: "1-3",
leaf: true
}]
}
});
// Tool Panel
toolbarPanel = new Ext.panel.Panel({
dockedItems: [{
xtype: 'toolbar',
items: [{
text: ' Selected node value ',
handler: function(){
var selectionMode = treePanel.getSelectionModel();
var modeType = selectionMode.getSelectionMode();//SINGLE, MULTI or SIMPLE
var selection = selectionMode.getSelection();// Gets the selected values
if (selection.length == 1) {
Ext.MessageBox.show({
title: ' Node actions ',
msg: " Value of the selected node :" + selection[0].data.text,
icon: Ext.MessageBox.INFO
});
}
else {
Ext.MessageBox.show({
title: ' Node actions ',
msg: ' The node is not selected ',
icon: Ext.MessageBox.INFO
});
}
}
}]
}]
});
// Tree Panel
treePanel = Ext.create('Ext.tree.Panel', {
title: 'simple-tree',
store: store,
closable: true,
rootVisible: true,// Display the root node
dockedItems: [toolbarPanel],
listeners: {
itemclick: function(view, record, item, index, e){// In the select the event does not fire .
Ext.MessageBox.show({
title: ' Node actions ',
msg: 'itemclick:index=' + index + ",text=" + record.data.text,
icon: Ext.MessageBox.INFO
});
}
}
//renderTo: 'simple-tree-div'//
});
// Register event actions
treePanel.getSelectionModel().on('select', function(selModel, record){
Ext.MessageBox.show({
title: ' Node actions ',
msg: 'select:modeType=' + selModel.mode + ",text=" + record.data.text,
icon: Ext.MessageBox.INFO
});
});
return treePanel;
}
tree-check.js is a tree with a check box to extract the value of the selected tree:
function createCheckTree(){
var treeStore;
var treePanel;
var toolbarPanel;
store = Ext.create('Ext.data.TreeStore', {
root: {
checked: false,
expanded: true,
text: " The root node ",
children: [{
checked: false,
text: "1-1",
leaf: true
}, {
checked: false,
text: "1-2",
expanded: true,
children: [{
checked: false,
text: "2-1",
leaf: true
}, {
checked: false,
text: "2-2",
children: [{
checked: false,
text: "2-2-1",
leaf: true
}, {
checked: false,
text: "2-2-2",
leaf: true
}]
}]
}, {
checked: false,
text: "1-3",
leaf: true
}]
}
});
toolbarPanel = new Ext.panel.Panel({
dockedItems: [{
xtype: 'toolbar',
items: [{
text: ' Selected node value ',
handler: function(target, e){
var records = treePanel.getView().getChecked(), names = [];
Ext.Array.each(records, function(rec){
names.push(rec.get('text'));
});
if (records.length > 0) {
Ext.MessageBox.show({
title: 'Selected Nodes',
msg: names.join('
'),
icon: Ext.MessageBox.INFO
});
}
else {
Ext.MessageBox.show({
title: ' Node actions ',
msg: ' The node is not selected ',
icon: Ext.MessageBox.INFO
});
}
}
}]
}]
});
treePanel = Ext.create('Ext.tree.Panel', {
title: 'check-tree',
store: store,
animate: true,
closable: true,
rootVisible: true,
dockedItems: [toolbarPanel],
listeners: {
itemclick: function(view, record, item, index, e){
},
checkchange: function(node, checked){
org.forever.util.TreeUtil.updateCheckStatus(node, checked);
}
}
});
return treePanel;
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Ext.form.ComboBox 편집 페이지 표시 값 문제최근 EXTJS 3.0 개발 프로젝트, 페이지 폼에 ComboBox가 사용되었습니다. 어떻게 편집 페이지에 들어갈 때 백그라운드에서 전해지는 값을 표시할 수 있습니까?세 가지 방법이 모두 통과되었는데, 이를 요약하면...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.