View Full Version : Preview plugin

9 Jun 2011, 12:24 AM
The preview plugin isn't in the api, but it is in Paging grid example. The same applies to the Row Expander plugin, it's in the Plugins grid examples.

9 Jun 2011, 4:40 AM
checkout under the ux folder in the examples.

Once you uncompress the downloaded zip file, go to examples/ux/ In there you will find PreviewPlugin.js and RowExpander.js

9 Jun 2011, 5:05 AM
And why they aren't in the API???
Why are they in the ux part???

9 Jun 2011, 5:06 AM
And why they aren't in the API???
Why are they in the ux part???

Because they are not part of the framework.

9 Jun 2011, 5:07 AM

9 Jun 2011, 5:09 AM

In every release we have done we have put many ux things in the ux folder. It arguable to put them in and arguable to keep them separate. There is a balance between keeping the framework as small as we can, not everyone needs all these ux stuff.

9 Dec 2014, 3:56 AM

When i use pagging grid example its showing blank page . Did some research and i found that ux folder is not added in src folder . so copy the ux folder from example folder and paste to src folder but still its not working . i also changed the loading path like

Ext.Loader.setPath('Ext.ux', '../ext/src/ux/'); but still not working

please see my js code i am stuck up please help

Ext.Loader.setConfig({enabled: true});

Ext.Loader.setPath('Ext.ux', '../ux/');


Ext.define('ForumThread', {
extend: 'Ext.data.Model',
fields: [
'title', 'forumtitle', 'forumid', 'username',
{name: 'replycount', type: 'int'},
{name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},
'lastposter', 'excerpt', 'threadid'
idProperty: 'threadid'

// create the Data Store
var store = Ext.create('Ext.data.Store', {
pageSize: 50,
model: 'ForumThread',
remoteSort: true,
proxy: {
// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
type: 'jsonp',
url: 'http://www.sencha.com/forum/topics-browse-remote.php',
reader: {
root: 'topics',
totalProperty: 'totalCount'
// sends single sort as multi parameter
simpleSortMode: true
sorters: [{
property: 'lastpost',
direction: 'DESC'

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

function renderLast(value, p, r) {
return Ext.String.format('{0}<br/>by {1}', Ext.Date.dateFormat(value, 'M j, Y, g:i a'), r.get('lastposter'));

var pluginExpanded = true;
var grid = Ext.create('Ext.grid.Panel', {
width: 700,
height: 500,
title: 'ExtJS.com - Browse Forums',
store: store,
disableSelection: true,
loadMask: true,
viewConfig: {
id: 'gv',
trackOver: false,
stripeRows: false,
plugins: [{
ptype: 'preview',
bodyField: 'excerpt',
expanded: true,
pluginId: 'preview'
// grid columns
// id assigned so we can apply custom css (e.g. .x-grid-cell-topic b { color:#333 })
// TODO: This poses an issue in subclasses of Grid now because Headers are now Components
// therefore the id will be registered in the ComponentManager and conflict. Need a way to
// add additional CSS classes to the rendered cells.
id: 'topic',
text: "Topic",
dataIndex: 'title',
flex: 1,
renderer: renderTopic,
sortable: false
text: "Author",
dataIndex: 'username',
width: 100,
hidden: true,
sortable: true
text: "Replies",
dataIndex: 'replycount',
width: 70,
align: 'right',
sortable: true
id: 'last',
text: "Last Post",
dataIndex: 'lastpost',
width: 150,
renderer: renderLast,
sortable: true
// paging bar on the bottom
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display",
'-', {
text: 'Show Preview',
pressed: pluginExpanded,
enableToggle: true,
toggleHandler: function(btn, pressed) {
var preview = Ext.getCmp('gv').getPlugin('preview');
renderTo: 'topic-grid'

// trigger the data store load