Ext小结2

Ext小结2

一、树形菜单实例1

1、  前台界面采用div层存放树形菜单

<div id="tree" style="width: 200;height: 300;border: 1px solid #0000ff;overflow: auto;"></div>

解析：overflowe代表若div层不能全部显示内容时，采用滚动条显示

2、  js文件中采用读取外部文件的方式加载树形菜单

Ext.onReady(function(){

     var tree = new Ext.tree.TreePanel({

              el:'tree',

              border:false,

              loader:new Ext.tree.TreeLoader({dataUrl:'tree.txt'})

//tree.txt为文件路径

     });

    

     var root = new Ext.tree.AsyncTreeNode({text:'school'});

    

     tree.setRootNode(root);

     tree.render(); 

})

3、  外部文件

[

         {

                   text:'class1',

                   children:[

                            {text:'stu1',leaf:true},

                            {text:'stu2',leaf:true}

                   ]

         },

         {

                   text:'class2',

                   leaf:true 

         }

]

                            解析：

                                               Text为节点名，children代表子节点，leaf代表是否是叶节点

二、树形菜单实例2

（调用jsp页面实现树形菜单）

1、  前台界面采用div层存放树形菜单

<div id="tree" style="width: 200;height: 300;border: 1px solid #0000ff;overflow: auto;"></div>

解析：overflowe代表若div层不能全部显示内容时，采用滚动条显示

2、  Js文件

 

Ext.onReady(function(){

     var tree = new Ext.tree.TreePanel({

              el:'tree',

              border:false,

              loader:new Ext.tree.TreeLoader({dataUrl:'tree.jsp'})

     });

    

     var root = new Ext.tree.AsyncTreeNode({text:'school',id:'0'});

    

     tree.setRootNode(root);

     tree.render(); 

})

        

         解析：

     loader:new Ext.tree.TreeLoader({dataUrl:'tree.jsp'})

                                     tree.jsp为要调用的jsp文件

     var root = new Ext.tree.AsyncTreeNode({text:'school',id:'0'});

     若节点中有id则可以实现延时加载，当加载时前台默认将id传到调用的jsp页面中，jsp页面将返回的json数据加载到相应节点

3、  Jsp页面：

<%

         String nodestr = request.getParameter("node");

         int node = Integer.parseInt(nodestr);

         String json="";

        

         switch(node){

                   case 0:

                            json+="[{text:'class1',id:'1',leaf:false},{text:'class2',id:'2',leaf:true,href:'1.html',hrefTarget:'_blank'}]";

                            break;

                   case 1:

                   json+="[{text:'stu1',id:'3',leaf:true,href:'2.html',hrefTarget:'_blank'},{text:'stu2',id:'4',leaf:true,href:'3.html',hrefTarget:'_blank'}]";

                            break;

                   default:

                            break;

         }

        

         out.print(json);

%>

 

 

解析：

         request.getParameter("node");

jsp页面调用时会自动向jsp页面传入一个名为node的参数即为显示的相应节点id

三、菜单栏实例

1、前台：

     <div id="tool" style="border: 1px solid #0000ff;"></div>

2、js页面

Ext.onReady(function(){

     var tb = new Ext.Toolbar();

    

     var menu1 = new Ext.menu.Menu({

              items:[

                       {text:'add',icon:'images/save.gif',handler:function(){alert("add")}},

                       {text:'edit',handler:function(){alert("edit")}},

                       {text:'delete',handler:function(){alert("delete")}}

              ]

     });

    

 

解析：

              Text为选项值，icon为图标路径，hander为对应方法

 

     var menu2 = new Ext.menu.DateMenu({

              handler:function(pd,date){

                       Ext.Msg.alert("date",date.format('Y-m-d'));

              }

     });

    

 解析：

为时间控件的选项，可以在hander中调用相应方法取出所选时间，且可以规定时间格式

     var menu3 = new Ext.menu.ColorMenu({

              handler:function(cm,color){

                       Ext.Msg.alert("color",color);

                       document.bgColor=color;

              }

     });

    

解析：为颜色控件的选项，可以在hander中调用相应方法取出颜色值

     tb.add([

              {text:'manage',menu:menu1,icon:'images/rate_good.gif'},

              {text:'search',icon:'images/report.gif',handler:function(){alert("search")}},

              {text:'date',menu:menu2},

              {text:'color',menu:menu3}

     ]);

    

     tb.render("tool");

})

以上是菜单栏的主界面内容

解析：

               tb.render("tool");

              tool代表菜单栏显示的位置，通常为一个层