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

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" />
  <!-- GC -->
  <!-- LIBS -->
  <script type="text/javascript" src="../ext-2.2.1/adapter/ext/ext-base.js"></script>
  <!-- ENDLIBS -->
  <script type="text/javascript" src="../ext-2.2.1/ext-all.js"></script>

<!-- Common Styles for the examples -->
<!-- Custom CSS and Libs --> 
<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
&nbsp;
</div>
    <div style="float:right;margin:5px;font:normal 12px tahoma, arial, sans-serif,宋体;"> 版本号V1.0Beta&nbsp;</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();
});

你可能感兴趣的:(spring,Hibernate,jsp,ext,Webwork)