Ext.ux.grid.plugin.RowEditing - add some usefull features

[atian25]

there are so many editor don't render well with original Ext.grid.plugin.RowEditing,
such as textarea, fieldContainer subClass(i wrote a DateTime,but it render bad)

i'm not good at this, maybe u have some good idea.

[ssamayoa]

Thanks, I'm using now this plugin and so far is working ok.
Regards.

[ap]

I've tried and failed to make the RowEditing fire events after the editor is rendered to adjust the height of the grid.
Currently the editor will not trigger any layout in gridView, when the grid is set to 'autoHeight', nor will any scroll bar appear. See this thread http://www.sencha.com/forum/showthre...utoHeight-true

Can anyone using this ux suggest a solution?

[alxs17]

Hey everyone,

Big thanks for this plugin !!

It's probably me and not the plugin (first time I use an extjs plugin so...), but is that possible to create this plugin in many different view ?

in my "main" app I define plugin path like this :

Ext.Loader.setConfig({    enabled:true,
    paths: {
          'Ext.ux': './client_app/plugin/ux',          
          'Ext.ux.grid.plugin': './client_app/plugin/ux/grid/plugin'
      }
}); 

in each grid of an view I create plugin like this :

{
            xtype: 'gridpanel',
            width: 370,
            height: 150,
            store: 'User_contact',
            selType: 'rowmodel',
            plugins: [
                    Ext.create('Ext.ux.grid.plugin.RowEditing',{pluginId: 'contactRowEditor',autoCancel : false})
                       ],
               columns: [
                {header: "Type",  dataIndex: 'type',  flex: 1, editor:{xtype:'textfield'}},
                {header: "Contact",  dataIndex: 'number',  flex: 1, editor:{xtype:'textfield'}},
                {header: "Commentaire",  dataIndex: 'comment',  flex: 1, editor:{xtype:'textfield'}}
                ] 

Until there everything work fine.
But if I try to create this plugin in a second view. I'm unable to start my app...

Someone have an idea of what I'm doing wrong ?

[j.bruni]

Someone have an idea of what I'm doing wrong ?

It depends on the context of the usage of Ext.create - it is possible that a single RowEditor is being created for all grids!

If you create the RowEditor inside an overriden initComponent method, each grid will have its own editor (instead of all grids trying to use the same unique editor).

Something like this:

Ext.define( 'My.GridPanel', {
    extend: 'gridpanel',
    alias: 'widget.mygridpanel',
    width: 370,
    height: 150,
    store: 'User_contact',
    selType: 'rowmodel',
    columns: [
        {header: "Type",  dataIndex: 'type',  flex: 1, editor:{xtype:'textfield'}},
        {header: "Contact",  dataIndex: 'number',  flex: 1, editor:{xtype:'textfield'}},
        {header: "Commentaire",  dataIndex: 'comment',  flex: 1, editor:{xtype:'textfield'}}
    ],
    initComponent: function() {
        var rowEditing = Ext.create('Ext.ux.grid.plugin.RowEditing', {
            pluginId: 'contactRowEditor',
            autoCancel : false
        });
        Ext.apply(this, {plugins: [rowEditing]});
        this.callParent(arguments);
    }
);

Then, due to the alias​, you can simply use xtype: "mygridpanel" - and you will have one editor for each grid.

[alxs17]

Hey !

Thanks a lot for your informations, really helpful.

[Justin Noel]

@harrydeluxe

How did you get your demo on GitHub to be able to select text in the editor? I can't manage that to save my life?

I can't even click around inside my text. The best I can do is use the arrow keys to go to the end of the text string and backspace through all of it.

[atian25]

v1.4 2011-09-11refactor and change doc style to jsduck

[chramer]

any ideas how to fix this..
i have a grid with a single row :
img1.PNG

on RowEditing I got this :
img2.PNG

the button are inside the grid, i don't see them

[atian25]

you'd better set grid height to give space to button.
or override plugin's getEditor() method to hack the RowEditor