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

yanli — Tue, 16 Oct 2012 16:23:54 GMT

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]

topic the tree node can't click in the extJS freamwork with arcgis for js in ArcGIS JavaScript Maps SDK Questions

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