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>

<title>Ext viewport 要在服务器下测试</title>

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 class="loading-indicator"><img src="img/extanim32.gif" width="32" height="32" style="margin-right:8px;" align="absmiddle"/>Loading...</div>

</div>

<li>

<a id="use" href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >Use Existing Tab</a>

</li>

<li>

<a id="create" href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >Create New Tab</a>

</li>

</ul>

Power By: erick

</div>

</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%" />'

//只是不需要再载入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();

});

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

继续阅读

Rabbitmq命令行手动创建队列

整合 Spring 开发框架及服务端技术

SSM整合02---Spring-SpringMVC层一、添加web框架支持二、web.xml三、spring-mvc.xml

SSM框架（二）------------表现层的SpringMVC

Intellij idea基于Maven 的SSM 框架整合

如何成为一名.net 工程师?

tabpanel 使用问题

Spring数据和Redis

SpringMVC的启动过程源码分析1 SpringMVC 配置XML的方式启动2 SpringMVC纯注解模式启动

Java Spring 框架

CSS之折叠菜单

Hibernate使用Hibernate的“3个准备，7个步骤”Hibernate API简介操作实体对象对象识别

DOM下元素 offset client scroll 相关属性简介

IE8 CSS设置DIV居中，添加“margin:0 auto”

SpringCloud微服务（四）之ribbon笔记ribbon是什么？入门案例自定义均衡负载算法

Could not determine type for: String