使用fancybox解決extjs表格列中圖片預覽問題

原因

• extjs 5.1 沒有grid列圖片點擊預覽的相關支持，其他方案不易實現且麻煩

解決方案

• 引用fancybox CDN

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css" />
    <script src="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>

• 直接在標籤中引用fancybox的屬性data-fancybox="gallery"即可

    me.grid = Ext.create('Ext.grid.Panel', {
        region: 'center',
        selType: 'rowmodel',
        store: me.store,
        border: false,
        selModel: { mode: 'MULTI' },
        plugins: [gridRowEditing],
        columns: {
            defaults: {
            },
            items: [
                {
                    header: '素材圖片', dataIndex: 'ATTACH_IMG', width: 120, align: 'center', sortable: true, renderer: function (v) {
                        return '<a data-fancybox="gallery" href="/Download.ashx?Method=GetImage&fileid=' + v + '"><image style="" src="/Download.ashx?Method=GetImage&fileid=' + v + '&scale=Scale&width=106&height=122" /></a>';
                    }
                }
            ]
        }
    });