1. #51
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    32
    Vote Rating
    2
    LarssaAndin is on a distinguished road

      0  

    Default Dynamic edit component

    Dynamic edit component


    I'm using those lovely component for my, quite complicated, grid and so far it works extremely well.
    I've managed to add editing using the standard CellEditing plugin and it works fine for my normal cells.

    The problem I have is that I want to be able to display a combo box in some edit cells but only when the user starts editing the cell. If it would be column specific this would be easy to accomplish, but the requirement says that it has to be configurable on a cell level.

    The question is, how do I accomplish this dynamic selection of edit component? I can easily add configuration to the cell record, but I don't really understand where to add the controlling code that will use this config?

  2. #52
    Sencha User skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,343
    Vote Rating
    249
    skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of

      0  

    Default


    If your question is about the CellEditing plugin I suggest starting a new thread in the Q&A forum. I see no reason why you couldn't update the contents of the combobox's store in a beforeedit listener.

    To achieve something like this with Component Column I would use the renderer to output a container and dynamically add a combobox on the click event. This could get quite complex as you'd need to manage many of the features of the CellEditing plugin yourself. Hiding the combobox and keyboard navigation are two obvious pain points.

    Component Column is not intended as a direct replacement for the built-in editor plugins though it is often used in that way. Component Column just provides a convenient way to get a component into a grid cell. Editing is much more than that.

  3. #53
    Sencha User
    Join Date
    May 2012
    Location
    Nowhere
    Posts
    45
    Vote Rating
    1
    Sadd is on a distinguished road

      0  

    Default


    Hi very nice plugin, really usefull.

    I have a question, i have a container with 2 items on it, one textfield, one combobox. I need to fill this items with info from one field of my store. Something like this:
    Code:
    store = [{id: "3", Version: "123,FX"}]
    I want to render 123 in the textfield and FX is one of the values of combobox store. In the same way i need if textfield or combo changes impact this change in the store. Can you give me some help here?

    Thanks,
    Regards.
    - Sadd

  4. #54
    Sencha User skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,343
    Vote Rating
    249
    skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of

      0  

    Default


    Personally I think I'd write my models to split up that version if the two parts are really separate.

    That aside, off the top of my head it might look something like this:

    Code:
    dataIndex: 'Version',
    renderer: function(value, meta, record) {
        var version = value.split(',');
    
        return {
            xtype: 'container',
            layout: ...,
            items: [
                {
                    value: version[0],
                    xtype: 'textfield',
                    listeners: {
                        blur: function(field) {
                            record.set('Version', field.getValue() + ',' + version[1]);
                        }
                    }
                }, {
                    ...
                    value: version[1],
                    xtype: 'combobox',
                    listeners: {
                        blur: function(field) {
                            record.set('Version', version[0] + ',' + field.getValue());
                        }
                    }
                }
            ]
        };
    }
    Completely untested but hopefully it'll give you some ideas. Managing focus strikes me as an obvious pain point. If you try to jump from one field to another the blur listener will cause a grid refresh and remove the focus on the new field. Depending on how and when you want the models updated you may want to use some alternative to a blur listener (e.g. if there's a save button you could put that logic in there rather than updating each record on blur). You could also directly update the data property rather than using set but that could cause other problems depending on how your records are being used.

  5. #55
    Sencha User
    Join Date
    May 2012
    Location
    Nowhere
    Posts
    45
    Vote Rating
    1
    Sadd is on a distinguished road

      0  

    Default


    Ok i see what is the way to achive this, thanks a lot for your help .

    - Sadd

  6. #56
    Sencha User
    Join Date
    Mar 2012
    Posts
    13
    Vote Rating
    1
    LuckyBlade is on a distinguished road

      0  

    Default Resize

    Resize


    Hi! I'm using version 4.1.1. Since switching applyTemplate to apply all works great except one. After adding several elements Grid doesn't increase size. If I add for example height: 1000 to Grid config I see all elements, but fixed height it's not acceptable. Any suggestions how can I fix it?

    1.png

  7. #57
    Sencha User skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,343
    Vote Rating
    249
    skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of

      0  

    Default


    From what you've said it sounds like you're trying to use auto-height for grids. Not sure the framework officially supports that but it should be possible to make it work.

    It's also not entirely clear what you mean by 'adding several elements'. I assume by 'elements' you mean 'rows' but I'm not sure whether you just mean that you have a lot of rows or whether you're describing a phenomenon that only occurs as a result of adding rows dynamically.

    My guess would be that injecting the buttons is causing the grid view to increase in height but the framework is oblivious to this height change, so the surrounding layouts aren't heighting their containers correctly. You might want to try calling updateLayout to kick it into resizing everything. You may need to do that on a slight delay to ensure it happens after the injection of the buttons.

    More than that and I'd need a proper test case.

  8. #58
    Sencha User
    Join Date
    Mar 2012
    Posts
    13
    Vote Rating
    1
    LuckyBlade is on a distinguished road

      0  

    Default Resize

    Resize


    Yes, you are right and understood what I mean. I want to use auto-height. "Elements" the same as "rows".
    Firstly, I'm creating a Grid and after that I'm adding elements to Grid's store. I don't know how many elements I need to add. If Grid hasn't got ComponentColumn doesn't matter how many rows are adding, Grid resize correctly, doing auto-height.
    If Grid contains ComponentColumn after adding 1 - 5(it depends on height components) rows Grid resize right. Adding 6 or more rows you can see on previous picture.
    I notice that If resize browser window Grid are increasing height to necessary and showing all content normally. U
    pdateLayout to viewport doesn't help.

    Problem appears after updating Ext from 4.0.7 to 4.1.1

  9. #59
    Sencha User
    Join Date
    Mar 2012
    Posts
    13
    Vote Rating
    1
    LuckyBlade is on a distinguished road

      0  

    Default Resize example

    Resize example


    Please, see the example and try collapse Grid.
    Code:
    var columns = [];
            var col1 = {
                flex: 1,
                dataIndex: "col1"
            }
            columns.push(col1);
            var col2 = {
                flex: 1,
                xtype: 'componentcolumn',
                hideable: false,
                renderer: function (value, metaData, record) {
                    return Ext.create(Ext.Button, { text: "test" });
                },
                dataIndex: "col2"
            }
            columns.push(col2);
            var store = Ext.create('Ext.data.Store', {
                fields: ["col1", "col2"]
            });
            var gridPanel = Ext.create('WyaClient.items.view.evo.Panel', {
                autoShow: true,
                autoScroll: true,
                collapsible: true,
                animCollapse: true,
                store: store,
                //height: 1000,
                frame: true,
                renderTo: Ext.getBody(),
                columns: columns
            });
            for (var i = 0; i < 20; i++) {
                gridPanel.getStore().add({
                    col1: i,
                    col2: ""
                });
            }

  10. #60
    Sencha User skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,343
    Vote Rating
    249
    skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of

      0  

    Default


    Thanks for the test case.

    It needs a call to updateLayout to accommodate the height change. To make things a little easier I've bundled it into a patch:

    Code:
    Ext.define('Skirtle.grid.column.ComponentPatch', {
        override: 'Skirtle.grid.column.Component',
    
        onViewChange: function() {
            this.callParent();
    
            this.updateGridLayout();
        },
    
        updateGridLayout: Ext.Function.createBuffered(function() {
            this.up('tablepanel').updateLayout();
        }, 10)
    });
    The buffering isn't strictly required but without it the layout will be run for every row, which is a bit excessive.

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar