Howto use Ext.ux.RowExpander ?

[michabbb]

any idea ??

thank you,
michael

[aconran]

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

[michabbb]

thank you, i will try

[demon222]

example: overide class:

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>'
                ]
            }]
      
    });
}); 

[smokeman]

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:

 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:

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...

[smokeman]

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

[aconran]

how did the requires get set to the overrides:

 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).

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.

I also see the launch config:

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.

[smokeman]

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 :-)

[ismoore]

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.

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.

    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

[dfoelber]

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

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!