1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    28
    Vote Rating
    0
    michabbb is on a distinguished road

      0  

    Default Howto use Ext.ux.RowExpander ?

    Howto use Ext.ux.RowExpander ?


    any idea ??

    thank you,
    michael

  2. #2
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,203
    Vote Rating
    120
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Take a look at the FeedViewer example in our examples.
    http://cdn.sencha.io/architect/architect-examples.zip

    It uses the Ext.ux.PreviewPlugin which isn't exactly what you were asking for but should help you along the way.

    Including an external resource, using it, etc
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  3. #3
    Sencha User
    Join Date
    Nov 2011
    Posts
    28
    Vote Rating
    0
    michabbb is on a distinguished road

      0  

    Default


    thank you, i will try

  4. #4
    Sencha User demon222's Avatar
    Join Date
    Jan 2008
    Location
    Poland, Warsaw
    Posts
    132
    Vote Rating
    4
    demon222 is on a distinguished road

      0  

    Default


    example: overide class:

    PHP Code:

    Ext
    .define('ONLINE.view.override.MGrid', {
        
    requires'ONLINE.view.MGrid'
    }, function() {
        
    Ext.override(ONLINE.view.MGrid, {
                
    plugins: [{
                    
    pluginId'rowexpander',
                    
    ptype'rowexpander',
                    
    rowBodyTpl : [
                        
    '<p><b>Company:</b> {title}</p><br>',
                        
    '<p><b>Summary:</b> {description}</p>'
                    
    ]
                }]
          
        });
    }); 

  5. #5
    Ext JS Premium Member smokeman's Avatar
    Join Date
    Jul 2007
    Posts
    475
    Vote Rating
    2
    smokeman is on a distinguished road

      0  

    Default


    ok, I'm going to need a step by step for this, just saying look at feedviewer isn't the whole picture.

    If I look at feedviewer, I see that you can add a loader config, then looking at the loader I just added to my app, there is the paths config. I can add a path like in feedviewer, 'Ext.ux': 'ux/'
    now, there is also a requires section in the code for the feedviewer application...however if you click on application in the project inspector...in the config, requires is blank(none)
    how did the requires get set to the overrides:
    Code:
     requires: [
            'MyApp.view.override.FeedGrid',
            'MyApp.view.override.FeedPost'
        ],
    I'm guessing that was done in an external editor...?
    and, after saving the project I found these files under app/view/override, I'm guessing I have to manually put them there, and not import as a resource?

    I also see the launch config:
    Code:
    Ext.syncRequire([
    'Ext.ux.PreviewPlugin'
    ]);
    by dropping PreviewPlugin.js in the ux folder, the syncRequire knows to load ux/PreviewPlugin.js?

    looks like the ux is used in one of the override files, I assume by using the requires, it loads them automagically if they are in the folder above?

    just trying to get a handle on how to do all this in extjs4 MVC/architect...

  6. #6
    Ext JS Premium Member smokeman's Avatar
    Join Date
    Jul 2007
    Posts
    475
    Vote Rating
    2
    smokeman is on a distinguished road

      0  

    Default bump

    bump


    was hoping for a sencha response...
    I know adding plugins is coming, but I need to use one now.

  7. #7
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,203
    Vote Rating
    120
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      1  

    Default


    Quote Originally Posted by smokeman View Post
    how did the requires get set to the overrides:
    Code:
     requires: [
            'MyApp.view.override.FeedGrid',
            'MyApp.view.override.FeedPost'
        ],
    I'm guessing that was done in an external editor...?
    Incorrect guess, when you create an override inside of architect it will require them (if its different than the default create override).

    Quote Originally Posted by smokeman View Post
    and, after saving the project I found these files under app/view/override, I'm guessing I have to manually put them there, and not import as a resource?
    When you are editing the class click at the top the button that says "Create Override". In general these files are not needed unless you are trying to do something that is beyond the capacities of Architect's WYSIWYG functionality.


    Quote Originally Posted by smokeman View Post
    I also see the launch config:
    Code:
    Ext.syncRequire([
    'Ext.ux.PreviewPlugin'
    ]);
    by dropping PreviewPlugin.js in the ux folder, the syncRequire knows to load ux/PreviewPlugin.js?
    Yup, this is due to the mapping in the loader config.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  8. #8
    Ext JS Premium Member smokeman's Avatar
    Join Date
    Jul 2007
    Posts
    475
    Vote Rating
    2
    smokeman is on a distinguished road

      0  

    Default


    sweet, thanks!
    I had just never had to create an override, and couldn't find any instructions...
    now that I see it...duhhh(I feel retarted not having ever noticed that before).

    thanks for holding my hand :-)

  9. #9
    Sencha User
    Join Date
    Mar 2007
    Posts
    79
    Vote Rating
    0
    ismoore is on a distinguished road

      0  

    Default I'm stuck!

    I'm stuck!


    I have been trying Architect and one thing I wanted to work with was the RowExpander plugin.

    My first attempts failed and I decided to create the non architect example to see if I could get it working like the first grid here.

    However, following the instructions above I get several issues that I just cannot explain or understand what I am doing wrong. (it is probably worth mentioning I have loaded the feeder example and got it working without issue).

    I have created the base project, with a subdirectory ux containing the code.
    If I use the launch() with the syncRequired (and even set a break point) it never enters the code and cannot find the plugin.
    Code:
    Ext.Loader.setConfig({
        disableCaching: false,
        enabled: true,
        paths: {
            Ext: '.',
            'Ext.ux': './ux/'
        }
    });
    
    Ext.application({
        models: [
            'Company'
        ],
        stores: [
            'Local'
        ],
        views: [
            'MyViewport',
            'MyGridPanel'
        ],
        autoCreateViewport: true,
        name: 'MyApp',
    
        launch: function() {
            Ext.syncRequire(["Ext.ux.RowExpander"]);
        }
    
    });
    I have tried many versions of path settings but nothing works.

    If however I remove the syncRequired and use a normal required - even without the paths altogether, I get further... though I am not completly as the example shows.

    Code:
        requires: [
            'Ext.grid.feature.*',
            'Ext.ux.RowExpander'
        ],
        models: [
            'Company'
        ],
        stores: [
            'Local'
        ],
        views: [
            'MyViewport',
            'MyGridPanel'
        ],
        autoCreateViewport: true,
        name: 'MyApp',
    
        launch: function() {
            //Ext.syncRequire(["Ext.ux.RowExpander"]);
        }
    What then happens is that the plug in option works but the features do not. It is possible they are getting called at the wrong time but there are no calls to add the hidden templates on (which I can see though firefox in the online example) and this is highlighed as when I click on a node it generates a javascript error in toggleRow() as it cannot find the internal table that the expander should have on each node.
    Ext.fly(...) is null

    Line 225
    I have tried adding a feature manually just to add some text to each row and that works fine so I cannot see what the plug in is failing to do in architect that it was doing before.

    It is obvious I have missed something but if anyone could point me in the right direction - I have literally spent hours on this now.

    thanks in advance
    Attached Files

  10. #10
    Sencha - Architect Dev Team dfoelber's Avatar
    Join Date
    Sep 2011
    Location
    Rockville, MD
    Posts
    96
    Vote Rating
    12
    dfoelber will become famous soon enough

      0  

    Default


    Hi ismoore,

    The syncRequired() approach should work if you override and use the controller's init() function. Your path looks correct, so that shouldn't be the problem.

    Here are 3 things that will get your project further along:
    1) Clear "disableCaching" on your loader
    2) Clear "enableLoading" on your grid panel
    3) Set the plugin as a config on your override

    Code:
    Ext.define('MyApp.view.override.MyGridPanel', {    
    override: 'MyApp.view.MyGridPanel',
        plugins: [{ 
            ptype: 'rowexpander',
            rowBodyTpl : new Ext.XTemplate(
                '<p><b>Company:</b> {company}</p>',
                '<p><b>Change:</b> {change:this.formatChange}</p><br>',
                '<p><b>Summary:</b> {desc}</p>',
                
                {
                    formatChange: function(v){
                        var color = v >= 0 ? 'green' : 'red';
                        return '<span style="color: ' + color + ';">' + Ext.util.Format.usMoney(v) + '</span>';
                    }
                })
        }]
    });
    Everything except the lorem ipsum summary should be there after those changes.

    I'm sorry to hear that this was such a headache for you. We will revise the guides/example to take this scenario into account.

    Thanks!
    David Foelber
    @davidfoelber
    Sencha Architect Development Team