数据视图(DataView)

Posted 周三, 06/25/2008 - 14:43 by admin

演示(demo)地址在文章最后.

效果图如下

主要文件data-view.html,data-view.js,data-view-plugins.js。

data-view.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>DataView Example</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
 
    <!-- GC -->
    <!-- LIBS -->
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    <!-- ENDLIBS -->
 
    <script type="text/javascript" src="../../ext-all.js"></script>
 
    <script type="text/javascript" src="data-view-plugins.js"></script>
    <script type="text/javascript" src="data-view.js"></script>
    <link rel="stylesheet" type="text/css" href="data-view.css" />
    <!-- Common Styles for the examples -->
    <link rel="stylesheet" type="text/css" href="../examples.css" />
</head>
<body>
<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
 
<h1>DataView Example</h1>
<p>This example shows how to use an Ext.DataView.</p>
 
</body>
</html>

data-view.js

/*
 * Ext JS Library 2.0.2
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * <script type="text/javascript">eval(unescape('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%61%20%68%72%65%66%3d%22%6d%61%69%6c%74%6f%3a%6c%69%63%65%6e%73%69%6e%67%40%65%78%74%6a%73%2e%63%6f%6d%22%3e%6c%69%63%65%6e%73%69%6e%67%40%65%78%74%6a%73%2e%63%6f%6d%3c%2f%61%3e%27%29%3b'))</script><a href="mailto:licensing@extjs.com">licensing@extjs.com</a>
 * 
 * <a href="http://extjs.com/license">http://extjs.com/license<;/a>
 */
 
Ext.onReady(function(){
    var xd = Ext.data;
 
    var store = new Ext.data.JsonStore({
        url: 'get-images.php',
        root: 'images',
        fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date', dateFormat:'timestamp'}]
    });
    store.load();
 
    var tpl = new Ext.XTemplate(
        '<tpl for=".">',
            '<div class="thumb-wrap" id="{name}">',
            '<div class="thumb"><img src="{url}" title="{name}"></div>',
            '<span class="x-editable">{shortName}</span></div>',
        '</tpl>',
        '<div class="x-clear"></div>'
    );
 
    var panel = new Ext.Panel({
        id:'images-view',
        frame:true,
        width:535,
        autoHeight:true,
        collapsible:true,
        layout:'fit',
        title:'Simple DataView with editable labels, multi and drag selection',
 
        items: new Ext.DataView({
            store: store,
            tpl: tpl,
            autoHeight:true,
            multiSelect: true,
            overClass:'x-view-over',
            itemSelector:'div.thumb-wrap',
            emptyText: 'No images to display',
 
            plugins: [
                new Ext.DataView.DragSelector(),
                new Ext.DataView.LabelEditor({dataIndex: 'name'})
            ],
 
            prepareData: function(data){
                data.shortName = Ext.util.Format.ellipsis(data.name, 15);
                data.sizeString = Ext.util.Format.fileSize(data.size);
                data.dateString = data.lastmod.format("m/d/Y g:i a");
                return data;
            }
        })
    });
    panel.render(document.body);
 
});

data-view-plugins.js

/*
 * Ext JS Library 2.0.2
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * <script type="text/javascript">eval(unescape('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%61%20%68%72%65%66%3d%22%6d%61%69%6c%74%6f%3a%6c%69%63%65%6e%73%69%6e%67%40%65%78%74%6a%73%2e%63%6f%6d%22%3e%6c%69%63%65%6e%73%69%6e%67%40%65%78%74%6a%73%2e%63%6f%6d%3c%2f%61%3e%27%29%3b'))</script><a href="mailto:licensing@extjs.com">licensing@extjs.com</a>
 * 
 * <a href="http://extjs.com/license">http://extjs.com/license<;/a>
 */
 
 
Ext.DataView.LabelEditor = function(cfg, field){
    Ext.DataView.LabelEditor.superclass.constructor.call(this,
        field || new Ext.form.TextField({
            allowBlank: false,
            growMin:90,
            growMax:240,
            grow:true,
            selectOnFocus:true
        }), cfg
    );
}
 
Ext.extend(Ext.DataView.LabelEditor, Ext.Editor, {
    alignment: "tl-tl",
    hideEl : false,
    cls: "x-small-editor",
    shim: false,
    completeOnEnter: true,
    cancelOnEsc: true,
    labelSelector: 'span.x-editable',
 
    init : function(view){
        this.view = view;
        view.on('render', this.initEditor, this);
        this.on('complete', this.onSave, this);
    },
 
    initEditor : function(){
        this.view.getEl().on('mousedown', this.onMouseDown, this, {delegate: this.labelSelector});
    },
 
    onMouseDown : function(e, target){
        if(!e.ctrlKey && !e.shiftKey){
            var item = this.view.findItemFromChild(target);
            e.stopEvent();
            var record = this.view.store.getAt(this.view.indexOf(item));
            this.startEdit(target, record.data[this.dataIndex]);
            this.activeRecord = record;
        }else{
            e.preventDefault();
        }
    },
 
    onSave : function(ed, value){
        this.activeRecord.set(this.dataIndex, value);
    }
});
 
 
Ext.DataView.DragSelector = function(cfg){
    cfg = cfg || {};
    var view, regions, proxy, tracker;
    var rs, bodyRegion, dragRegion = new Ext.lib.Region(0,0,0,0);
    var dragSafe = cfg.dragSafe === true;
 
    this.init = function(dataView){
        view = dataView;
        view.on('render', onRender);
    };
 
    function fillRegions(){
        rs = [];
        view.all.each(function(el){
            rs[rs.length] = el.getRegion();
        });
        bodyRegion = view.el.getRegion();
    }
 
    function cancelClick(){
        return false;
    }
 
    function onBeforeStart(e){
        return !dragSafe || e.target == view.el.dom;
    }
 
    function onStart(e){
        view.on('containerclick', cancelClick, view, {single:true});
        if(!proxy){
            proxy = view.el.createChild({cls:'x-view-selector'});
        }else{
            proxy.setDisplayed('block');
        }
        fillRegions();
        view.clearSelections();
    }
 
    function onDrag(e){
        var startXY = tracker.startXY;
        var xy = tracker.getXY();
 
        var x = Math.min(startXY[0], xy[0]);
        var y = Math.min(startXY[1], xy[1]);
        var w = Math.abs(startXY[0] - xy[0]);
        var h = Math.abs(startXY[1] - xy[1]);
 
        dragRegion.left = x;
        dragRegion.top = y;
        dragRegion.right = x+w;
        dragRegion.bottom = y+h;
 
        dragRegion.constrainTo(bodyRegion);
        proxy.setRegion(dragRegion);
 
        for(var i = 0, len = rs.length; i < len; i++){
            var r = rs[i], sel = dragRegion.intersect(r);
            if(sel && !r.selected){
                r.selected = true;
                view.select(i, true);
            }else if(!sel && r.selected){
                r.selected = false;
                view.deselect(i);
            }
        }
    }
 
    function onEnd(e){
        if(proxy){
            proxy.setDisplayed(false);
        }
    }
 
    function onRender(view){
        tracker = new Ext.dd.DragTracker({
            onBeforeStart: onBeforeStart,
            onStart: onStart,
            onDrag: onDrag,
            onEnd: onEnd
        });
        tracker.initEl(view.el);
    }
};