1、最近做的一个树形实验,想点击一个按钮后弹出一个对话框,点击树形节点后可以自行展开或收缩。
![extjs4 <wbr>弹出框弹不来、树形没法自行展开 extjs4 <wbr>弹出框弹不来、树形没法自行展开](https://i-blog.csdnimg.cn/blog_migrate/c00bbde1fd992bc731befa4b751e5828.jpeg)
如图:我的计划是:点击To Do 或Remodel Project 节点后,树形的相应节点展开或收缩,当选中一个节点后,点击工具栏上面的Grocery List按钮会弹出一个提示框,但是自己做出来后发现,树形无法展开或收缩,点击工具栏上面的Grocery List按钮弹出的只是一个小小的点
源代码:
js
Ext.require([
'Ext.tree.*',
'Ext.data.*',
'Ext.window.MessageBox'
]);
Ext.onReady(function() {
var store = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
url: 'adminTree.json'
},
sorters: [{
property: 'leaf',
direction: 'ASC'
}, {
property: 'text',
direction: 'ASC'
}]
});
var tree = Ext.create('Ext.tree.Panel', {
store: store,
rootVisible: false,
useArrows: true,
frame: true,
title: 'Check Tree',
renderTo: 'div1',
width: 200,
height: 250,
dockedItems: [{
xtype: 'toolbar',
items: {
text: 'Get checked nodes',
handler: function(){
var records = tree.getView().getChecked(),
names = [];
Ext.Array.each(records, function(rec){
names.push(rec.get('text'));
});
Ext.MessageBox.show({
title: 'Selected Nodes',
msg: names.join('<br />'),
icon: Ext.MessageBox.INFO
});
}
}
}]
});
});
JSON
[{
"text" : "To Do",
"cls" : "folder",
"expanded" : true,
"children" : [{
"text" : "Go jogging",
"leaf" : true,
"checked" : true
}, {
"text" : "Take a nap",
"leaf" : true,
"checked" : false
}, {
"text" : "Climb Everest",
"leaf" : true,
"checked" : false
}]
}, {
"text" : "Grocery List",
"cls" : "folder",
"children" : [{
"text" : "Bananas",
"leaf" : true,
"checked" : false
}, {
"text" : "Milk",
"leaf" : true,
"checked" : false
}, {
"text" : "Cereal",
"leaf" : true,
"checked" : false
}, {
"text" : "Energy foods",
"cls" : "folder",
"children" : [{
"text" : "Coffee",
"leaf" : true,
"checked" : false
}, {
"text" : "Red Bull",
"leaf" : true,
"checked" : false
}]
}]
}, {
"text" : "Remodel Project",
"cls" : "folder",
"children" : [{
"text" : "Finish the budget",
"leaf" : true,
"checked" : false
}, {
"text" : "Call contractors",
"leaf" : true,
"checked" : false
}, {
"text" : "Choose design",
"leaf" : true,
"checked" : false
}]
}]
HTML
<!DOCTYPE html>
<html>
<head>
<title>Tree Example</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="extjs4/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="extjs4/shared/example.css" />
<script type="text/javascript" src="extjs4/ext-debug.js"></script>
<script type="text/javascript" src="extjs4/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="extjs4/bootstrap.js"></script>
<script type="text/javascript" src="test/tabpanel.js"></script>
<style>
.x-tree-checked .x-grid-cell-inner {
font-style: italic;
color: #777;
}
.x-grid-row-selected .x-grid-cell {
background-color: #efefef !important;
}
</style>
</head>
<body>
<h1>各种消息框</h1>
<div id="div1">
</div>
</body>
</html>
解决办法:bootstrap.js 和 ext-debug.js同时引人引起冲突,把ext-debug.js删除,问题解决!