[ExtJs4.0]當(dāng)鼠標(biāo)停留在某行的時(shí)候顯示此物品縮略圖

控制器代碼：

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

            }

        }];