Search code examples
extjsextjs4

ExtJS 4 - how to use Ext.ux.PreviewPlugin

Since now I have only used plugin for editing and the way I use it is first adding:

this.editing = Ext.create('Ext.grid.plugin.CellEditing');

in my initComponent: function and then apply this:

plugins: [this.editing],

And I was ready to go. But obv. this approach doesn't work on Ext.ux.PreviewPlugin so I googled i little bit and find some kind of example which is:

//  requires: 'Ext.ux.PreviewPlugin',


//    disableSelection: true,



    viewConfig: {
        id: 'id',
        trackOver: false,
        stripeRows: false,
        plugins: [{
            ptype: 'preview',
            bodyField: 'excerpt',
            expanded: true,
            pluginId: 'preview'
        }]
    },

    // pluggable renders
    renderTopic: function(value, p, record) {
        return Ext.String.format(
            '<strong><a href="http://sencha.com/forum/showthread.php?t={2}" target="_blank">{0}</a></strong><a href="http://sencha.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>',
            value,
            record.data.forumtitle,
            record.getId(),
            record.data.forumid
        );
    },

but it also doesn't work, at least for me, I get the following error :

"NetworkError: 404 Not Found - http://myLocalSite/index.php/ux/PreviewPlugin.js?_dc=1339593100494"

I'm not quite sure which cause this error, also I'm using the example directly so I expected to get some errors because of that, but I think I miss the general approach to using these kinds of plugins, so I think I need some more general points on how to configure this plugin, and maybe then will be able to adjust it for my exact needs.

So either way, a help is needed to get this plugin working.

Thanks

Leron

Solution

  • It depends on your ExtJs version but if you're using 4.0.7 - preview plugin wound be by default not in src\ directory but in \examples\ux.

    I would recommend to copy it from there to \src\ux and make sure you include all dependencies (like special css classes or other stuff from \examples\ux)