1. #1
    Sencha User
    Join Date
    Apr 2011
    Location
    Spain
    Posts
    77
    Vote Rating
    1
    Fanny144 is on a distinguished road

      0  

    Default Preview plugin

    Preview plugin


    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.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Apr 2011
    Location
    Spain
    Posts
    77
    Vote Rating
    1
    Fanny144 is on a distinguished road

      0  

    Default


    And why they aren't in the API???
    Why are they in the ux part???

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Quote Originally Posted by Fanny144 View Post
    And why they aren't in the API???
    Why are they in the ux part???
    Because they are not part of the framework.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    Apr 2011
    Location
    Spain
    Posts
    77
    Vote Rating
    1
    Fanny144 is on a distinguished road

      0  

    Default


    Why???

  6. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Quote Originally Posted by Fanny144 View Post
    Why???
    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  7. #7
    Sencha User
    Join Date
    Dec 2014
    Location
    India
    Posts
    1
    Vote Rating
    0
    ravinesh.kumar is on a distinguished road

      0  

    Default I need your help on previewPlugin

    I need your help on previewPlugin


    Hi

    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.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.toolbar.Paging',
    'Ext.ux.PreviewPlugin',
    'Ext.ModelManager',
    'Ext.tip.QuickTipManager'
    ]);






    Ext.onReady(function(){
    Ext.tip.QuickTipManager.init();


    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>',
    value,
    record.data.forumtitle,
    record.getId(),
    record.data.forumid
    );
    }


    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
    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",
    items:[
    '-', {
    text: 'Show Preview',
    pressed: pluginExpanded,
    enableToggle: true,
    toggleHandler: function(btn, pressed) {
    var preview = Ext.getCmp('gv').getPlugin('preview');
    preview.toggleExpanded(pressed);
    }
    }]
    }),
    renderTo: 'topic-grid'
    });


    // trigger the data store load
    store.loadPage(1);
    });

Thread Participants: 2

Tags for this Thread