the tree node can't click in the extJS freamwork with arcgis for js

yanli · ‎10-16-2012

when i put a extjs tree in the example
http://help.arcgis.com/en/webapi/javascript/arcgis/samples/framework_extjslayout/index.html

,i click the node ,but can't work , what's wrong ? can u help?

[HTML]

<!DOCTYPE HTML>
<head>
    <title>
      ExtJS Layout Example
    </title>

    <link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/ext-4.0.7-gpl/resources/css/ext-all.css"/>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" />

    <style type="text/css">
      html, body {
        font:normal 12px verdana;
        margin:0;
        padding:0;
        border:0 none;
        overflow:hidden;
        height:100%;
      }

    </style>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2compact"
    type="text/javascript"></script>

    <script type="text/javascript" charset="utf-8" src="http://cdn.sencha.io/ext-4.0.7-gpl/ext-all.js"></script>
    </script>
    <script type="text/javascript">
      dojo.require("esri.map");
      dojo.require("esri.layers.FeatureLayer");
      dojo.require("esri.dijit.Popup");
      dojo.require("dojo.number");

      var map;
                          //****************the tree that i add
            var yewuTree=new Ext.tree.TreePanel({
          id:'ywtreepan',
          root:{
      text:"1",
      expanded:true,
      id:"ee",
      children:[
      {
        text:"2",
     expanded:true,
     children:[
     {
     text:"3",
     id:"a",
     leaf:true
     },
     {
     text:"4",
     id:"b",
     leaf:true
     }
     ]
      },
      {
         text:"5",
      id:"cc",
      leaf:true,
      listeners:function(node)
      {
        alert("aaa");
      }

      }
      ]

    }
     })

     yewuTree.on("click", function(node) {

       alert("aaaa");

       });

// yewuTree.getSelectionModel().getSelectedNode();

      function init() {
        var viewport = new Ext.Viewport({
          layout: "fit",
          title: "EXT JS Layout",
          items: [{
            layout: "border",
            items: [{
              region: "center",
              title: "center",
              html: "<div id='map' style='height:100%; width:100%;z-index=: 1000;'></div>"
            }, {
              region: "north",
              height: 50,
              collapsible: false,
              contentEl:"header"
            }, {
              region: "south",
              height: 80,
              collapsible: false,
              contentEl: "footer" // this gets the content from the div named "footer"
            }, {
              region: "west",
              title: "Left Panel",
              width: 150,
              split: true,
              collapsible: true,
     layout:'fit',
     items:yewuTree,
            // html: "Left panel content. This panel is collapsible and can be resized using the splitter",
              listeners:{
                collapse: resizeMap,
                expand: resizeMap
              }
            }, {
              region: "east",
              width: 200,
              xtype: 'tabpanel',
              activeTab: 0, // index or id
              items:[{
                  title: 'Tab 1',
                  html: 'This is tab 1 content.'
              },{
                  title: 'Tab 2',
                  html: 'This is tab 2 content.'
              },{
                  title: 'Tab 3',
                  html: 'This is tab 3 content.'
              }]
            }]
          }]
        });
       var initialExtent = new esri.geometry.Extent({"xmin":-118.61,"ymin":34.34,"xmax":-118.09,"ymax":34.56,"spatialReference":{"wkid":4326}});

        var popup = new esri.dijit.Popup(null, dojo.create("div"));

        map = new esri.Map("map", {
          extent: esri.geometry.geographicToWebMercator(initialExtent),
          infoWindow: popup
        });

        dojo.connect(map, 'onLoad', function(theMap) {
          dojo.connect(window, 'resize', map, map.resize);
        });

        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
        map.addLayer(basemap);

        var template = new esri.dijit.PopupTemplate({
          title: "Geologic Outcrop",
          description:"{lithology_type} with the following metamorphic facies: {metamorphic_facies}"
        });
        var featureLayer = new esri.layers.FeatureLayer("http://sampleserver5.arcgisonline.com/ArcGIS/rest/services/Energy/Geology/MapServer/9",{
          mode:esri.layers.FeatureLayer.MODE_SNAPSHOT,
          infoTemplate:template,
          outFields:["lithology_type","metamorphic_facies"]
        });

        map.addLayer(featureLayer);

      }

      function resizeMap() {
        map.resize();
      }
      dojo.addOnLoad(init);
    </script>
</head>

<body>
    
    <div id="header">
       <span>Header content goes here</span>
    </div>
    <div id="center" class="x-hide-display" style="z-index: 100;">
    </div>
    <div id="props-panel" class="x-hide-display">
    </div>
    <div id="footer" class="x-hide-display">
      <span>Footer content goes here<span>
    </div>
    <div id="north" class="x-hide-display">

    </div>
</body>

</html>

[/HTML]