Ext小结2

4 篇文章 0 订阅
2 篇文章 0 订阅

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>

2js页面

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代表菜单栏显示的位置,通常为一个层

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值