使用 Ext JS 将树放入屏幕
Fitting the tree into the screen with Ext JS
当我手动缩小屏幕大小时，视口不显示滚动条，我需要将按钮放在底部。
我尝试了 bbar、dockedItems、以不同的方式添加 treebuttons，但似乎没有任何效果。如果你能帮我解决底部按钮和滚动选项的高度问题，那就太好了。
提前致谢。
Ext.Loader.setConfig({
enabled: true
});
Ext.require([
'Ext.data.*',
'Ext.grid.*',
'Ext.tree.*',
]);
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.define('ServiceList', {
extend: 'Ext.data.Model',
fields: [
{name:'id', type:'int'},
{name:'name', type:'string'}
]
});
var appStore = Ext.create('Ext.data.Store', {
model: 'ServiceList',
proxy: {
type: 'ajax',
url: 'json/appdata.json',
reader: {
root: 'services',
type: 'json'
}
}
});
Ext.define('treeModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'text', type: 'string'},
{name: 'column_id', type: 'string'}
]
});
var treeAjax = Ext.Ajax.request({
url: 'json/dynamicMenu.json',
method: 'get',
success:function(response){
console.log("treeAjax Success");
tree_response = Ext.JSON.decode(response.responseText);
var treeStore = Ext.create('Ext.data.TreeStore', {
model : 'treeModel',
root : tree_response.response.body
});
var app;
var tree = Ext.create('Ext.tree.Panel', {
forceFit: true,
id :'treepanel',
title: 'MENUS',
cls:'parentIcon childIcon',
autoScroll: true,
border: false,
useArrows: true,
height: '100%',
animate: true,
rootVisible: false,
store: treeStore,
//scrollable: true,
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop',
containerScroll: true
}
},
items: [{
xtype: 'treecolumn',
id: 'treecolumn',
sortable: true,
dataIndex: 'text'
}],
listeners: {
itemclick: function(view, node) {
description_panel.show();
nodeText=node.get('text');
nodeGiven=node.get('column_id');
Ext.getCmp('add').hide();
leafbox.reset();
Ext.getCmp('update').show();
Ext.getCmp('TFTxt').setValue(nodeText);
Ext.getCmp('TFGive').setValue(nodeGiven);
if(node.get('leaf')!=false)
{
leafbox.hide();
appField.show();
description_panel.doLayout();
Ext.getCmp('addCol').disabled=true;
}
else
{
leafbox.hide();
appField.hide();
if (nodeText=="Edit"){
Ext.getCmp('addCol').disabled=false
}
else{
Ext.getCmp('addCol').disabled=true
}
};
},
}
});
var treeButton= Ext.create('Ext.panel.Panel',{
id: 'treedetails',
docked: 'bottom',
items : [{
xtype:'button',
id : 'addMenu',
enable : true,
text:'Add Menu',
handler:function() {
appField.hide();
Ext.getCmp('update').hide();
Ext.getCmp('add').show();
leafbox.show();
description_panel.doLayout();
description_panel.getForm().reset();
}
},
{
xtype:'button',
text:'Add Column',
id:'addCol',
handler:function() {
appField.hide();
leafbox.hide();
Ext.getCmp('update').hide();
Ext.getCmp('add').show();
description_panel.show();
description_panel.getForm().reset();
}
},
{
xtype:'button',
text:'Delete Record',
handler:function() {
alert('Data Has Been added');
value3=Ext
.getCmp('treepanel')
.getSelectionModel()
.getLastSelected();
value3.remove();
leafbox.hide();
appField.hide();
}
}]
});
var description_panel = Ext.create('Ext.form.Panel',{
title: 'Menu Details',
id: 'description_panel',
autoScroll: true,
flex: 1,
scrollable: true,
items : [{
id : 'dataForm',
items: [{
xtype:'textfield',
id: 'TFTxt',
name: 'as',
fieldLabel: 'Text',
allowBlank:false,
listeners : {
el:{
delegate : 'input',
click : function() {
Ext.getCmp('TFTxt').focus(true);
}
}
}
},
{
xtype:'textfield',
fieldLabel: 'Column ',
name: 'as',
id: 'TFGive',
allowBlank:false,
listeners:{
el:{
delegate : 'input',
click : function() {
Ext.getCmp('TFGive').focus(true);
}
}
}
}],
buttons:[{
id:'add',
text:'Add',
width:10,
handler:function() {
value3 = Ext
.getCmp('treepanel')
.getSelectionModel()
.getLastSelected();
value1 = Ext.getCmp('TFTxt').getValue();
value2 = Ext.getCmp('TFGive').getValue();
value4 = Ext
.getCmp('leafselection')
.items
.get(0)
.getGroupValue();
noderesult=nodecheck(value1, value3);
if(noderesult==true){
if(value4=='2'){
var insertvalues = value3.createNode({
text:value1,
column_id:value2,
leaf: false
});
}
else{
var insertvalues = value3.createNode({
text:value1,
column_id:value2,
leaf: true
});
}
value3.appendChild(insertvalues);
alert('The menu has been added. Please expand to see the added menu');
}
else{
alert('Please choose a diffrent Name . Name already exist');
Ext.getCmp('TFTxt').focus(true);
}
}
},
{
id:'update',
text:'Update',
width:10,
handler:function() {
value3 = Ext
.getCmp('treepanel')
.getSelectionModel()
.getLastSelected();
console.log(value3.parentNode)
value1 = Ext.getCmp('TFTxt').getValue();
value2 = Ext.getCmp('TFGive').getValue();
value4 = Ext
.getCmp('leafselection')
.items
.get(0)
.getGroupValue();
noderesult = nodecheck(value1, value3);
if(noderesult==true){
if(value4=='2'){
var updatevalues = value3.set({
text:value1,
column_id:value2,
leaf: false
});
}
else{
var updatevalues = value3.set({
text:value1,
column_id:value2,
leaf: true
});
}
alert('The Data has been edited.');
}
else{
alert('Please choose a diffrent Name. Name already exist');
Ext.getCmp('TFTxt').focus(true);
}
}
}]
}] ,
listeners:{
render : function(){
this.hide();
}
}
});
var appField =new Ext.form.ComboBox({
fieldLabel: 'Application',
id:'appchoice',
store: appStore,
displayField: 'name',
valueField: 'id',
typeAhead: true,
mode: 'local',
emptyText:'Choose number...',
selectOnFocus:true,
listeners : {
'select' : function(combo, record){
app=record[0];
console.log(app);
},
render : function(){
this.hide();
}
}
});
Ext.getCmp('dataForm').add(appField).hide;
description_panel.doLayout();
var leafbox =new Ext.form.RadioGroup({
id: 'leafselection',
fieldLabel: 'Node Detail',
columns: 1,
items: [
{boxLabel: 'Leaf', name: 'data', inputValue: 1},
{boxLabel: 'Non Leaf', name: 'data', inputValue: 2, },
],
listeners : {
render : function(){
this.hide();
},
change: function(radiogroup, radio) {
if(radio.data==1){
appField.show();
}
else{
appField.hide();
}
}
}
});
Ext.getCmp('dataForm').add(leafbox).hide;
description_panel.doLayout();
var panel = Ext.create('Ext.Viewport',{
draggable: true,
//width:'100%',
//height: '100%',
autoHeight : true,
scrollable : true,
//autoScroll: true,
id : 'container',
renderTo : Ext.getBody(),
layout: 'hbox',
border : true,
items : [{
width : '30%',
height: '100%',
items : [tree, treeButton]
},
{
width : '70%',
height: '100%',
items : description_panel
}]
});
panel.doLayout();
function nodecheck(typedname,nodedata){
var name=typedname;
var data=nodedata;
if(data.parentNode.get('text')==name){
console.log(data.parentNode.get('text'));
return false
}
else{
data.parentNode.eachChild(function(child){
console.log("child functon");
if(child.get('text')==name){
console.log(child.get('text'));
return false
}
});
if(data.hasChildNodes()){
console.log(" data child enter");
data.eachChild(function(child){
if(child.get('text')==name){
console.log(child.get('text'));;
return false
}
});
};
}
return true
};
}
});
});
在您的面板配置中，尝试将布局从 'hbox' 更改为 'fit' 并删除自动高度线
我在视口中使用带水平框的边框布局。
var panel = Ext.create('Ext.Viewport',{
draggable: true,
autoHeight : true,
autoScroll: true,
id : 'container',
renderTo : Ext.getBody(),
layout: 'hbox',
border : true,
//defaults:{ width: '30%'},
items : [{
xtype: 'container',
width : '30%',
height: '100%',
layout: 'border',
items : [{
region: 'north',
height: '96%',
items: [tree]
},{
region:'south',
height:'4%',
items: [treeButton]
}]
},{
xtype: 'container',
width : '70%',
height: '100%',
layout: 'border',
items : [{
region: 'north',
height: '96%',
items: [description_panel]
},{
region:'south',
height:'4%',
items: [description_panelButton]
}]
}]
});
当我手动缩小屏幕大小时，视口不显示滚动条，我需要将按钮放在底部。
我尝试了 bbar、dockedItems、以不同的方式添加 treebuttons，但似乎没有任何效果。如果你能帮我解决底部按钮和滚动选项的高度问题，那就太好了。
提前致谢。
Ext.Loader.setConfig({
enabled: true
});
Ext.require([
'Ext.data.*',
'Ext.grid.*',
'Ext.tree.*',
]);
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.define('ServiceList', {
extend: 'Ext.data.Model',
fields: [
{name:'id', type:'int'},
{name:'name', type:'string'}
]
});
var appStore = Ext.create('Ext.data.Store', {
model: 'ServiceList',
proxy: {
type: 'ajax',
url: 'json/appdata.json',
reader: {
root: 'services',
type: 'json'
}
}
});
Ext.define('treeModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'text', type: 'string'},
{name: 'column_id', type: 'string'}
]
});
var treeAjax = Ext.Ajax.request({
url: 'json/dynamicMenu.json',
method: 'get',
success:function(response){
console.log("treeAjax Success");
tree_response = Ext.JSON.decode(response.responseText);
var treeStore = Ext.create('Ext.data.TreeStore', {
model : 'treeModel',
root : tree_response.response.body
});
var app;
var tree = Ext.create('Ext.tree.Panel', {
forceFit: true,
id :'treepanel',
title: 'MENUS',
cls:'parentIcon childIcon',
autoScroll: true,
border: false,
useArrows: true,
height: '100%',
animate: true,
rootVisible: false,
store: treeStore,
//scrollable: true,
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop',
containerScroll: true
}
},
items: [{
xtype: 'treecolumn',
id: 'treecolumn',
sortable: true,
dataIndex: 'text'
}],
listeners: {
itemclick: function(view, node) {
description_panel.show();
nodeText=node.get('text');
nodeGiven=node.get('column_id');
Ext.getCmp('add').hide();
leafbox.reset();
Ext.getCmp('update').show();
Ext.getCmp('TFTxt').setValue(nodeText);
Ext.getCmp('TFGive').setValue(nodeGiven);
if(node.get('leaf')!=false)
{
leafbox.hide();
appField.show();
description_panel.doLayout();
Ext.getCmp('addCol').disabled=true;
}
else
{
leafbox.hide();
appField.hide();
if (nodeText=="Edit"){
Ext.getCmp('addCol').disabled=false
}
else{
Ext.getCmp('addCol').disabled=true
}
};
},
}
});
var treeButton= Ext.create('Ext.panel.Panel',{
id: 'treedetails',
docked: 'bottom',
items : [{
xtype:'button',
id : 'addMenu',
enable : true,
text:'Add Menu',
handler:function() {
appField.hide();
Ext.getCmp('update').hide();
Ext.getCmp('add').show();
leafbox.show();
description_panel.doLayout();
description_panel.getForm().reset();
}
},
{
xtype:'button',
text:'Add Column',
id:'addCol',
handler:function() {
appField.hide();
leafbox.hide();
Ext.getCmp('update').hide();
Ext.getCmp('add').show();
description_panel.show();
description_panel.getForm().reset();
}
},
{
xtype:'button',
text:'Delete Record',
handler:function() {
alert('Data Has Been added');
value3=Ext
.getCmp('treepanel')
.getSelectionModel()
.getLastSelected();
value3.remove();
leafbox.hide();
appField.hide();
}
}]
});
var description_panel = Ext.create('Ext.form.Panel',{
title: 'Menu Details',
id: 'description_panel',
autoScroll: true,
flex: 1,
scrollable: true,
items : [{
id : 'dataForm',
items: [{
xtype:'textfield',
id: 'TFTxt',
name: 'as',
fieldLabel: 'Text',
allowBlank:false,
listeners : {
el:{
delegate : 'input',
click : function() {
Ext.getCmp('TFTxt').focus(true);
}
}
}
},
{
xtype:'textfield',
fieldLabel: 'Column ',
name: 'as',
id: 'TFGive',
allowBlank:false,
listeners:{
el:{
delegate : 'input',
click : function() {
Ext.getCmp('TFGive').focus(true);
}
}
}
}],
buttons:[{
id:'add',
text:'Add',
width:10,
handler:function() {
value3 = Ext
.getCmp('treepanel')
.getSelectionModel()
.getLastSelected();
value1 = Ext.getCmp('TFTxt').getValue();
value2 = Ext.getCmp('TFGive').getValue();
value4 = Ext
.getCmp('leafselection')
.items
.get(0)
.getGroupValue();
noderesult=nodecheck(value1, value3);
if(noderesult==true){
if(value4=='2'){
var insertvalues = value3.createNode({
text:value1,
column_id:value2,
leaf: false
});
}
else{
var insertvalues = value3.createNode({
text:value1,
column_id:value2,
leaf: true
});
}
value3.appendChild(insertvalues);
alert('The menu has been added. Please expand to see the added menu');
}
else{
alert('Please choose a diffrent Name . Name already exist');
Ext.getCmp('TFTxt').focus(true);
}
}
},
{
id:'update',
text:'Update',
width:10,
handler:function() {
value3 = Ext
.getCmp('treepanel')
.getSelectionModel()
.getLastSelected();
console.log(value3.parentNode)
value1 = Ext.getCmp('TFTxt').getValue();
value2 = Ext.getCmp('TFGive').getValue();
value4 = Ext
.getCmp('leafselection')
.items
.get(0)
.getGroupValue();
noderesult = nodecheck(value1, value3);
if(noderesult==true){
if(value4=='2'){
var updatevalues = value3.set({
text:value1,
column_id:value2,
leaf: false
});
}
else{
var updatevalues = value3.set({
text:value1,
column_id:value2,
leaf: true
});
}
alert('The Data has been edited.');
}
else{
alert('Please choose a diffrent Name. Name already exist');
Ext.getCmp('TFTxt').focus(true);
}
}
}]
}] ,
listeners:{
render : function(){
this.hide();
}
}
});
var appField =new Ext.form.ComboBox({
fieldLabel: 'Application',
id:'appchoice',
store: appStore,
displayField: 'name',
valueField: 'id',
typeAhead: true,
mode: 'local',
emptyText:'Choose number...',
selectOnFocus:true,
listeners : {
'select' : function(combo, record){
app=record[0];
console.log(app);
},
render : function(){
this.hide();
}
}
});
Ext.getCmp('dataForm').add(appField).hide;
description_panel.doLayout();
var leafbox =new Ext.form.RadioGroup({
id: 'leafselection',
fieldLabel: 'Node Detail',
columns: 1,
items: [
{boxLabel: 'Leaf', name: 'data', inputValue: 1},
{boxLabel: 'Non Leaf', name: 'data', inputValue: 2, },
],
listeners : {
render : function(){
this.hide();
},
change: function(radiogroup, radio) {
if(radio.data==1){
appField.show();
}
else{
appField.hide();
}
}
}
});
Ext.getCmp('dataForm').add(leafbox).hide;
description_panel.doLayout();
var panel = Ext.create('Ext.Viewport',{
draggable: true,
//width:'100%',
//height: '100%',
autoHeight : true,
scrollable : true,
//autoScroll: true,
id : 'container',
renderTo : Ext.getBody(),
layout: 'hbox',
border : true,
items : [{
width : '30%',
height: '100%',
items : [tree, treeButton]
},
{
width : '70%',
height: '100%',
items : description_panel
}]
});
panel.doLayout();
function nodecheck(typedname,nodedata){
var name=typedname;
var data=nodedata;
if(data.parentNode.get('text')==name){
console.log(data.parentNode.get('text'));
return false
}
else{
data.parentNode.eachChild(function(child){
console.log("child functon");
if(child.get('text')==name){
console.log(child.get('text'));
return false
}
});
if(data.hasChildNodes()){
console.log(" data child enter");
data.eachChild(function(child){
if(child.get('text')==name){
console.log(child.get('text'));;
return false
}
});
};
}
return true
};
}
});
});
在您的面板配置中，尝试将布局从 'hbox' 更改为 'fit' 并删除自动高度线
我在视口中使用带水平框的边框布局。
var panel = Ext.create('Ext.Viewport',{
draggable: true,
autoHeight : true,
autoScroll: true,
id : 'container',
renderTo : Ext.getBody(),
layout: 'hbox',
border : true,
//defaults:{ width: '30%'},
items : [{
xtype: 'container',
width : '30%',
height: '100%',
layout: 'border',
items : [{
region: 'north',
height: '96%',
items: [tree]
},{
region:'south',
height:'4%',
items: [treeButton]
}]
},{
xtype: 'container',
width : '70%',
height: '100%',
layout: 'border',
items : [{
region: 'north',
height: '96%',
items: [description_panel]
},{
region:'south',
height:'4%',
items: [description_panelButton]
}]
}]
});