快捷搜索:  as  2018  FtCWSyGV  С˵  test  xxx  Ψһ  w3viyKQx

澳门威尼人斯app平台:官方布局实例主页面的js源代码 学习(简单翻译)



近来在进修EXTJS的结构,进修是费力的也是有乐趣的.为了想彻底进修掌握好E澳门威尼人斯app平台XTJS的结构功能,拿来官方示例的元代码解读,并且用自己并不完全精确翻译了代码注释部分.好处有两个,一个是完全理解了代码的意思.还有一个好处便是前进了自己对英文注释的理解能力.

/*

* 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 wi澳门威尼人斯app平台th

// 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, ce澳门威尼人斯app平台nterLayout,

// 来自于 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, //自动适应滚动条

h澳门威尼人斯app平台tml: '

When you select a layout from the tree, additional details will display here.

'//默认文本内容

};

// 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元素中

heigh澳门威尼人斯app平台t: 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() //衬着到文档主体

});

});

您可能还会对下面的文章感兴趣: