dataview的使用

使用1

/*!
* Ext JS Library 3.3.1
* Copyright(c) 2006-2010 Sencha Inc.
* [email protected]
* http://www.sencha.com/license
*/
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 (0 items selected)',

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;
},

listeners: {
selectionchange: {
fn: function(dv,nodes){
var l = nodes.length;
var s = l != 1 ? 's' : '';
panel.setTitle('Simple DataView ('+l+' item'+s+' selected)');
}
}
}
})
});
panel.render(document.body);

});

后面的代码是上面代码中用到的插件Ext.DataView.DragSelector()和new Ext.DataView.LabelEditor({dataIndex: 'name'})

/*!
* Ext JS Library 3.3.1
* Copyright(c) 2006-2010 Sencha Inc.
* [email protected]
* http://www.sencha.com/license
*/
/**
* @class Ext.DataView.LabelEditor
* @extends Ext.Editor
*
*/
Ext.DataView.LabelEditor = Ext.extend(Ext.Editor, {
alignment: "tl-tl",
hideEl : false,
cls: "x-small-editor",
shim: false,
completeOnEnter: true,
cancelOnEsc: true,
labelSelector: 'span.x-editable',

constructor: 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
);
},

init : function(view){
this.view = view;
view.on('render', this.initEditor, this);
this.on('complete', this.onSave, this);
},

initEditor : function(){
this.view.on({
scope: this,
containerclick: this.doBlur,
click: this.doBlur
});
this.view.getEl().on('mousedown', this.onMouseDown, this, {delegate: this.labelSelector});
},

doBlur: function(){
if(this.editing){
this.field.blur();
}
},

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, 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{
if(proxy.dom.parentNode !== view.el.dom){
view.el.dom.appendChild(proxy.dom);
}
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 (!Ext.isIE) {
view.un('containerclick', cancelClick, view);
}
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);
}
};