最近在学习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实例源代码 2个目标文件 摘要:Java源码,文件操作,TCP,服务器 Tcp服务端与客户端的JAVA实例源代码,一个简单的Java TCP服务器端程序,别外还有一个客户端的程序,两者互相配合可以开发出超多...
Node.js 是一个开放源代码、跨平台的JavaScript运行环境,用于在服务器端执行JavaScript代码。在本项目中,Node.js 可能被用来搭建后端服务,或者作为构建工具,例如通过npm(Node.js的包管理器)来安装和管理项目...
【描述】中的"供大家参考学习"意味着这个源代码不仅是一个可以运行的实例,而且是一个教学资源,可以帮助初学者或有经验的开发者了解微信小程序与Vue.js结合的开发流程,掌握商城类应用的关键技术和实现细节。...
本项目是一个AppCan的学习实例,提供了源代码供学习者研究和实践。 在解压后的文件中,我们看到"exercise0110"这一文件夹,这很可能是项目中的一个练习或示例,用于教授特定的AppCan开发技巧或功能。通常,这样的...
该压缩包文件“46绿色旅行社旅游景点交互动态全套网站源代码.zip”包含了一整套用于构建一个旅游景点互动式网站的源代码。这个网站模板特别针对绿色旅行社设计,旨在提供一个美观、用户友好且充满动态效果的在线平台...
ASP(Active Server ...总之,这个"ASP网站实例开发源码——律师事务所网站系统源代码.zip"是一个宝贵的教育资源,适合初学者和有经验的开发者进行学习和实践,提升ASP编程技能,并理解法律服务行业网站的开发模式。
在IT行业中,JavaScript是一种广泛使用的前端编程语言...总之,这个JavaScript圆形大转盘抽奖源代码提供了一个实现互动抽奖功能的实例,开发者可以通过学习和修改这个项目,为自己的网站或应用增加趣味性和用户参与度。
- 除了主JSP页面,系统可能包含多个辅助页面,如头部、底部、错误提示等,这些页面通常通过`<jsp:include>`标签被引入到主页面中。 总结,这个“小邓留言板V1.2”是一个集成了用户交互、数据存储、页面渲染和广告...
总结,这个"Ajax + PHP 简单图片相册源代码"是一个很好的学习实例,它展示了如何利用现代Web技术创建一个动态、响应式的图片浏览应用。通过对源代码的深入理解,我们可以掌握Ajax与PHP的集成、前端与后端交互、数据...
这个源代码可以作为一个学习实例,帮助初学者理解网页开发的基本流程,包括前端和后端技术的结合,以及如何创建动态、有吸引力的节日主题网页。同时,对于经验丰富的开发者来说,它可以作为一个快速构建端午节祝福...
【标题】基于Cesium开发的数据点位管控展示系统源代码解析 Cesium是一个开源的JavaScript库,用于在Web上创建3D地球和地理空间应用程序。它利用 WebGL 技术实现高性能的三维地球渲染,提供了丰富的地图操作和地理...
压缩包中的文件"MainPage.html"可能是实现这个通用主页面的源代码,而"_notes"可能包含了开发过程中的笔记、思路或待办事项。通过分析这两个文件,可以深入了解具体的设计决策和技术实现。对于初学者,这是一个很好...
【标题】"源代码:网站制作步步高字典.rar" 提供的是一个关于网站制作的源代码资源,可能是一个教学项目或实例教程,旨在帮助学习者逐步了解和掌握网站开发的过程和技术。 【描述】"源代码:网站制作步步高字典" ...
【标签】"蓝色风格电气产品有限公司网站源代" 表明了这是一个关于定制化企业网站源代码的实例,涉及的技能和知识涵盖了前端开发的多个方面。 【压缩包子文件的文件名称列表】中的 "说明.txt" 可能包含了项目简介、...
【标题】"b2c前台代码 有图有真相有源代码" 揭示了这是一个关于B2C电子商务平台前端开发的资源包,其中包含了实际的图像、设计原型以及源代码,供学习者或开发者参考。B2C,即Business-to-Consumer,是企业与消费者...
Tcp服务端与客户端的JAVA实例源代码,一个简单的Java TCP服务器端程序,别外还有一个客户端的程序,两者互相配合可以开发出超多的网络程序,这是最基础的部分。 递归遍历矩阵 1个目标文件,简单! 多人聊天室 3...
这个压缩包包含该网站的完整源代码以及相关的学术论文,为学习者或开发者提供了深入理解如何运用ASP技术来设计和实现一个环保科技主题网站的实例。 【描述】:“ASP中国节能环保科技网站(源代码+论文).zip”的描述...
在结构上,源代码可能包含以下几个部分:主HTML文件,用于设置页面结构和引入CSS及JavaScript文件;CSS文件,用于定义游戏界面的样式和布局;JavaScript文件,包含游戏的核心逻辑,如游戏状态管理、对象实例化、物理...
2. 首页(index.asp):展示网站的主页面,可能包含导航栏、最新作品、热门推荐等内容,使用HTML、CSS和JavaScript进行页面布局和交互,而ASP代码则负责动态生成内容。 3. 文学作品展示页:显示单个作品的详细信息...
该资源是一个名为“120红黑家居设计装修交互动态全套网站源代码”的压缩包,其中包含了构建一个以红色和黑色为主色调的家居设计与装修主题网站的完整源代码。这个网站模板专为交互式体验设计,适用于展示家居设计...