控制器代码：

[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;

}

}];