var Tree = Ext.tree;
    var tree = new Tree.TreePanel({
        el:'tree-div',
        autoScroll:true,
        animate:true,
 
        containerScroll: true,
        rootVisible: true,
//        checkModel: 'cascade',   //对树的级联多选
//        onlyLeafCheckable: false,//对树所有结点都可选
//        animate: false,
     

  loader: new Tree.TreeLoader({

        })
    });

    var root = new Tree.AsyncTreeNode({
          iconCls: 'folder',
             text: 'china',
             draggable: false,
             id : '0'
    });
  //var orderby =new Ext.tree.TreeSorter(tree,{folderSort:true,dir : "asc",property :"order"});
  //new Ext.tree.TreeSorter(tree, {folderSort:false});
    tree.setRootNode(root);

// tree.on('click', function(node){node.toggle();});

    tree.on('beforeload', function(node) {

                tree.loader.dataUrl = 'tree.txt'; //后台获取的数据
   
                myNode=node;
                myFNode=node.parentNode;
                rootNode=root;

            });
   
 tree.on('click',
   function(node)
   {
     
    alert(node.text);
            
   }
        );
 

    tree.render();
    root.expand(); 
}
/*----------------------------------------------------------*/

Ext.onReady(function(){
 
   createTree();
 
});

Ext.onReady(function(){

    // NOTE: This is an example showing simple state management. During development,
    // it is generally best to disable state management as dynamically-generated ids
    // can change across page loads, leading to unpredictable results.  The developer
    // should ensure that stable state ids are set for stateful components in real apps.
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

 var store=new Ext.data.JsonStore({
  
    //results 表示结果数
    //rows 表示从后台传过来的JSON数据
    data:{ "results": 2, "rows":[
        {"id":1, "city": "suzhou", "areacode": "0512", "perincome": "2500" },
        {"id":2, "city": "nanjing", "areacode": "025", "perincome": "2200" }]},

       //自动加载(不能用store.load())
    autoLoad:true,
    totalProperty:"results",

    root:"rows",

    fields:['title',  {name:'city',mapping:'city'},

    {name:'areacode',type:'int'},

    {name:'perincome',mapping:'perincome',type:'int'},

    {name:'id',mapping:'id',type:'int'}

    ]

  });

    // create the Grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
           {id:'city',header: "city", width: 400, sortable: true, dataIndex: 'city'},
            {header: "areacode", width: 200, sortable: true, dataIndex: 'areacode'},
            {header: "perincome", width: 200, sortable: true, dataIndex: 'perincome'}
        ],
        stripeRows: true,
        autoExpandColumn: 'city',
        height:280,
        width:600,
        title:'Array Grid'
   });

 grid.on('rowclick', function(grid, rowIndex, e) {
       var recordr = store.getAt(rowIndex);
       alert('id is ' + recordr.get('id') + ',city name is ' + recordr.get('city'));
      // window.open('index.html');//设置转向地址,用于对row的操作,举个例子 当然也可以用location.href等
     });  

 //把此grid放进grid-example里面
    grid.render('grid-example');
});