最近在学习EXTJS的布局,学习是辛苦的也是有乐趣的.为了想彻底学习掌握好EXTJS的布局功能,拿来官方示例的元代码解读,并且用自己并不完全正确翻译了代码注释部分.好处有两个,一个是完全理解了代码的意思.还有一个好处就是提高了自己对英文注释的理解能力.
/*
* Ext JS Library 2.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* 翻译:廖瀚卿 yourgame@163.com
*
* http://extjs.com/license
*/
//
// This is the main layout definition.
// 这里是一个主要布局的定义.
//
Ext.onReady(function(){
Ext.QuickTips.init(); //初始提示tip
// This is an inner body element within the Details panel created to provide a "slide in" effect
// on the panel body without affecting the body's box itself. This element is created on
// initial use and cached in this var for subsequent access.
// 这是一个位于详细资料面板的内部的主体元素 提供从面板外部滑入面板内部的效果,这个元素当初始化时被创建同时存储这个变量中用于缓存后来的
var detailEl;
// This is the main content center region that will contain each example layout panel.
// 这个一个主要包含每个示例布局的中间区域的面板
// It will be implemented as a CardLayout since it will contain multiple panels with
// only one being visible at any given time.
// 它应用于卡片布局后将包含多个面板,任何时候只有一个面板可以呈现.
var contentPanel = {
id: 'content-panel',
region: 'center', // this is what makes this panel into a region within the containing layout
layout: 'card',
margins: '2 5 5 0',
activeItem: 0,
border: false,
items: [
// 来自于 basic.js:
start, absolute, accordion, anchor, border, cardTabs, cardWizard, column, fit, form, table,
// 来自于 custom.js:
rowLayout, centerLayout,
// 来自于 combination.js: [combination:为组合的意思]
absoluteForm, tabsNestedLayouts
]
};
// Go ahead and create the TreePanel now so that we can use it below
// 先创建一个书面板,以备我们接下来使用
var treePanel = new Ext.tree.TreePanel({
id: 'tree-panel',
title: 'Sample Layouts',
region:'north', //北边
split: true, //可以调节大小
height: 300, //默认高度为300px
minSize: 150, //最小高度为150px
autoScroll: true,//允许滚动条
// tree-specific configs:
// 树控件的特有的配置选项
rootVisible: false,//隐藏根结点
lines: false,
singleExpand: true,//同时只能打开一个树,当打开其中任何一个树时,将会关闭其他已经打开的树目录
useArrows: true,//树形目录使用visit中树目录显示效果(三角形代替+号)
loader: new Ext.tree.TreeLoader({
dataUrl:'tree-data.json'//树目录数据加载为本地json数据文件
}),
root: new Ext.tree.AsyncTreeNode()
});
// Assign the changeLayout function to be called on tree node click.
// 指定一个当树节点被单击后更改布局的函数.
treePanel.on('click', function(n){ //n为节点对象
var sn = this.selModel.selNode || {}; // selNode is null on initial selection 如果树的选择模型为空则初始化它
if(n.leaf && n.id != sn.id){ // ignore clicks on folders and currently selected node
// 忽略文件夹的单击以及当前已经选择节点的多次单击操作
Ext.getCmp('content-panel').layout.setActiveItem(n.id + '-panel');
//获得内容面板.设置当前获得的面板项为(json数据中的id名字(如:"id:'absolute'")加上 '-panel' 组成 'absolute-panel'
//这样来使面板处于活动状态(即显示)
if(!detailEl){//处理详细资料的显示元素,当这个变量不存在时则初始化它
var bd = Ext.getCmp('details-panel').body; //获得详细面板元素的主体
bd.update('').setStyle('background','#fff');//更新元素innerHTML的内容(这里先设置为空''),然后设置样式
detailEl = bd.createChild(); //create default empty div 在元素当中创建一个空的div
}
detailEl.hide().update(Ext.getDom(n.id+'-details').innerHTML).slideIn('l', {stopFx:true,duration:.2});
//隐藏这个元素().更新元素innerHTML内容为(获得指定详细资料的.innerHTML文本).滑入效果(从左边滑入'left'默认是'top',{是否停止,持续时间2秒})
}
});
// This is the Details panel that contains the description for each example layout.
// 这是一个包含所有布局示例说明的详细资料面板
var detailsPanel = {
id: 'details-panel', //面板的id
title: 'Details', //面板标题
region: 'center', //面板为中心布局
bodyStyle: 'padding-bottom:15px;background:#eee;', //样式为与父容器下边界为15个像素的距离
autoScroll: true, //自动适应滚动条
html: '<p class="details-info">When you select a layout from the tree, additional details will display here.</p>'//默认文本内容
};
// Finally, build the main layout once all the pieces are ready. This is also a good
// example of putting together a full-screen BorderLayout within a Viewport.
// 最后,当其他已经准备好后,则可以构建主要布局,这也是border布局应用于Viewport中实现全屏显示的一个好示例
new Ext.Viewport({
layout: 'border',
title: 'Ext Layout Browser',
items: [{
xtype: 'box', //BoxComponent
region: 'north',//上(北边)
applyTo: 'header',//应用到header的html元素中
height: 30 //高度为30像素
},{
layout: 'border',
id: 'layout-browser',
region:'west',//左(西边)
border: false,//没有边框
split:true, //可以调节大小
margins: '2 0 5 5', //panel中元素与panel的间隔 margin-top:2px,margin-right:0px,margin-buttom:5px,margin-left:5px
width: 275, //宽度为275像素
minSize: 100,//最小宽度100像素
maxSize: 500,//最大500px
items: [treePanel, detailsPanel] //面板中包括north(上)布局的书面版和center(中心)布局的详细资料面板
},
contentPanel //cneter(中心)布局的主体内容面板
],
renderTo: Ext.getBody() //渲染到文档主体
});
});
待续...
分享到:
相关推荐
Tcp服务端与客户端的JAVA实例源代码,一个简单的Java TCP服务器端程序,别外还有一个客户端的程序,两者互相配合可以开发出超多的网络程序,这是最基础的部分。 递归遍历矩阵 1个目标文件,简单! 多人聊天室 3...
Tcp服务端与客户端的JAVA实例源代码,一个简单的Java TCP服务器端程序,别外还有一个客户端的程序,两者互相配合可以开发出超多的网络程序,这是最基础的部分。 递归遍历矩阵 1个目标文件,简单! 多人聊天室 3...
Tcp服务端与客户端的JAVA实例源代码,一个简单的Java TCP服务器端程序,别外还有一个客户端的程序,两者互相配合可以开发出超多的网络程序,这是最基础的部分。 递归遍历矩阵 1个目标文件,简单! 多人聊天室 3...
Tcp服务端与客户端的JAVA实例源代码,一个简单的Java TCP服务器端程序,别外还有一个客户端的程序,两者互相配合可以开发出超多的网络程序,这是最基础的部分。 递归遍历矩阵 1个目标文件,简单! 多人聊天室 ...
14.5 系统主页面与动态菜单 421 14.6 用户管理模块 427 14.7 角色管理模块 439 14.8 产品管理模块 447 14.9 进仓管理模块 450 14.10 出仓管理模块 460 14.11 库存统计模块 474 14.12 用户修改密码窗口 479 14.13 ...
Tcp服务端与客户端的JAVA实例源代码,一个简单的Java TCP服务器端程序,别外还有一个客户端的程序,两者互相配合可以开发出超多的网络程序,这是最基础的部分。 递归遍历矩阵 1个目标文件,简单! 多人聊天室 ...
Tcp服务端与客户端的JAVA实例源代码,一个简单的Java TCP服务器端程序,别外还有一个客户端的程序,两者互相配合可以开发出超多的网络程序,这是最基础的部分。 递归遍历矩阵 1个目标文件,简单! 多人聊天室 ...
Tcp服务端与客户端的JAVA实例源代码 2个目标文件 摘要:Java源码,文件操作,TCP,服务器 Tcp服务端与客户端的JAVA实例源代码,一个简单的Java TCP服务器端程序,别外还有一个客户端的程序,两者互相配合可以开发出超多...
Tcp服务端与客户端的JAVA实例源代码 2个目标文件 摘要:Java源码,文件操作,TCP,服务器 Tcp服务端与客户端的JAVA实例源代码,一个简单的Java TCP服务器端程序,别外还有一个客户端的程序,两者互相配合可以开发出超多...
ASP.NET 2.0 正式版中无刷新页面的开发(示例代码的补充) ASP.NET2.0中themes、Skins轻松实现网站换肤! ASP.NET 2.0 中的代码隐藏和编译 ASP.NET 2.0 Language Swithcer and Theme Swicher 多语言转换和多样式主题...
Android 一种基于Linux的自由及开放源代码的操作系统,主要使用于移动设备,如智能手机和平板电脑,由Google公司和开放手机联盟领导开发 IOS 由苹果公司开发的移动操作系统 Webkit 一个开源的浏览器引擎,在手机上的...
2.4.1 代码隐藏文件如何与页面连接 2.4.2 控件标签如何与页面变量连接 2.4.3 事件如何与事件处理程序连接 2.5 Web项目 2.5.1 基于项目的开发 2.5.2 创建Web项目 2.5.3 迁移旧版Visual Studio创建的网站...
2.4.1 代码隐藏文件如何与页面连接 44 2.4.2 控件标签如何与页面变量连接 44 2.4.3 事件如何与事件处理程序连接 46 2.5 Web项目 47 2.5.1 基于项目的开发 47 2.5.2 创建Web项目 48 2.5.3 迁移旧版Visual...