`

Show一下用Ext2做的示例.

阅读更多
1.关于首页及树的生成JS代码

/Java代码 
**   
*Common Java Scripts   
*/   
Ext.BLANK_IMAGE_URL = 'scripts/ext/resources/images/vista/s.gif';   
var Home={   
  init : function(){   
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());   
       var viewport = new Ext.Viewport({   
            layout:'border',   
            items:[new Ext.BoxComponent({ // raw   
                    region:'north',   
                    el: 'north',   
                    height:32  
                }),{   
                region:'west',   
                id:'west-panel',   
                title:'West',   
                split:true,   
                width: 200,   
                minSize: 175,   
                maxSize: 400,   
                collapsible: true,   
                margins:'35 0 5 5',   
                cmargins:'35 5 5 5',   
                layout:'accordion',   
                layoutConfig:{   
                    animate:true  
                },   
                items: [   
               {   
                    title:'Home Navigation',   
                    autoScroll:true,   
                    border:false,   
                    iconCls:'nav',   
                    html:'<div id="tree-viewer" style="overflow:auto;height:400px;border:0px solid #c3daf9;"></div>'  
                   }   
                ,{   
                    title:'Settings',   
                    html: '<p>Set The System Property</p>',   
                    border:false,   
                    autoScroll:true,   
                    iconCls:'settings'  
                }]   
            },{   
                region:'center',   
                margins:'35 5 5 0',   
                layout:'fit',   
                autoScroll:false,   
                    items:[{   
                    baseCls:'x-plain',   
                    layout:'fit',   
//                    columnWidth:1,   
                    bodyStyle:'padding:5px 5px 5px 5px',   
                    items:[{   
                        autoScroll:false,   
//                        title: 'Content',   
                        html: '<iframe id="content-iframe" frameborder="no" style="width:100%;height:94%"></iframe>'  
//                        <p><iframe id="content-iframe" frameborder="no" style="width:100%;height:100%"></iframe></p>   
                    }]   
                }]   
               
            }]   
        });   
  /**    
   *----------------------------------------------------------  
   *Start Tree Define  
   *Define tree Struct  
   *Tree Define By Song Hai Peng  
   *----------------------------------------------------------  
   */        
    var tree;   
    var root;   
    if(!tree){   
    var Tree = Ext.tree;   
    tree = new Tree.TreePanel(   
    {   
        el:'tree-viewer',   
        autoScroll:true,   
        animate:true,   
        enableDD:true,   
        containerScroll: true,    
        loader: new Tree.TreeLoader({   
            dataUrl:'/faceye/treeAction.do?method=tree'  
        })   
    }   
    );     
    //Defint node click event,when node is clicked,send data to inner 'div' and show data in   
    // set the root node   
    root = new Tree.AsyncTreeNode({   
        text: 'Common Platform',   
        draggable:false,   
        id:'source'  
    });   
    tree.setRootNode(root);   
    /**  
    *Open node URL in a target contanier  
    */  
     tree.on('click', function (node){    
      if(node.isLeaf()){    
         Ext.get('content-iframe').dom.src = node.attributes.link+'&node='+node.id;   
         //define grid;   
         return true;   
     }else{   
      /**  
       *open node by single click,not double click.  
       */  
        node.toggle();   
     }   
    });    
    // render the tree   
    }   
    tree.render();   
    root.expand();    
  }   
};  

**
*Common Java Scripts
*/
Ext.BLANK_IMAGE_URL = 'scripts/ext/resources/images/vista/s.gif';
var Home={
  init : function(){
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
       var viewport = new Ext.Viewport({
            layout:'border',
            items:[new Ext.BoxComponent({ // raw
                    region:'north',
                    el: 'north',
                    height:32
                }),{
                region:'west',
                id:'west-panel',
                title:'West',
                split:true,
                width: 200,
                minSize: 175,
                maxSize: 400,
                collapsible: true,
                margins:'35 0 5 5',
                cmargins:'35 5 5 5',
                layout:'accordion',
                layoutConfig:{
                    animate:true
                },
                items: [
               {
                    title:'Home Navigation',
                    autoScroll:true,
                    border:false,
                    iconCls:'nav',
                    html:'<div id="tree-viewer" style="overflow:auto;height:400px;border:0px solid #c3daf9;"></div>'
                   }
                ,{
                    title:'Settings',
                    html: '<p>Set The System Property</p>',
                    border:false,
                    autoScroll:true,
                    iconCls:'settings'
                }]
            },{
                region:'center',
                margins:'35 5 5 0',
                layout:'fit',
                autoScroll:false,
                    items:[{
                    baseCls:'x-plain',
                    layout:'fit',
//                    columnWidth:1,
                    bodyStyle:'padding:5px 5px 5px 5px',
                    items:[{
                    	autoScroll:false,
//                        title: 'Content',
                        html: '<iframe id="content-iframe" frameborder="no" style="width:100%;height:94%"></iframe>'
//                        <p><iframe id="content-iframe" frameborder="no" style="width:100%;height:100%"></iframe></p>
                    }]
                }]
            
            }]
        });
  /**  
   *----------------------------------------------------------
   *Start Tree Define
   *Define tree Struct
   *Tree Define By Song Hai Peng
   *----------------------------------------------------------
   */     
    var tree;
    var root;
    if(!tree){
    var Tree = Ext.tree;
    tree = new Tree.TreePanel(
    {
        el:'tree-viewer',
        autoScroll:true,
        animate:true,
        enableDD:true,
        containerScroll: true, 
        loader: new Tree.TreeLoader({
            dataUrl:'/faceye/treeAction.do?method=tree'
        })
    }
    );  
    //Defint node click event,when node is clicked,send data to inner 'div' and show data in
    // set the root node
    root = new Tree.AsyncTreeNode({
        text: 'Common Platform',
        draggable:false,
        id:'source'
    });
    tree.setRootNode(root);
    /**
    *Open node URL in a target contanier
    */
     tree.on('click', function (node){ 
      if(node.isLeaf()){ 
         Ext.get('content-iframe').dom.src = node.attributes.link+'&node='+node.id;
         //define grid;
         return true;
     }else{
      /**
       *open node by single click,not double click.
       */
        node.toggle();
     }
    }); 
    // render the tree
    }
    tree.render();
    root.expand(); 
  }
};
分享到:
评论

相关推荐

    Ext.get与Ext.fly的区别

    - **资源消耗**:如果频繁使用`Ext.get`来获取相同的元素,则每次调用都会重新创建`Ext.Element`对象,这可能不是最优的做法。 #### 2. Ext.fly **定义**:`Ext.fly`是一种“飞量”模式,用于临时操作DOM元素。它...

    EXT dojochina Ext类实例方法.rar

    EXT dojochina Ext类实例方法.rar 是一个与EXT JS框架相关的压缩文件,EXT JS是一个广泛使用的JavaScript库,用于构建富互联网应用程序(RIA)。这个压缩包可能包含了关于EXT JS中的Ext类的一些实例方法的详细教程或...

    Ext_MessageBox

    根据给定的信息,我们可以深入探讨ExtJS中`Ext.MessageBox`组件的使用方法及特性。`Ext.MessageBox`是ExtJS框架中用于显示模态对话框的一个非常实用的功能组件,它可以用来展示提示信息、请求用户输入、确认操作等。...

    Ext JS Notification 插件

    本文将深入探讨Ext JS Notification插件的使用方法、功能特性以及如何集成到项目中。 首先,Notification插件提供了一种非侵入性的方法来向用户传达关键信息,如操作成功、警告或错误提示。这些通知可以是临时的,...

    Ext.ux.UploadDialog

    以下是一个简单的使用示例: ```javascript Ext.onReady(function() { var uploadDialog = new Ext.ux.UploadDialog({ title: '文件上传', url: '/server/upload.php', // 服务器端处理文件的URL width: 400, ...

    一个简单的Ext.Window中插入图片的例子

    2. **创建Ext.Window**:然后,我们需要创建`Ext.Window`实例,将图片对象作为其`items`数组的一部分: ```javascript var myWindow = Ext.create('Ext.window.Window', { title: '图片示例', width: 400, ...

    Ext 添加功能form表单实例

    Ext.MessageBox.show({ title: "系统提示", msg: "只能选择一个角色", buttons: {"ok":"确定"}, icon: Ext.MessageBox.INFO, width: 220 }); return; } userForm.getForm().submit({ waitMsg: "正在...

    ext表格布局小例子

    - **添加数据**:虽然示例代码中未体现,但可以通过类似方式实现。例如,定义一个按钮或事件监听器,在用户触发相应动作时调用 `store.add(newData)` 方法来向 Store 中添加新数据。 #### 六、总结 本例详细展示了...

    ext2.0show程序展示

    EXT2.0Show程序是一个专门用于展示Linux操作系统中EXT2文件系统内容的工具。EXT2是Linux早期广泛使用的文件系统之一,它为用户提供了一个高效、可靠的数据存储解决方案。EXT2.0Show程序的设计目的是帮助用户理解和...

    extjs弹出框 n秒后消失

    总的来说,EXTJS弹出框的自动消失功能可以通过结合`Ext.MessageBox.show`、`Ext.util.DelayedTask`和适当的事件监听来实现。这种机制允许开发者灵活地控制用户界面的交互,提供更友好的用户体验。

    3------通过实例学习------Ext.js------.pdf

    在提供的代码示例中,展示了如何使用`Ext.Msg.show`创建一个对话框,并通过`Ext.get`获取DOM元素进行操作。`Ext.Msg.show`用于显示消息框,其中`buttons: Ext.Msg.OKCANCEL`定义了对话框的按钮,`multiline: true`...

    用ext来登录的程序代码

    本文将通过一份示例代码,详细介绍如何使用Ext框架构建一个基本的登录界面,并解释代码中的关键部分,帮助读者更好地理解和掌握Ext框架。 #### 二、代码解析与功能介绍 ##### 2.1 HTML结构与CSS样式 首先,我们来...

    Ext 中的Tree实现不同节点不同的右键菜单

    `Ext JS`是一个广泛使用的JavaScript库,它提供了丰富的组件和工具,帮助开发者构建功能强大的企业级应用。本篇将深入探讨如何在`Ext JS`中实现Tree组件的不同节点拥有不同的右键菜单,这对于提供定制化的用户体验是...

    extTree例子点击出现等

    2. **Store**: `TreePanel`与`Ext.data.TreeStore`配合使用来加载和管理数据。`TreeStore`继承自`Ext.data.Store`,并增加了处理层级数据的特性。 3. **Rendering**: 可以通过`viewConfig`配置项来定制节点的渲染,...

    Ext教程_javakc

    2. **引入核心库**:通过 `&lt;script&gt;` 标签引入 `extjs/adapter/ext/ext-base.js` 和 `extjs/ext-all.js`。 3. **编写 JavaScript 代码**:使用 Ext 提供的方法编写业务逻辑。 例如,以下代码展示了如何在页面加载...

    ext入门学习文档

    - **命名空间**:使用`Ext.namespace`定义命名空间,例如`Ext.namespace("Ext.cc")`。 - **对象创建**:可以通过传统的JavaScript语法创建对象,然后利用`Ext.apply`方法添加额外的属性和方法。 ```javascript Ext...

    3------通过实例学习------Ext.js------.docx

    当我们需要在页面中使用Ext.js时,例如创建弹窗提示,会用到`Ext.Msg.show`方法。下面的代码展示了如何创建一个带有输入框的提示框,并在用户点击OK后将输入的内容显示到指定的`div`中: ```html &lt;!DOCTYPE html&gt; ...

    精通JS脚本之ExtJS框架.part1.rar

    16.7.2 商品信息的添加 16.7.3 商品信息的删除 16.7.4 商品信息的更新 第17章 ExtJS案例:企业任务管理系统 17.1 系统概述 17.2 需求分析 17.3 数据库设计 17.4 员工任务管理 17.4.1 个人任务处理 17.4.2 ...

Global site tag (gtag.js) - Google Analytics