`
jobar
  • 浏览: 346904 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ExtJs4实现CheckBox Tree以及文件预览功能

 
阅读更多
需求: 服务器上有一个文件夹(根文件夹),其下面有可能是文件也有可能是文件夹且文件夹下面又有文件以及文件夹。
1 要求以树状结构展示这些文件,且可以选择不同文件夹下面的多个文件,所以叶子节点要加checkbox,且文件夹不加;
2 选择文件的时候要对文件内容进行预览。
下面是具体实现
1 Model定义:
Ext.define('Qui.model.TestAsset', {
    extend: 'Ext.data.Model',

    requires: [
        'Ext.data.Field'
    ],

    idProperty: 'path',

    fields: [
        {
            name: 'assetId'
        },
        {
            name: 'factoryId'
        },
        {
            name: 'name'
        },
        {
            name: 'path'
        },
        {
            name: 'listName'
        }
    ]
});


2 Store定义:
Ext.define('Qui.store.TestAsset', {
    extend: 'Ext.data.TreeStore',

    requires: [
        'Qui.model.TestAsset',
        'Ext.data.proxy.Ajax',
        'Ext.data.reader.Json'
    ],

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            model: 'Qui.model.TestAsset',
            storeId: 'testAsset',
            nodeParam: 'path',
            proxy: {
                type: 'ajax',
                url: 'getTestAssets.action',
                reader: {
                    type: 'json',
                    idProperty: 'path'
                }
            },
            listeners: {
                load: {
                    fn: me.onTreeStoreLoad,
                    scope: me
                }
            }
        }, cfg)]);
    },

    onTreeStoreLoad: function(treestore, node, records, successful, eOpts) {
        if(successful){
            var rootPath;
            if(records !== null){
                var childPath = records[0].get('path');
                if(!Ext.isEmpty(childPath) && childPath.lastIndexOf('/')>0){
                    rootPath = childPath.substr(0,childPath.lastIndexOf('/'));
                }
            }
            if(node.get('path') === 'root'){
                node.set('name', rootPath !== null ? rootPath : 'Root');
            }else{
			//这里是实现checkbox tree的关键,节点的cls属性是folder的时候,设置checked属性为false:即文件夹不能被选中,只能选中文件。
                Ext.Array.each(records,function(record){
                    if(record.get('cls') !== 'folder'){
                        record.set('checked', false);
                    }
                });
            }
        }
    }

});


3 后台AssetTreeNode VO model的结构(省略get/set):
   
private static final String FOLDER_CLASS = "folder";
    private String assetId;
    private List<AssetTreeNode> children;
    private String factoryName;
    private boolean leaf;
    private String name;
    private String path;
    private String cls;
	//静态方法,将file转换为TreeNode
	public static AssetTreeNode fromFile(final File file) {
        assert file != null && file.exists() : "File does not exist: " + file;
        final AssetTreeNode node = new AssetTreeNode();
        if (file.isFile()) {
            node.setLeaf(true);
        } else {
            node.setCls(FOLDER_CLASS);
        }
        final String name = file.getName();
        node.setName(name);
        node.setAssetId(name);
        node.setPath(file.getPath());
        return node;
    }


4 点击叶节点的时候privewpanel加载文件内容
   
onAssetTreePanelItemClick: function(dataview, record, item, index, e, eOpts) {
        var filepath = record.get('path');
        var previewPanel = dataview.up('window').down('#testAssetPreview');
        if(record.isLeaf()){//只有叶节点即文件才可预览
            Ext.Ajax.request({
                url:'reports/taskdetail/getFileContent.action',
                params: {filename: filepath},
                scope: this,
                success: function(response, opts){
                    var result = Ext.decode(response.responseText);
                    previewPanel.setValue(result.fileContent);
                },
                failure: function(response, opts){
                    this.application.showFailure();
                }
            });
        }
        return false;
    }	

5 效果图


  • 大小: 23.4 KB
分享到:
评论

相关推荐

    ExtJs4 Checkbox tree

    ExtJs4 Checkbox Tree是基于ExtJs 4框架实现的一种特殊树形组件,它在传统的树形结构基础上增加了复选框功能。这种组件常用于需要用户多选树形数据的场景,比如权限设置、目录选择等。下面将详细介绍ExtJs4 Checkbox...

    checkbox tree extjs2

    这个"checkbox tree extjs2"主题主要涉及如何在ExtJS 2版本中实现带有复选框功能的树形控件。 在ExtJS 2中,Checkbox Tree是基于TreePanel组件的扩展,它提供了一种可视化的方式,让用户可以多选树结构中的节点。这...

    ExtJS实现动态读写Checkboxgroup

    总结起来,动态读写ExtJS的CheckboxGroup涉及创建CheckboxGroup、读取选中值、设置选中值以及监听变化。通过结合`ext-basex.js`文件,你可以构建出更复杂的交互式表单和应用程序。记住,始终关注用户需求和体验,...

    checkbox tree extjs

    checkbox tree extjscheckbox tree extjscheckbox tree extjscheckbox tree extjscheckbox tree extjscheckbox tree extjscheckbox tree extjscheckbox tree extjs

    解决 extjs2.2 给tree-panel 添加 checkbox 的add-on

    在EXTJS 2.2版本中,Tree Panel是EXTJS框架中用于展示树形结构数据的一个组件,但原生的EXTJS 2.2并未提供内置的复选框(checkbox)功能,这对于需要用户进行多选操作的场景来说是一个限制。标题提到的“解决extjs...

    extjs中本地照片预览、blob数据在oracle中存取

    此压缩包中完全能实现的功能是在extjs中让本地照片预览,并且将地址传递给java后台,将图片文件以blob的形式存储到oracle数据库,并且可以默认将数据库中的数据第一次加载在预览框里(也就是从数据库中读出blob数据...

    ExtJS4多文件上传,带进度条及管理

    在ExtJS4中,可以使用自定义组件或者第三方插件来实现文件上传功能。uploadPanel是一个常见的组件,它提供了一个用户友好的界面,包括文件选择、上传按钮、取消和暂停选项,以及关键的进度条展示。 **四、swfupload...

    extjs tree CHECKBOX 多选删除未实现(带SQL脚本)

    在网上下载别人的代码,改进加上CHECKBOX ,但是批量删除做不出来,希望高手完成并分享。

    extjs带复选框的树包括全选 反选 子选父以及 父选子

    为了实现这些功能,开发者需要对ExtJS的API有深入理解,包括`TreeStore`、`TreePanel`、`NodeInterface`以及事件监听和处理。同时,对于ADF的使用,需要了解其MVC架构和数据绑定机制。通过结合这两者,可以在JSP页面...

    ExtJS带进度条的多文件上传和图片预览

    8. **安全性考虑**:在实现文件上传时,需要考虑防止恶意文件上传,例如限制文件类型和大小,对文件名进行安全检查,防止路径遍历攻击等。 9. **响应式设计**:如果项目需要适应不同设备和屏幕尺寸,那么还需要考虑...

    ExtJS4.2 tree 级联选择

    4. `ttt.htm`文件应该是整个应用的HTML入口点,它可能包含了引入ExtJS库和自定义脚本的`&lt;script&gt;`标签,以及一个用于承载TreePanel的容器元素。 为了完整实现这个功能,还需要确保ExtJS库和必要的主题资源已经被...

    EXTJS checkbox赋值

    EXTJS 是一个流行的JavaScript库,专门用于构建富客户端应用程序,特别是企业级的Web应用。...同时,EXTJS也提供了丰富的API和事件系统,使得我们能够灵活地定制和扩展组件功能,以满足各种复杂的需求。

    Extjs4 swfupload 多文件上传

    ExtJS4是一个强大的JavaScript组件库,用于构建富客户端应用,而SWFUpload则是一个流行的选择,用于在浏览器中实现文件上传,特别是支持多文件选择和上传。 首先,让我们了解SWFUpload的基本原理。SWFUpload是基于...

    ExtJS实现文件下载

    在本文中,我们将深入探讨如何使用ExtJS框架来实现文件下载功能。ExtJS是一个流行的JavaScript库,用于构建桌面级的Web应用程序,它提供了丰富的组件和功能,包括与服务器的交互,如文件下载。 首先,我们要了解`...

    ExtJS4官方指南翻译:DragandDrop拖放/Grid组件/Tree组件/容器与布局

    在"ExtJS4官方指南翻译:DragandDrop拖放/Grid组件/Tree组件/容器与布局"中,我们将会探讨以下几个核心概念: 1. **Drag and Drop(拖放)**: ExtJS4提供了完善的拖放支持,允许用户通过鼠标操作在界面上移动元素...

    extjs的tree的使用

    ExtJS的Tree组件是一个功能强大且高度可定制的工具,用于展示分层数据。通过上述介绍,你应该对如何创建和配置Tree组件有了基本了解。记住,实践是最好的老师,在实际项目中多尝试、多调试,才能真正掌握其用法。...

    Extjs4 Combox tree

    ExtJS4中的ComboxTree是一种将下拉列表与树形结构结合的组件,它扩展了标准的ComboBox,提供了更丰富的用户交互体验。这种组件在数据展示和选择时特别有用,尤其是在处理具有层级关系的数据时,比如部门结构、地区...

    EXTJS 多文件上传

    2. **预览功能**:在上传之前,EXTJS 可以提供预览功能,让用户确认上传的文件是否正确。 3. **进度条显示**:在文件上传过程中,EXTJS 提供了进度条来显示每个文件的上传进度,为用户提供实时反馈。 4. **错误...

    Extjs+Struts2实现异步文件上传

    网上有些这样的例子,但是下了几个都没有跑起来,哎,希望那些发文章的人要发就发全的,别发个半生不熟的。... 现在自己整理了一个Struts2+ExtJS2实现文异步文件上传,没法上传图片无法看到效果,直接上源码吧。

    Extjs4后台框架、多文件上传

    在“Extjs4后台框架、多文件上传”项目中,我们可能看到的是一个实现后台与前端交互,特别是支持批量文件上传的解决方案。 在描述中提到的“完美支持extjs4”,意味着该压缩包包含的所有资源和代码都是为ExtJS4版本...

Global site tag (gtag.js) - Google Analytics