ext webwork+hibernate+spring crud ssh2 viewport布局文 -

chengyue2007

浏览: 1488480 次
性别:
来自: 大连

最近访客更多访客>>

akingde

wzbdocs

ytleon

arpenker

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

ext webwork+hibernate+spring crud ssh2 viewport布局文

博客分类：

extjs

EXT Webwork Spring Hibernate CSS

吸纳百川为我所用。

1.ext_viewport.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="ww" uri="/webwork" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ext viewport 要在服务器下测试</title>

<link rel="stylesheet" type="text/css" href="../ext-2.2.1/resources/css/ext-all.css" />


<script type="text/javascript" src="../ext-2.2.1/adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="../ext-2.2.1/ext-all.js"></script>



<link rel="stylesheet" type="text/css" href="extcss/main.css"/>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'img/s.gif';
</script>
<style>
#actions li {
     margin:.3em;
}
#actions li a {
     color:#666688;
     text-decoration:none;
}
.nav{
background:url(img/user.gif) no-repeat scroll left top;
}
</style>
</head>
<body>
<div id="loading-mask" style=""></div>
<div id="loading">
    <div class="loading-indicator"><img src="img/extanim32.gif" width="32" height="32" style="margin-right:8px;" align="absmiddle"/>Loading...</div>
</div>
<script type="text/javascript" src="extjs/ext_viewport.js"></script>
<ul id="actions" class="x-hidden">
     <li>
         <a id="use" href="#">Use Existing Tab</a>
     </li>
     <li>
         <a id="create" href="#">Create New Tab</a>
     </li>
</ul>
<div id="west"></div>
<div id="north"></div>
<div id="south">
<div style="float:left;margin:5px;font:normal 12px tahoma, arial, sans-serif,宋体;">
    Power By: erick
 
</div>
    <div style="float:right;margin:5px;font:normal 12px tahoma, arial, sans-serif,宋体;"> 版本号V1.0Beta </div>
</div>
<div id="tabs"></div>
</body>
</html>

2.ext_viewport.js

Ext.onReady(function(){
Ext.QuickTips.init();//没查什么意思
//Ext.BLANK_IMAGE_URL = 'scripts/ext/resources/images/vista/s.gif';
    // 包含actions的菜单
     var tabActions = new Ext.Panel({
         frame:true,
         title: 'Actions',
         collapsible:true,
         contentEl:'actions',
         titleCollapse: true
     });

     // 保持actions菜单的父面板
     var actionPanel = new Ext.Panel({
         id:'west-panel',
         region:'west',
         split:true,
         collapsible: true,
        // collapseMode: 'mini',
         width:200,
         //minWidth: 150,
         minSize: 175,
         maxSize: 400,
         margins:'0 5 0 0',
         border: true,
         layout:'accordion',//加了以后菜单的border就占满了west region,样式,默认总有一个菜单总打开
         title:'system menu',
        layoutConfig:{
   animate:true
},//没看出变化
         //baseCls:'x-plain',//一个样式
         //items: [tabActions]
         items: [
    {
title:'系统管理',
border:false,//下面的tree里border:true;
html:'<div id="tree-div" style="overflow:auto;width:100%;height:100%;border:0px solid #c3daf9"></div>',
iconCls:'nav'//定义按钮等的图标的样式
    },{
title:'System',
border:false,
//iconCls:'settings',
html:'<div id="tree" style="overflow:auto;width:100%;height:100%"></div>'
    },{
title:'Sygetm',
border:false,
//iconCls:'settings',
html:'<div id="tree3" style="overflow:auto;width:100%;height:100%"></div>'
    }]

     });

     // 主面板（已有tab）
     var tabPanel = new Ext.TabPanel({
         region:'center',
         deferredRender:false,
         autoScroll: true,
         margins:'0 4 0 0', //up left down right
         resizeTabs:true, // turn on tab resizing
         minTabWidth: 85,
tabWidth:95,
enableTabScroll:true,//挤的时候能够滚动收缩
         activeTab:0,
         //autoHeight:true,
         items:[{ //here is a define tab names "main",others will be add throught the tree click event
             id:'tab1',
             contentEl:'tabs',
             title: 'Main',
             html:"<div id='welcome' style='margin:40px;font-size:16px;color:#15428B;text-align:center'><h2><img src='img/extanim32.gif' width='32' height='32' style='margin-right:8px;' align='absmiddle'/>Welcome to IT Dept</h2></div>",
             closable:true,
             autoScroll:true
         }],
          //下面是新增的关閉右键菜单代码
            listeners:{
                     //传进去的三个参数分别为:这个tabpanel(tabsDemo),当前标签页,事件对象e
                    "contextmenu":function(tdemo,myitem,e){
                               var menu=new Ext.menu.Menu([{
                                         text:"关闭当前页",
                                         handler:function(){
                                            tdemo.remove(myitem);
                                         }
                                },{
                                         text:"关闭其他所有页",
                                         handler:function(){
                                            //循环遍历
                                            tdemo.items.each(function(item){
                                                 if(item.closable&&item!=myitem)
                                                 {
                                                    //可以关闭的其他所有标签页全部关掉
                                                    tdemo.remove(item);
                                                 }
                                            });
                                         }
                                },{
                                         text:"新建标签页",
                                         handler:addTab
                                }]);
                                //显示在当前位置
                                menu.showAt(e.getPoint());
                     }
            }
     });

     // 配置视图viewport
     viewport = new Ext.Viewport({
            layout:'border',
            items:[
            new Ext.BoxComponent({
region:'north',
el: 'north',
height:30
}),new Ext.BoxComponent({
region:'south',
el: 'south',
height:55
}),
            actionPanel,tabPanel]});

      // 在中间的面板加入tab
     function addTab(tabTitle, targetUrl){
         tabPanel.add({
         title: tabTitle,
         iconCls: 'tabs',
         autoLoad: {url: targetUrl, callback: this.initSearch, scope: this},
         closable:true
     }).show();
     }

     // 更新tab内容，如不存在就新建一个
     function updateTab(tabId,title, url) {
         var tab = tabPanel.getItem(tabId);
         if(tab){
             tab.getUpdater().update(url);
             tab.setTitle(title);
         }else{
             tab = addTab(title,url);
         }
         tabPanel.setActiveTab(tab);
     }

     // 映射连接的id到函数
     var count = 0;
     var actions = {
         'create' : function(){
             addTab("New Tab",'sample0.html');
         },
         'use' : function(){
             // 演示页之间的轮换
             updateTab('tab1','替换' + count + ' 次','sample'+(count%2)+'.html');
             count++;
         }
     };

     function doAction(e, t){
         e.stopEvent();
         actions[t.id]();
     }

     // body初始化后，viewport setup过后才能执行下面的代码
     //actionPanel.body.on('mousedown', doAction, null, {delegate:'a'}); //改为tree.on('click',treeClick);







     //my tree define ----tree1-------
     var Tree = Ext.tree;
       //要在服务器下测试
        //定义根节点的Loader
        var treeloader=new Tree.TreeLoader({
           baseParams:{fid:'0'},//default post a parameter fid to action
           dataUrl:'../extmenu.action'   //指定的URL
           //dataUrl:'extMenusubmit.jsp'
        });

        //根节点
    //var root=new Ext.tree.TreeNode({
    //TreeNode常用配置参数
//1.checked:false//true则在text前有个选中的复选框,false则text前有个未选中的复选框,默认没有任何框框
//2.expanded:fasle//展开,默认不展开
//3.href:"http:/www.cnblogs.com"//节点的链接地址
//4.hrefTarget:"mainFrame"//打开节点链接地址默认为blank,可以设置为iframe名称id,则在iframe中打开
//5.leaf:true//叶子节点,看情况设置
//6.qtip:"提示"//提示信息,不过要 Ext.QuickTips.init();下
//7.text:"节点文本"//节点文本
//8.singleClickExpand:true//用单击文本展开,默认为双击
//isteners:{//监听
          //"click":function(node,e){
                     // alert(node.text)
                 // }
         // }
        //id:"root",
        //text:"控制面板",
        //expanded:true
   //});
        //异步加载根节点
        var root=new Tree.AsyncTreeNode({
      id:'0',
            text:'root'
        });

        //var tree = new Tree.TreePanel('tree',{//ext 1.0
        var tree = new Tree.TreePanel({
            //renderTo:"tree_div",
//如果使用renderTo，则不能使用setRootNode()方法，需要在TreePanel中设置root属性。
            el:'tree-div',//ext 2.0
            //el:'west',
//root:root,        //填充区域
            rootVisible:false,     //隐藏根节点
            border:true,          //边框
            animate:true,         //动画效果
            autoScroll:true,      //自动滚动
            enableDD:true,       //节点是否可以拖拽
            containerScroll:true,
            //lines:true,//节点间的虚线条
            useArrows:true,//小箭头
            //root:rotnode,        //两种设置root节点的方法，
//一种配置root，另一种就是setRootNode
            loader:treeloader
        });

       //设置根节点
       tree.setRootNode(root);

       //响应事件，传递node参数

       tree.render();
      // root.expand(false,true); //展开一级树,第二级后不展开
      root.expand();

treeloader.on('beforeload',function(treeLoader,node){
this.baseParams.fid=node.attributes.id;//传参数
//Ext.Msg.alert('msg',this.baseParams.fid);
},treeloader);

tree.on('click',treeClick);//tree leaf click event
//tree1 end----------------------------------

//tree2 start------------------------------------
    var root2=new Ext.tree.TreeNode({
    id:"root2",
    text:"tree root"
});

    var c1=new Ext.tree.TreeNode({
id:'c1',
icon:'img/im2.gif',
text:'infomation1'
});

    var c2=new Ext.tree.TreeNode({
id:'c2',
icon:'img/im2.gif',
//text:'<a href=\'1.jsp\' target=\'_self\'>infomation2</a>'
text:'information2',
leaf:true
});

    var c22=new Ext.tree.TreeNode({
id:'c22',
icon:'img/im2.gif',
text:'infomation3',
href:'1.jsp'
});

    var c3=new Ext.tree.TreeNode({
id:'c3',
icon:'img/im2.gif',
text:'infomation4'
});

    var c4=new Ext.tree.TreeNode({
id:'c4',
icon:'img/im2.gif',
text:'infomation5',
href:'output\/Ext.WindowGroup.html'
});

var c5=new Ext.tree.TreeNode({
id:'c5',
text:'infomation'
});
c1.appendChild(c2);
    c1.appendChild(c22);
root2.appendChild(c1);
    root2.appendChild(c3);
    root2.appendChild(c4);
   //root3.appendChild(c5);

var tree2=new Ext.tree.TreePanel({
renderTo:"tree",
root:root2,
animate:true,
enableDD:false,
border:false,
rootVisible:false,
containerScroll: true
});

tree2.on('click',treeClick);//没有效果,it seams the link should be add to the tree options directly by href property,i know why ,maybe the isleaf property is undefine
//tree2 end-------------------------------------------------------------------------
//set tree click events
function treeClick(node,e) {
//var Tree = Ext.tree;
if(node.isLeaf()){
e.stopEvent();
//Ext.Msg.alert("msgkkk",node.id);
//Ext.Msg.alert('mmm',node.ui.getAnchor());
var n = tabPanel.getComponent(node.id);
if (!n) {
var n = tabPanel.add({
'id' : node.id,
'title' : node.text,
closable:true,
autoScroll:true,
//autoLoad:"2.jsp"
//html: '<iframe src="'+node.ui.getAnchor()+'" width="100%" height="100%" border="0"/>'
//只是不需要再载入ext的东西，其它代码结构完全相同，也是采用Ext.onReady方式,原因是<script>块中，不能加入 这一符号。否则Ext不能运行该页的javascript
//autoLoad:{url:'inventory_list.jsp',callback:this.initSearch,scope:this,script:true}//params: {TabId: tabIndex}
//autoLoad:{url:'../Inventory/ext_inventory_list.jsp',scripts:true,nocache: true}//leaf tree's id value must be a string not integer,otherwise "this.id.indexOf is not a function" errors will be happened
autoLoad:{url:'../Inventory/ext_stock_list.jsp',scripts:true,nocache: true}//leaf tree's id value must be a string not integer,otherwise "this.id.indexOf is not a function" errors will be happened
});
//alert(node.ui.getAnchor());
}
tabPanel.setActiveTab(n);
}
}

//end loading div in page
setTimeout(
function() {
Ext.get('loading').remove();
Ext.get('loading-mask').fadeOut({remove:true});
}, 250
);

//这里放一些实例，仅供学习用,only for learning---------------------------------------
//1.messagebox
//Ext.MessageBox.show({
    //title:"标题",
    //msg:"内容的消息",
    //buttons:{"ok":"我不再显示OK了"},
    //fn:function(e){alert(e);},
    //animEl:"tree",
    //width:500,
    //icon:Ext.MessageBox.INFO,
    //closable:false,
    //progress:true,
    //wait:true,
    //progressText:"进度条"
    //wait:true,
    //waitConfig:{
    //interval:600,
    //duration:5000,
    //fn:function(){
      //Ext.MessageBox.hide();//让进度条消失或者用Ext.MessageBox.updateProgress(i,Math.round(100*i)+"% completed",i);
    //}},
   // prompt:true
   // multiline:true
   //});



   //2.带顶部，底部，脚部工具栏的panel
//var p=new Ext.Panel({
   //id:"panel1",
        //title:"标题",
        //collapsible:true,
        //renderTo:"container",
        //closable:true,
        //width:400,
        //height:300,
        //tbar:[{text:"按钮1"},{text:"按钮2"}], //顶部工具栏
        //bbar:[{text:"按钮1"},{text:"按钮2"}], //底部工具栏
        //html:"内容",
        //buttons:[{text:"按钮1"},{text:"按钮2"}] //footer部工具栏
   //});
// 我们已经在各种工具栏上添加了按钮，但是却没有激发事件，下面我们来添加按钮事件代码：
//tbar:[{text:"按钮1",handler:function(){Ext.MessageBox.alert("我是按钮1","我是通过按钮1激发出来的弹出框！")}},{text:"按钮2"}],

//3.嵌套了tabpanel的window
//var w=new Ext.Window({
           //contentEl:"win",
           //width:300,
           //height:200,
           //items:new Ext.TabPanel({
                      //activeTab:0,//当前标签为第1个tab（从0开始索引）
                     // border:false,
                     // items:[{title:"tab1",html:"tab1在windows窗口中"},{title:"tab2",html:"tab2在windows窗口中"}]//TabPanel中的标签页，以后再深入讨论
                // }),
          // plain:true,//true则主体背景透明，false则主体有小差别的背景色，默认为false
          // title:"标题"
       // });
       // w.show();
});

分享到：

struts2 lebel标签失效问题 | 　人生的辉煌来自正确的选择，当你选择了认 ...

2009-07-23 20:45
浏览 2144
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

ext webwork+hibernate+spring crud ssh2 viewport布局文

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

ext webwork+hibernate+spring crud ssh2 viewport布局文

评论

发表评论

相关推荐

ExtJs表格控件Grid

ExtJs树TreePanel

ExtJs表单FormPanel

ExtJs标签TabPanel

extjs 创建简单Meun,实现在TreePanel上面右键.

EXT VTYPE

ext的vtype自动验证

extjs各种组件

用jQuery和ajax（两例）获得远方服务器数据

Ext源码分析之模板模式解说——Ext组件渲染render的全过程详述

最近访客更多访客>>