extjs布局

以下引用自http://blog.csdn.net/nikyxxx/archive/2010/01/27/5261994.aspx感谢原作者

 

/*
 * Ext JS Library 2.2
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * [e-mail]
 *
 * 翻译:廖瀚卿 [e-mail]
 *
 * 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){//处理详细资料的显示元素,当这个

  


  
    
    分享到：
      
      
    
  

  
    
      关于struts2中应用拦截器与filter对权限进 ...
      |
      关于字符串转对象的方法
    
  
  
    
      2011-03-30 11:59
      浏览 1427
      评论(0)
      
      
      分类:Web前端      
      查看更多