1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    27
    Vote Rating
    0
    dissectcode is on a distinguished road

      0  

    Default Delete a row in a grid in Architect

    Delete a row in a grid in Architect


    SOLUTION :

    grid.getView().getRow(rowIndex).style.display = 'none';

    FROM :
    http://stackoverflow.com/questions/5197933/how-to-hide-rows-in-extjs-gridpanel



    Hi - I followed this tutorial :
    http://docs.sencha.com/architect/2/#...st_desktop_app

    to build my first app. I added a delete button the end of each row and want to delete the row when clicked. OR JUST MAKING IT HIDDEN IS BETTER

    My problem is that all the information I found online give this simple solution :

    Code:
    var grid = ...; // Your grid.
    
    var button = new Ext.Button({
        text: 'Delete row',
        handler: function() {
             var record = grid.getSelectionModel().getSelected();
    
            if (record !== undefined) {
                grid.store.remove(record);
            } 
        }
    });
    but the way Architect sets up the code, there IS NO "grid" variable. There is only :

    Ext.applyIf(me, {

    How else can I get the row and delete it? Thank you

    here is the code Architect made :

    Code:
    Ext.define('MyApp.view.Cars', {
        extend: 'Ext.panel.Panel',
    
        frame: true,
        height: 536,
        width: 617,
        autoScroll: true,
        layout: {
            align: 'stretch',
            type: 'vbox'
        },
        title: 'Cars',
        titleAlign: 'center',
    
        initComponent: function() {
            var me = this;
    
            Ext.applyIf(me, {
                dockedItems: [
                    {
                        xtype: 'gridpanel',
                        flex: 1,
                        dock: 'top',
                        height: 174,
                        width: 654,
                        store: 'CarDataStore',
                        viewConfig: {
                            stateful: true,
                            enableTextSelection: false,
                            listeners: {
                                viewready: {
                                    fn: me.onGridviewViewReady,
                                    scope: me
                                }
                            }
                        },
                        columns: [
                            {
                                xtype: 'numbercolumn',
                                autoRender: false,
                                autoShow: false,
                                width: 47,
                                dataIndex: 'manufacturer',
                                text: 'ID',
                                format: '0000'
                            },
                            {
                                xtype: 'gridcolumn',
                                width: 133,
                                dataIndex: 'model',
                                text: 'File Name'
                            },
                            {
                                xtype: 'gridcolumn',
                                width: 60,
                                dataIndex: 'wiki',
                                text: 'Producer'
                            },
                            {
                                xtype: 'gridcolumn',
                                width: 244,
                                dataIndex: 'img',
                                text: 'Title'
                            },
                            {
                                xtype: 'datecolumn',
                                width: 87,
                                dataIndex: 'datePosted',
                                text: 'Date Posted',
                                format: 'm/d/Y'
                            },
                            {
                                xtype: 'actioncolumn',
                                width: 34,
                                stateful: true,
                                align: 'center',
                                menuDisabled: true,
                                items: [
                                    {
                                        handler: function(view, rowIndex, colIndex, item, e, record, row) {
    
                                            //alert("Deleting : " + row.childNodes.item(1).textContent);
                                            alert("Delete  : " + record.getData().model);
    
    
    
                                        },
                                        icon: 'data/delete.gif',
                                        tooltip: 'Remove Entry'
                                    }
                                ]
                            }
                        ],
                        listeners: {
                            select: {
                                fn: me.onGridpanelSelect,
                                scope: me
                            }
                        }
                    }
                ],
                items: [
                    {
                        xtype: 'panel',
                        flex: 1,
                        margins: '5 0 0 0',
                        height: 166,
                        itemId: 'previewPanel',
                        padding: '',
                        tpl: [
                            '<img src="data/{icon}" style="float: right" />',
                            '',
                            '<div style="padding: 5px">',
                            ' ID: {manufacturer}<br>',
                            ' File: <a href="data/{model}" target="_blank">{model}</a><br>',
                            ' Classification: {classification}<br>',
                            ' Author: {author}<br>',
                            ' Last Modified: {modified_date}<br>',
                            '</div>'
                        ],
                        title: 'Preview',
                        titleAlign: 'center'
                    },
                    {
                        xtype: 'panel',
                        flex: 1,
                        margins: '5 0 0 0',
                        height: 181,
                        width: 647,
                        layout: {
                            type: 'fit'
                        },
                        title: 'Viewing Statistics',
                        titleAlign: 'center',
                        items: [
                            {
                                xtype: 'chart',
                                height: 250,
                                itemId: 'frequencyChart',
                                width: 400,
                                animate: true,
                                insetPadding: 20,
                                store: 'CarPreviewStore',
                                axes: [
                                    {
                                        type: 'Category',
                                        fields: [
                                            'name'
                                        ],
                                        position: 'bottom'
                                    },
                                    {
                                        type: 'Numeric',
                                        fields: [
                                            'rating'
                                        ],
                                        majorTickSteps: 4,
                                        position: 'left',
                                        title: 'Frequency',
                                        maximum: 5,
                                        minimum: 0
                                    }
                                ],
                                series: [
                                    {
                                        type: 'column',
                                        label: {
                                            display: 'insideEnd',
                                            field: 'rating',
                                            color: '#333',
                                            'text-anchor': 'middle'
                                        },
                                        xField: 'name',
                                        yField: [
                                            'rating'
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                ]
            });
    
            me.callParent(arguments);
        },
    
    });

  2. #2
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,369
    Vote Rating
    128
    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


    Hrm, not sure your specific use case, but in general I would not recommend directly manipulating the markup that Grid generates.

    Grid is a databound component and will react to all changes that happen in the store. So to remove a row in the grid, you simply remove the record from the store.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  3. #3
    Sencha User
    Join Date
    Jul 2012
    Posts
    27
    Vote Rating
    0
    dissectcode is on a distinguished road

      0  

    Default


    you're absolutely right. i got "in trouble" for doing it my shortcut way

Thread Participants: 1