1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    12
    Answers
    1
    Vote Rating
    0
    Kaiser_Wilhelm is on a distinguished road

      0  

    Default Unanswered: Dynamic grid columns shift on row entry

    Unanswered: Dynamic grid columns shift on row entry


    Hello,
    So I have a problem right now where I have a grid that lets the user fill out a form and add it to the grid. The problem occurs when the number of rows is bigger than the grid size. When this happens, the column that has the "flex" attribute is shifted off and all the records fly to the left. I copy and pasted the example here http://docs.sencha.com/ext-js/4-0/#!...l/restful.html and I still got the same results. Is there a bug in earlier 4.x versions and the example is up to date? or could it be the container that is holding my grid? this is my container:

    var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
    clicksToMoveEditor: 1,
    autoCancel: false
    });


    var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    columns: [ gridColumns['grid'] ],
    border: true,
    enableColumnResize: false,
    enableColumnMove: false,
    height: 200,
    frame: true,
    tbar: [
    {
    text: 'Add Row',
    handler : function() {
    rowEditing.cancelEdit();


    var r = Ext.create('group_model', {
    group: 'Group',
    instrument: 'Instruments',
    minute: 1
    });


    store.insert(0, r);
    rowEditing.startEdit(0, 0);
    }
    },
    '-',
    {
    itemId: 'removeRow',
    text: 'Remove Row',
    handler: function() {
    var sm = grid.getSelectionModel();
    rowEditing.cancelEdit();
    store.remove(sm.getSelection());
    if (store.getCount() > 0) {
    sm.select(0);
    }
    },
    disabled: true
    },
    '->',
    createSingleDate(),
    '-',
    createLoadButton()
    ],
    bbar: [
    {
    xtype: 'button',
    id: 'remove_all_button',
    text : 'Remove All Rows',
    disabled: true,
    handler: function() {
    store.removeAll();
    }
    }
    ],
    plugins: [rowEditing],
    listeners: {
    'selectionchange': function(view, records) {
    grid.down('#removeRow').setDisabled(!records.length);

    if(!records.length)
    {
    Ext.getCmp('remove_all_button').disable();
    Ext.getCmp('load_button').disable();
    }
    else
    {
    Ext.getCmp('remove_all_button').enable();
    Ext.getCmp('load_button').enable();
    }
    }
    }
    });

    var panel = Ext.create('Ext.Panel', {
    border: false,
    items: [
    grid
    ]
    });


    var tabs = Ext.create('Ext.tab.Panel', {
    id: 'tab_panel',
    bodyStyle: 'padding: 5px',
    items: [
    {
    title: '',
    id: 'tab',
    items: panel
    }
    ]
    });


    displayPanel = new Ext.Panel ({
    renderTo : 'box_main',
    id: 'display_panel',
    border: false,
    width: 1000,
    items: tabs
    });
    Last edited by Kaiser_Wilhelm; 1 Mar 2012 at 9:49 AM. Reason: updated to include my grid

  2. #2
    Sencha User
    Join Date
    Jan 2012
    Posts
    12
    Answers
    1
    Vote Rating
    0
    Kaiser_Wilhelm is on a distinguished road

      0  

    Default quick fix

    quick fix


    Okay so I got this to work but only after I moved the grid into the same JS file that my containers were in. I had it originally in a seperate JS file and loaded that file first. Any idea why having it in the same file as the containers would make it work?

  3. #3
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,099
    Answers
    113
    Vote Rating
    96
    Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light

      0  

    Default


    it shouldnt matter if you have code split in multiple files. However, the grid should be defined when you use it in the items of the panel. What you could try is to add the grid to the panel after creating the grid and not when the panel is created. have no idea about your original problem though.

  4. #4
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,099
    Answers
    113
    Vote Rating
    96
    Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light

      0  

    Default


    try adding:

    Code:
    autoScroll: true
    to your grid. This will make scrollbars appear when there are more records than the height of the grid. It defaults to false according to the API docs.

Thread Participants: 1

Tags for this Thread