EXT怎么全屏

2012-03-23

EXT如何全屏 - Web 开发 / Ajaxindex.htmlhtml xmlnshttp://www.w3.org/1999/xhtmlheadmeta http-

EXT如何全屏 - Web 开发 / Ajax
index.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>9iExt.cn--Ext经典布局、框架(一)</title>
<link href="css/Extmain.css" rel="stylesheet" type="text/css">

<script language="javascript" type="text/javascript" src="js/prototype.js"></script>
</head>
<body>

<div id="loadingTab">
<div class="loading-indicator">
<img src="images/public/loader.gif" width="32" height="32" style="margin-right:8px;float:left;vertical-align:top;"/>
<a href="index.html">Ext经典布局、框架(一)</a> -
<span id="loading-9iext"><a href="http://www.9iExt.cn" target="_blank">9iExt.cn</a></span><br />
<span id="loading-msg">加载样式表和图片...</span>
</div>
</div>
<div id="north" style="visibility:hidden;"><span class="api-title"><a href="http://www.9iExt.cn/" target="_blank">9iExt.cn--Ext经典布局、框架(一)</a></span></div>
<div id="south">
<div class="power" id="power" style="visibility:hidden;">
Power By: <a href="http://extjs.com/" target="_blank">ExtJs 2.2.1</a> 
</div>
<div class="bq" id="banquan" style="visibility:hidden;">
版权所有：<a href="http://www.9iExt.cn/" target="_blank">9iExt.cn</a>
</div>
</div>

<link href="js/ext-2.2/resources/css/ext-all.css" rel="stylesheet" type="text/css">
<link href="js/ext-2.2/resources/css/portal.css" rel="stylesheet" type="text/css">
<script type="text/javascript">$('loading-msg').innerHTML = '正在加载UI组建...';</script>

<script language="javascript" type="text/javascript" src="js/ext-2.2/adapter/ext/ext-base.js"></script>
<script language="javascript" type="text/javascript" src="js/ext-2.2/ext-all.js"></script>
<script language="javascript" type="text/javascript" src="js/ext-2.2/source/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">$('loading-msg').innerHTML = '正在初始化...';</script>

<script type="text/javascript" src="js/localXHR.js"></script>
<script language="javascript" type="text/javascript" src="js/extMain.js"></script>
<script type="text/javascript">
$('loading-msg').innerHTML = '初始化完毕！！';
Ext.get('loadingTab').fadeOut({remove: true});//让加载标签消失
$('north').style.visibility="visible";
$('power').style.visibility="visible";
$('banquan').style.visibility="visible"
</script>
</body>
</html>

extMain.js

// ext实例展示的js文件
Ext.BLANK_IMAGE_URL = 'images/public/s.gif"';
Ext.QuickTips.init();// 加载快速提示框
Ext.namespace('ExtExample');// 创建名字域
// 应用程序主页面
ExtExample.app = function() {
// 空函数
};
Ext.extend(ExtExample.app, Ext.util.Observable, {
// 顶端
header : new Ext.BoxComponent({
region : 'north',

el : 'north',
height : 30,
margins : '5'
}),
// 低端
footer : new Ext.BoxComponent({
region : 'south',
el : 'south',
height : 25
}),
// 实例菜单树形
menuTree : new Ext.tree.TreePanel({
title : '实例菜单',
region : 'west',
id : 'extExample-tree',
autoScroll : true,
enableDD : false,// 是否支持拖拽效果
containerScroll : true,// 是否支持滚动条
split : true,
width : 180,
minSize : 175,
maxSize : 300,
rootVisible : true,// 是否显示跟节点
// collapseMode:'mini',//在分割线处出现按钮
collapsible : true,
margins : '0 0 5 5',
loader : new Ext.tree.TreeLoader({
dataUrl : 'extmenutree.json'
}),
tools : [{
id : 'refresh',
handler : function() {
var tree = Ext.getCmp('extExample-tree');
tree.root.reload();
}
}]
}),
// 菜单根节点
menuRoot : new Ext.tree.AsyncTreeNode({
text : 'ExtJs2.0 实例展示',
draggable : false,
id : 'source'
}),
// 主要显示区
main : new Ext.TabPanel({
region : 'center',
enableTabScroll : true,
activeTab : 0,
margins : '0 5 5 0',
items : [new Ext.Panel({
id : "workPing",
title : "首页",
border : false,
autoLoad : 'info.html'
})]
}),
// 初始化构造函数
init : function() {
this.menuTree.setRootNode(this.menuRoot);
this.menuRoot.expand();
// 给树形菜单添加事件
this.menuTree.on('click', this.menuClickAction, this);
// 给main的tab页面添加tabchange事件
this.main.on('tabchange', this.changeTab, this);
var myView = new Ext.Viewport({
layout : 'border',
border : false,
items : [this.header, this.main, this.footer, this.menuTree]
});
// 新建一个mask
this.loadMask = new Ext.LoadMask(this.main.body, {
msg : "页面加载中……"
});
},
// 属性菜单的点击事件
menuClickAction : function(node) {
if (!node.isLeaf()) {
return false;
}
// alert(node);
var tabId = 'tab-' + node.id;
var tabTitle = node.text;
var tablink = node.attributes.link;
var tabJsArray = node.attributes.jsArray;// 得到js文件存放的路径
var tab = this.main.getComponent(tabId);// 得到tab组建
if (!tab) {
tab = this.main.add(new Ext.Panel({
id : tabId,
title : tabTitle,
autoScroll : true,
layout : 'fit',
border : false,
closable : true
}));
this.main.setActiveTab(tab);
var loadmask = this.loadMask;
var model;// 加载模块js预置变量名
loadmask.show();
// panel组建开始异步加载url的html
tab.load({
url : tablink,// 加载的url
// 加载html成功后的回调函数
callback : function(a, b, c) {
var jsStr = "";// 创建一个空字符串，用来装载接受的js文件内容
var num = tabJsArray.length;
for (var i = 0; i < num; i++) {
// 由于异步加载的html不能以<script
// src=xxx.js>的方式加载javascript所以在此再调用一个ajax异步加载模块的js文件
var tabjs = tabJsArray.js;// 取得数组中的js文件
var currentIndex = i;// 获取当前js文件的索引
Ext.Ajax.request({
method : 'POST',// 为了不丢失js文件内容，所以要选择post的方式加载js文件
url : tabJsArray.js,

scope : this,
success : function(response) {
jsStr += response.responseText;// 把每次加载的内容都存入jsStr中
if (currentIndex == num - 1) {// 如果当前索引号为最后一个时开始创建应用的实例
// 获取模块类
this[node.id] = eval(jsStr);
// 实例化模块类
model = new this[node.id]();
loadmask.hide();
}
// 之所以要重写tabpanel的destroy函数，是因为在要执行每个实例类的自定义的destroy函数。
// 原因在于，用IE在有些情况下不能完全释放实例。
// 比如“树的高级应用（一）”实例中的window对象，如果该对象不执行destroy函数时再此打开时会报错。
tab.on('destroy', function() {
model.destroy();
});
},
failure : function(response) {
Ext.Msg.show({
title : "错误信息",
msg : "加载页面核心文件时发生错误！",
buttons : Ext.MessageBox.OK,
icon : Ext.MessageBox.ERROR
});
loadmask.hide();
}
});
}
if (b == false) {
Ext.Msg.show({
title : "错误信息",
msg : "加载页面超时或是页面连接不正确！",
buttons : Ext.MessageBox.OK,
icon : Ext.MessageBox.ERROR
});
loadmask.hide();
}
},
discardUrl : false,
nocache : true,
text : "",
timeout : 3000,// 超时时间30ms
scripts : true
});
} else {
this.main.setActiveTab(tab);
}
},
// change的实现
changeTab : function(tab, newtab) {
// 如果存在相应树节点，就选中,否则就清空选择状态
var nodeId = newtab.id.replace('tab-', '');
var node = this.menuTree.getNodeById(nodeId);
if (node) {
this.menuTree.getSelectionModel().select(node);
} else {
this.menuTree.getSelectionModel().clearSelections();
}
}
});
Ext.onReady(function() {
var extExample = new ExtExample.app();
extExample.init();
});

问题：如果让index.html一打开就全屏显示？

[解决办法]
这应该不是Ext的问题你把浏览器设为全屏不就好了
[解决办法]
按F11

热点排行