`
z95001188
  • 浏览: 41591 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

答复: Show一下偶用Ext2做的示例.

阅读更多
没有贴出代码确实有些不太厚道,只是感觉做出这些页面,我也是完全是按照ext里面提供的examples来做的,拿出来怕大伙笑话, 所以就没有贴出来了,没想被大伙误解,哎,做人难啊,做好人更难,现在把里面的关键代码贴出来了,需要的兄弟可以看一下了,小弟献丑了,看完千万别笑哦~

1.关于首页及树的生成JS代码

/
**
*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.fly的区别 在Ext JS框架中,`Ext.get`和`Ext.fly`是两个非常重要的方法,它们主要用于操作DOM元素。理解这两个方法之间的区别以及如何使用它们对于开发高质量、高效率的应用程序至关重要。 #### ...

    Ext_MessageBox

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

    Ext JS Notification 插件

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

    EXT dojochina Ext类实例方法.rar

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

    ext-base.js

    2. **类系统**:EXT使用面向对象的编程方式,"ext-base.js"中包含了类的创建、继承和实例化等机制,使得开发者可以方便地创建自定义组件。 3. **事件系统**:EXT的事件模型是其交互性的重要组成部分,"ext-base.js...

    Ext.ux.UploadDialog

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

    extjs帮助文档pdf版

    Ext 类 (P.2) - **概述**:`Ext` 是 ExtJS 的核心命名空间,包含了全局的方法和属性。 - **用途**:提供了一个统一的入口来访问 ExtJS 库的功能,如创建组件、管理事件等。 - **常用方法**: - `Ext.create()`: ...

    基于extjs的.NET3.5控件Coolite 1.0.0.34580(Preview预览版)

    2. Renamed Coolite.Examples project to Ext.Net.Examples 3. Renamed Coolite.Ext.UX project to Ext.Net.UX 4. Renamed Coolite.EmbeddedResourceBuilder project to Ext.Net.ERB 5. Renamed Coolite....

    ext 教材 ext js 教程

    2. `Ext.MessageBox.confirm()` `confirm()` 方法与 `alert()` 类似,但增加了一个确认选择。它同样有三个参数,除了回调函数中的参数 `e`,代表用户点击的按钮值('yes' 或 'no')。例如: ```javascript Ext....

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

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

    Ext 添加功能form表单实例

    根据给定的信息,本文将详细解释“Ext 添加功能form表单实例”的知识点,这主要针对Ext初学者。本文会从创建表单、字段定义、验证规则以及提交逻辑等方面进行深入探讨。 ### Ext 添加功能form表单实例 #### 表单...

    Windows读写Ext2/Ext3/Ext4文件系统

    可以读写Ext2,以Ext2方式挂载Ext3文件系统(不支持Ext3日志),不支持中文! It provides Windows NT4.0/2000/XP/2003/Vista/2008 with full access to Linux Ext2 volumes (read access andwrite access). This ...

    ext表格布局小例子

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

    Direct Show 开发的一个示例.doc

    在这个示例中,我们看到的是一个简单的Direct Show程序,它将MP3文件解码为WAV格式。 首先,程序包含了必要的头文件,如`atlbase.h`和`dshow.h`,并链接了`strmiids.lib`库,这是Direct Show编程的基础。`CComInit`...

    ExtJs的Ext.Ajax.request实现waitMsg等待提示效果

    在用户点击确认按钮之后,我们将创建一个Ext.LoadMask实例,并调用show方法来显示加载提示,然后执行Ext.Ajax.request方法发送Ajax请求。这个请求可以携带url和params参数,分别代表请求的地址和需要发送的数据。在...

    Ext--MessageBox教程

    在EXT JS框架中,`MessageBox`是一个非常实用的组件,用于弹出对话框与用户进行交互。本教程将深入探讨`MessageBox`的使用方法及其在实际开发中的应用。EXT JS是一个强大的JavaScript库,专为构建富客户端Web应用...

    Ext的弹出对话框1111

    在这个场景中,"Ext的弹出对话框1111"指的是如何在Ext环境中设置和使用对话框功能。 首先,环境搭建是使用Ext的第一步。你需要下载ExtJS库,这通常包含了一个压缩包,其中包含了必要的JavaScript文件和CSS样式表。...

    ExtJS Ext.MessageBox.alert&#40;&#41;弹出对话框详解

    效果图: 代码如下: Ext.onReady(function() { //定义 JSON(配置对象) var config = { title:’提示’, msg: ‘JSON配置方式,简单吧’ } Ext.Msg.show(config); }); 效果图: 上边我只是简单举例,好了看到了漂亮...

Global site tag (gtag.js) - Google Analytics