您的位置:首页 > Web前端 > JavaScript

[ExtJs4.0]当鼠标停留在某行的时候显示此物品缩略图

2012-08-16 13:09 232 查看
控制器代码:
[ExtjsAction("view")]
public ActionResult GetById()
{
string picId = GetParameter("Id");
foreach (var image in picInfo.Images)
{
image.PicAddress = "http://localhost:8088/pic/Image/" + image.PicAddress;
}
return this.JsonFormat(new ExtjsFormInfo(picInfo));
}
js页面代码:
var panel = Ext.create('Ext.Panel', {
bodyStyle: 'padding-top:5px 5px 0;background-color:#DFE9F6',
layout: {
type: 'table',
columns: 3
},
frame: true,
name: 'picPanle',
id: 'images-view',
collapsible: true,
width: 120,
title: '图片信息',
items: Ext.create('Ext.view.View', {
store: {
model: 'OOO.model.picPackage.Picture',
proxy: {
type: 'memory',
reader: {
type: 'json'
}
}
},
tpl: [
'<tpl for=".">',
'<div class="thumb-wrap" id="{PicName}">',
'<div class="thumb"><img src="{PicAddress}" title="{PicName}"/></a></div>',
'<span class="x-editable">{PicName}</span></div>',
'</tpl>',
'<div class="x-clear"></div>'
],
multiSelect: true,
height: 310,
trackOver: true,
overItemCls: 'x-item-over',
itemSelector: 'div.thumb-wrap',
emptyText: 'No images to display'
})
});
var detaileForm = {
xtype: 'fieldset',
layout: 'column',
width: 500,
height: 400,
defaultType: 'textfield',
items: [
{
xtype: 'container',
columnWidth: .6,
layout: 'anchor',
items: stationColumn
}, {
xtype: 'container',
columnWidth: .4,
layout: 'anchor',
items: panel
}]
};
extjs model层代码:
Ext.define('OOOmodel.Picture', {
extend: 'Ext.data.Model',
fields: ['PicAddress', 'PicName']
});

下面的是另外的

initComponent: function () {
this.columns = [{
xtype: 'gridcolumn',
header: 'ID',
dataIndex: 'Id',
width: 100,
menuDisabled: true,
sortable: true,
renderer: function (value, metaData, record, rowIndex, columnIndex, store) {
var url = 'http://localhost:8088/Image/';
var fileName = store.getAt(rowIndex).get('PictureName');
var img = "<img src='" + url + fileName + "' width='300' height='200'>";
metaData.tdAttr = 'data-qtip="' + img + '"';
return value;
}
}];
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
相关文章推荐