/* * 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() //渲染到文档主体 }); });