当前位置: 代码迷 >> JavaScript >> ext js tree grid 通讯
  详细解决方案

ext js tree grid 通讯

热度:746   发布时间:2012-11-23 00:03:43.0
ext js tree grid 通信
  buildUnitTree=function(){

   //定义根节点的Loader
//   var treeloader=new Tree.TreeLoader({dataUrl:'unit.do?m=unitTree'});

   //异步加载根节点
    var rootnode=new Ext.tree.AsyncTreeNode({
        id:'',
        text:'目录树根节点',
        expandable :true
                });
    
   var treepanel = new Ext.tree.TreePanel({
                //renderTo:"tree_div",//如果使用renderTo,则不能使用setRootNode()方法,需要在TreePanel中设置root属性。
                el:'unit_tree',        //填充区域
                rootVisible:true,     //隐藏根节点
                border:true,          //边框
                animate:false,         //动画效果
                autoScroll:true,      //自动滚动
                enableDD:false,       //拖拽节点     
                checkModel: 'cascade',   //对树的级联多选  
                onlyLeafCheckable: false,//对树所有结点都可选          
                containerScroll:true,
                rootVisible : false,    
                root: rootnode,
                loader:
                    new Ext.tree.TreeLoader({
                        dataUrl:"unit.do?m=unitTree",
                        baseAttrs: { uiProvider: Ext.tree.TreeCheckNodeUI }
                    })           
            });

   //设置根节点
 //  treepanel.setRootNode(rootnode);

   //响应事件,传递node参数
       treepanel.on('beforeload',
                function(node){
                   treepanel.loader.dataUrl='unit.do?m=unitTree&parentId='+node.id;    //定义子节点的Loader   
                });
    treepanel.on('beforeexpandnode',function(node){//展开时在gird加载对应的数据数据
            buildUnitGrid(node.id);
    });
    treepanel.on('beforecollapsenode',function(node){//当点击收起来的时候在grid加载上一层的数据
            buildUnitGrid(node.parentNode.id);        
    });
     treepanel.on("check",function(node,checked){alert(node.text+" = "+checked)}); //注册"check"事件  
     treepanel.on('checkchange', function(node, checked) {  
                      //Ext.MessageBox.alert(buildUnitGrid(node.id));
                        
                    node.expand();  
                     node.attributes.checked = checked;  
                     node.eachChild(function(child) {  
                         child.ui.toggleCheck(checked);  
                         child.attributes.checked = checked;  
                        child.fireEvent('checkchange', child, checked);  
                     });
                 });  
     treepanel.on('click',function(node){//单击树的一个节点 grid显示该节点的单位信息
         gridPanel.store.proxy=new Ext.data.HttpProxy({url:"unit.do?m=viewUnit&id="+node.id});
         gridPanel.store.load();
         gridPanel.render();
     });            
       treepanel.render();           
      treepanel.getRootNode().expand();

}


var gridPanel;

buildUnitGrid=function(parentId){
    var cbsm=new Ext.grid.CheckboxSelectionModel({dataIndex:"id"});//定义复选框
    var store=new Ext.data.Store({
             proxy:new Ext.data.HttpProxy({url:"unit.do?m=unitList&parentId="+(parentId==undefined?null:parentId)}),
             reader:new Ext.data.JsonReader({totalProperty:"totalPorperty",root:"root"},
             ["id",
             "name",
             "address",
             "phone", 
             {name : 'createDate', type : 'date', mapping : 'createDate.time', dateFormat : 'time' } ,
             "comm"])
         });//定义数据源
     store.load();//加载数据
     var colm=new Ext.grid.ColumnModel([//定义列
             new Ext.grid.RowNumberer(),
             cbsm,
             { id:'id',header: "id", sortable: true, dataIndex: 'id',hidden:true},
             {header:"单位名",sortable:false,dataIndex:"name"},
            {header: "单位地址",sortable: false, dataIndex: 'address'},
            {header: "单位电话",sortable: false, dataIndex: 'phone'},
            {header: "创建时间", sortable: true, dataIndex: 'createDate',renderer:Ext.util.Format.dateRenderer('Y年m月d日')},
            {header: "备注",  sortable:false, renderer: Ext.util.Format.ellipsis(".",30), dataIndex: 'comm'},
              {header:"操作",dataIndex:'id',renderer:operation}
         ]);
//     var pageBar=new Ext.PagingToolbar({    //定义分页条
//                pageSize: 10,    
//                store: store,
//                displayInfo: true,    
//                displayMsg: '第{0} 到 {1} 条数据 共{2}条',    
//                emptyMsg: "没有数据"    
//            });
       
    gridPanel=new Ext.grid.GridPanel({
         store:store,
         cm:colm,
         sm:cbsm,
         width:'60%',
        autoHeight:true,
     //   bbar:pageBar,
       // frame:false,
        title:'单位列表',
       // iconCls:'icon-grid',
        autoHeight: true,
        el: "unit_grid"
         
     });
     gridPanel.render();
}

 function operation(value){
              var _context='<a onclick="updateUnit('+value+')" style="text-decoration: underline">修改</a>&nbsp;&nbsp;';
              _context+='<a onclick="deleteUnit('+value+')" style="text-decoration: underline">删除</a>';
              return _context;
          }


  相关解决方案