控制器代码：
[ExtjsAction("view")]
public ActionResult GetById()
{
string picId = GetParameter("Id");
foreach (var p_w_picpath in picInfo.Images)
{
p_w_picpath.PicAddress = "http://localhost:8088/pic/Image/" + p_w_picpath.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: 'p_w_picpaths-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 p_w_picpaths 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;
}
}];
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
