extjs4 弹出框弹不来、树形没法自行展开

来源：互联网发布：java抓取动态网页数据编辑：程序博客网时间：2024/06/05 03:18

1、最近做的一个树形实验，想点击一个按钮后弹出一个对话框，点击树形节点后可以自行展开或收缩。

extjs4 <wbr>弹出框弹不来、树形没法自行展开
如图：我的计划是：点击To Do 或Remodel Project 节点后，树形的相应节点展开或收缩，当选中一个节点后，点击工具栏上面的Grocery List按钮会弹出一个提示框，但是自己做出来后发现，树形无法展开或收缩，点击工具栏上面的Grocery List按钮弹出的只是一个小小的点

源代码：

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'
        }]
    });

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" />

解决办法：bootstrap.js 和 ext-debug.js同时引人引起冲突，把ext-debug.js删除，问题解决！