高级数据视图(Advanced DataView)

Posted 周五, 06/27/2008 - 11:43 by admin

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

效果图如下

主要文件chooser.html,chooser.js,chooser.css,chooser-example.js,get-images.php。

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

效果图如下

主要文件chooser.html,chooser.js,chooser.css,chooser-example.js,get-images.php。

chooser.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<title>Advanced 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>
	
	<link rel="stylesheet" type="text/css" href="chooser.css" />
	<script type="text/javascript" src="chooser.js"></script>
	<script type="text/javascript" src="chooser-example.js"></script>
	
	<!-- Common Styles for the examples -->
	<link rel="stylesheet" type="text/css" href="../examples.css" />
</head>
<body class="xtheme-gray">
	<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
	<h1>Advanced DataView Example</h1>
	<p>This example shows loading a DataView in a Window.  Each item has a linked details view, and the DataView
    supports custom sorting and filtering.</p>
	<div id="buttons" style="margin:20px;"></div>
	<div id="images" style="margin:20px;width:600px;"></div>
</body>
</html>

chooser.js

/*
 * Ext JS Library 2.0.2
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing＠extjs.com
 * 
 * extjs.com/license
 */

var ImageChooser = function(config){
	this.config = config;
}

ImageChooser.prototype = {
    // cache data by image name for easy lookup
    lookup : {},
    
	show : function(el, callback){
		if(!this.win){
			this.initTemplates();
			
			this.store = new Ext.data.JsonStore({
			    url: this.config.url,
			    root: 'images',
			    fields: [
			        'name', 'url',
			        {name:'size', type: 'float'},
			        {name:'lastmod', type:'date', dateFormat:'timestamp'}
			    ],
			    listeners: {
			    	'load': {fn:function(){ this.view.select(0); }, scope:this, single:true}
			    }
			});
			this.store.load();
			
			var formatSize = function(data){
		        if(data.size < 1024) {
		            return data.size + " bytes";
		        } else {
		            return (Math.round(((data.size*10) / 1024))/10) + " KB";
		        }
		    };
			
			var formatData = function(data){
		    	data.shortName = data.name.ellipse(15);
		    	data.sizeString = formatSize(data);
		    	data.dateString = new Date(data.lastmod).format("m/d/Y g:i a");
		    	this.lookup[data.name] = data;
		    	return data;
		    };
			
		    this.view = new Ext.DataView({
				tpl: this.thumbTemplate,
				singleSelect: true,
				overClass:'x-view-over',
				itemSelector: 'div.thumb-wrap',
				emptyText : '<div style="padding:10px;">No images match the specified filter</div>',
				store: this.store,
				listeners: {
					'selectionchange': {fn:this.showDetails, scope:this, buffer:100},
					'dblclick'       : {fn:this.doCallback, scope:this},
					'loadexception'  : {fn:this.onLoadException, scope:this},
					'beforeselect'   : {fn:function(view){
				        return view.store.getRange().length > 0;
				    }}
				},
				prepareData: formatData.createDelegate(this)
			});
		    
			var cfg = {
		    	title: 'Choose an Image',
		    	id: 'img-chooser-dlg',
		    	layout: 'border',
				minWidth: 500,
				minHeight: 300,
				modal: true,
				closeAction: 'hide',
				border: false,
				items:[{
					id: 'img-chooser-view',
					region: 'center',
					autoScroll: true,
					items: this.view,
                    tbar:[{
                    	text: 'Filter:'
                    },{
                    	xtype: 'textfield',
                    	id: 'filter',
                    	selectOnFocus: true,
                    	width: 100,
                    	listeners: {
                    		'render': {fn:function(){
						    	Ext.getCmp('filter').getEl().on('keyup', function(){
						    		this.filter();
						    	}, this, {buffer:500});
                    		}, scope:this}
                    	}
                    }, ' ', '-', {
                    	text: 'Sort By:'
                    }, {
                    	id: 'sortSelect',
                    	xtype: 'combo',
				        typeAhead: true,
				        triggerAction: 'all',
				        width: 100,
				        editable: false,
				        mode: 'local',
				        displayField: 'desc',
				        valueField: 'name',
				        lazyInit: false,
				        value: 'name',
				        store: new Ext.data.SimpleStore({
					        fields: ['name', 'desc'],
					        data : [['name', 'Name'],['size', 'File Size'],['lastmod', 'Last Modified']]
					    }),
					    listeners: {
							'select': {fn:this.sortImages, scope:this}
					    }
				    }]
				},{
					id: 'img-detail-panel',
					region: 'east',
					split: true,
					width: 150,
					minWidth: 150,
					maxWidth: 250
				}],
				buttons: [{
					id: 'ok-btn',
					text: 'OK',
					handler: this.doCallback,
					scope: this
				},{
					text: 'Cancel',
					handler: function(){ this.win.hide(); },
					scope: this
				}],
				keys: {
					key: 27, // Esc key
					handler: function(){ this.win.hide(); },
					scope: this
				}
			};
			Ext.apply(cfg, this.config);
		    this.win = new Ext.Window(cfg);
		}
		
		this.reset();
	    this.win.show(el);
		this.callback = callback;
		this.animateTarget = el;
	},
	
	initTemplates : function(){
		this.thumbTemplate = new Ext.XTemplate(
			'<tpl for=".">',
				'<div class="thumb-wrap" id="{name}">',
				'<div class="thumb"><img src="{url}" title="{name}"></div>',
				'<span>{shortName}</span></div>',
			'</tpl>'
		);
		this.thumbTemplate.compile();
		
		this.detailsTemplate = new Ext.XTemplate(
			'<div class="details">',
				'<tpl for=".">',
					'<img src="{url}"><div class="details-info">',
					'<b>Image Name:</b>',
					'<span>{name}</span>',
					'<b>Size:</b>',
					'<span>{sizeString}</span>',
					'<b>Last Modified:</b>',
					'<span>{dateString}</span></div>',
				'</tpl>',
			'</div>'
		);
		this.detailsTemplate.compile();
	},
	
	showDetails : function(){
	    var selNode = this.view.getSelectedNodes();
	    var detailEl = Ext.getCmp('img-detail-panel').body;
		if(selNode && selNode.length > 0){
			selNode = selNode[0];
			Ext.getCmp('ok-btn').enable();
		    var data = this.lookup[selNode.id];
            detailEl.hide();
            this.detailsTemplate.overwrite(detailEl, data);
            detailEl.slideIn('l', {stopFx:true,duration:.2});
		}else{
		    Ext.getCmp('ok-btn').disable();
		    detailEl.update('');
		}
	},
	
	filter : function(){
		var filter = Ext.getCmp('filter');
		this.view.store.filter('name', filter.getValue());
		this.view.select(0);
	},
	
	sortImages : function(){
		var v = Ext.getCmp('sortSelect').getValue();
    	this.view.store.sort(v, v == 'name' ? 'asc' : 'desc');
    	this.view.select(0);
    },
	
	reset : function(){
		if(this.win.rendered){
			Ext.getCmp('filter').reset();
			this.view.getEl().dom.scrollTop = 0;
		}
	    this.view.store.clearFilter();
		this.view.select(0);
	},
	
	doCallback : function(){
        var selNode = this.view.getSelectedNodes()[0];
		var callback = this.callback;
		var lookup = this.lookup;
		this.win.hide(this.animateTarget, function(){
            if(selNode && callback){
				var data = lookup[selNode.id];
				callback(data);
			}
		});
    },
	
	onLoadException : function(v,o){
	    this.view.getEl().update('<div style="padding:10px;">Error loading images.</div>'); 
	}
};

String.prototype.ellipse = function(maxLength){
    if(this.length > maxLength){
        return this.substr(0, maxLength-3) + '...';
    }
    return this;
};

chooser.css

/*
 * Ext JS Library 2.0.2
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing＠extjs.com
 * 
 * extjs.com/license
 */


#img-chooser-dlg .details{ 
    padding: 10px; 
    text-align: center; 
} 
#img-chooser-dlg .details-info{ 
    border-top: 1px solid #cccccc; 
    font: 11px Arial, Helvetica, sans-serif; 
    margin-top: 5px; 
    padding-top: 5px; 
    text-align: left; 
} 
#img-chooser-dlg .details-info b{ 
    color: #555555; 
    display: block; 
    margin-bottom: 4px; 
} 
#img-chooser-dlg .details-info span{ 
    display: block; 
    margin-bottom: 5px; 
    margin-left: 5px; 
} 

#img-chooser-view{ 
    background: white; 
    font: 11px Arial, Helvetica, sans-serif;
} 
#img-chooser-view .thumb{ 
    background: #dddddd; 
    padding: 3px; 
} 
#img-chooser-view .thumb img{ 
    height: 60px; 
    width: 80px; 
} 
#img-chooser-view .thumb-wrap{ 
    float: left; 
    margin: 4px; 
    margin-right: 0; 
    padding: 5px;
} 
#img-chooser-view .thumb-wrap span{ 
    display: block; 
    overflow: hidden; 
    text-align: center; 
} 
#img-chooser-view .x-view-over{
    border:1px solid #dddddd; 
    background: #efefef url(../../resources/images/default/grid/row-over.gif) repeat-x left top; 
    padding: 4px; 
}
#img-chooser-view .x-view-selected{ 
    background: #DFEDFF; 
    border: 1px solid #6593cf; 
    padding: 4px; 
} 
#img-chooser-view .x-view-selected .thumb{ 
    background:transparent; 
}
#img-chooser-view .x-view-selected span{ 
    color:#1A4D8F;
}
#img-chooser-view .loading-indicator { 
    font-size:11px; 
    background-image:url('../../resources/images/grid/loading.gif'); 
    background-repeat: no-repeat; 
    background-position: left; 
    padding-left:20px; 
    margin:10px; 
}

chooser-example.js

/*
 * Ext JS Library 2.0.2
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing＠extjs.com
 * 
 * extjs.com/license
 */


Ext.onReady(function(){
    var chooser, btn;
    
    function insertImage(data){
    	Ext.DomHelper.append('images', {
    		tag: 'img', src: data.url, style:'margin:10px;visibility:hidden;'
    	}, true).show(true).frame();
    	btn.focus();
    };
    
    function choose(btn){
    	if(!chooser){
    		chooser = new ImageChooser({
    			url:'get-images.php',
    			width:515, 
    			height:350
    		});
    	}
    	chooser.show(btn.getEl(), insertImage);
    };
    
    btn = new Ext.Button({
	    text: "Insert Image",
		handler: choose,
        renderTo: 'buttons'
    });
});

get-images.php

<?php
$dir = "images/thumbs/";
$images = array();
$d = dir($dir);
while($name = $d->read()){
    if(!preg_match('/\.(jpg|gif|png)$/', $name)) continue;
    $size = filesize($dir.$name);
    $lastmod = filemtime($dir.$name)*1000;
    $images[] = array('name'=>$name, 'size'=>$size, 
			'lastmod'=>$lastmod, 'url'=>$dir.$name);
}
$d->close();
$o = array('images'=>$images);
echo json_encode($o);
?>

演示地址:http://extjs.org.cn/extjs/examples/view/chooser.html

  • 要发表评论，请先登录

评论

跪求...JSP的get-images

by 游客 - 05/30/2009 - 22:21

刚学JSP...这个又要配置PHP..头昏呐...管理员能不能写一个get-images.jsp的文件呢..不要配置PHP也方便多了

谢谢谢谢谢谢谢...

  • 要发表评论，请先登录

功能改善

by 游客 - 06/25/2009 - 11:53

如果加上圖片搜索載入進來的就更好了

  • 要发表评论，请先登录

不能显示图

by 游客 - 05/28/2009 - 17:59

我在EXAMPLE里面找到了这个例子,图片文件都很全,为什么就是显示不了图片呢?只有一个框架而已..

  • 要发表评论，请先登录