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
</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();
});
<%@ 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
</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();
});