1. #1
    Sencha User
    Join Date
    Jun 2008
    Location
    Baltimore, Maryland
    Posts
    19
    Vote Rating
    0
    Michael Reach is on a distinguished road

      0  

    Default Changing column configuration

    Changing column configuration


    I have been trying to modify the columns in an ext-4 grid (actually created programmatically by ewd) after rendering. I've seen some documentation that tells me to use reconfigure(store,columns), for instance,

    grid=Ext.getCmp('rslGrid');
    store=grid.store;
    cols=grid.columns;
    grid.reconfigure(store,cols); // which should just keep it the way it was?

    The result is:

    grid.reconfigure(store,cols)
    undefined
    cols
    []

    grid.columns
    []


    where the grid vanishes and all the columns go away. The same happens if I define the columns myself.

    What am I doing wrong?

    Thanks,
    Michael

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,112
    Vote Rating
    470
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    This should work:

    Code:
    Ext.create('Ext.data.Store', {
        storeId:'simpsonsStore',
        fields:['name', 'email', 'change'],
        data:{'items':[
            { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "change":100  },
            { 'name': 'Bart', "email":"bart@simpsons.com", "change":-20  },
            { 'name': 'Homer', "email":"home@simpsons.com",  "change":23   },
            { 'name': 'Marge', "email":"marge@simpsons.com", "change":-11   }
        ]},
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });
    
    var mycolumns = [
            { header: 'NameA',  dataIndex: 'name' },
            { header: 'EmailA', dataIndex: 'email', flex: 1 },
            { header: 'ChangeA', dataIndex: 'change', tdCls: 'x-change-cell' }
    ];
    
    var grid = Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [
            { header: 'Name',  dataIndex: 'name' },
            { header: 'Email', dataIndex: 'email', flex: 1 },
            { header: 'Change', dataIndex: 'change', tdCls: 'x-change-cell' }
        ],
        height: 200,
        width: 400,
        viewConfig: {
            getRowClass: function(record, index) {
                var c = record.get('change');
                if (c < 0) {
                    return 'price-fall';
                } else if (c > 0) {
                    return 'price-rise';
                }
            }
        },
        renderTo: Ext.getBody()
    });
    
    grid.reconfigure(grid.store,mycolumns);
    Regards,
    Scott.

  3. #3
    Sencha User
    Join Date
    Jun 2008
    Location
    Baltimore, Maryland
    Posts
    19
    Vote Rating
    0
    Michael Reach is on a distinguished road

      0  

    Default


    Thank you, that works!
    Michael

  4. #4
    Sencha User
    Join Date
    Jun 2008
    Location
    Baltimore, Maryland
    Posts
    19
    Vote Rating
    0
    Michael Reach is on a distinguished road

      0  

    Default


    I'm also running into an odd problem with my two leftmost headers, an actioncolumn plus a regular text header. (All the later headers, which have the same setup, don't have this problem.)
    The second column has text:'Entry', which should be the header; it's not visible. The first column (which has no header text assigned) should be 25 wide; it looks like about 100 wide. The second column should be 200 wide; it looks much thinner, more like 100 also.

    However, if in Google Developer Tools you hover over
    <div id="gridcolumn-1186-titleEl" class="x-column-header-inner" style="height:auto; padding-top: 3px; ">
    more of the header lights up to the left, including what looks like part of the left column header.
    This is also where the data in the column below shows up - which is actually where it's supposed to be, since the first column should be 25 px wide. It's just the header that looks wrong.

    On the other hand, on the page itself, if you hover over the second column, it only lights up where it appears to be, out to the vertical dividing line, about 100 px worth.

    Finally, as you go to the left across the vertical dividing line, an JS error appears in Google Developer from ext-all.js:
    Uncaught TypeError: Cannot call method 'isOnLeftEdge' of undefined

    Any idea of what's causing this? I've looked at the html of the second column header, with its classes, and it appears identical to the fourth column header which works fine.
    Thanks,
    Michael

  5. #5
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,112
    Vote Rating
    470
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Could you modify my example to illustrate your problem and send a screen as well?

    Scott.

  6. #6
    Sencha User
    Join Date
    Jun 2008
    Location
    Baltimore, Maryland
    Posts
    19
    Vote Rating
    0
    Michael Reach is on a distinguished road

      0  

    Default


    I'm trying to provide an example, but I'm not too experienced in how to do it. Is there an easy way to see how my code looks in Ext-4 once I've provided it? As I said, it's actually generated automatically using ewd.
    Anyhow, here's what I did from the console of the web page, Google Developer:
    I got the grid and store from the Javascript that had been sent by ewd to the page. I can also get it from the console,
    grid=Ext.getCmp('rslGrid'), store=grid.store; // store
    ----------------------------------------------------------------
    EWD.ext4.grid['rslGrid'] = {
    combo: {
    index: {},
    store: {}
    }
    };


    Ext.define('rslGridModel', {
    extend: 'Ext.data.Model',
    fields: [{
    name: 'zewdRowNo'
    }, {
    name: 'col1'
    }, {
    name: 'col2'
    }, {
    name: 'data1'
    }, {
    name: 'type1'
    }, {
    name: 'type2'
    }]
    });
    var rslStore = Ext.create('Ext.data.Store', {
    model: 'rslGridModel',
    id: 'rslStore',
    data: [{
    zewdRowNo: '1',
    col1: ' `507 = HEPATITIS B SURFACE ANTIBODY',
    col2: '#.01 NAME = HEPATITIS B SURFACE ANTIBODY',
    data1: '60^507,^1',
    type1: 3,
    type2: 1
    }, {
    zewdRowNo: '2',
    col2: '#3 TYPE = BOTH',
    type2: 1
    }, {
    zewdRowNo: '3',
    col2: '#4 SUBSCRIPT = CHEM, HEM, TOX, SER, RIA, ETC.',
    type2: 1
    }, {
    zewdRowNo: '4',
    col2: '#5 LOCATION (DATA NAME) = CH;583;1',
    type2: 1
    }, {
    zewdRowNo: '5',
    col2: '#9 LAB COLLECTION SAMPLE = BLOOD ',
    type2: 1
    }, {
    zewdRowNo: '6',
    col2: '#13 FIELD = DD(63.04,583,',
    type2: 1
    }, {
    zewdRowNo: '7',
    col2: '#17 HIGHEST URGENCY ALLOWED = ASAP',
    type2: 1
    }, {
    zewdRowNo: '8',
    col2: '#51 PRINT NAME = H.BSURF',
    type2: 1
    }, {
    zewdRowNo: '9',
    col2: '#56 PRINT ORDER = 39',
    type2: 1
    }, {
    zewdRowNo: '10',
    col2: '#400 DATA NAME = HEPATITIS B SURFACE ANTIBODY',
    type2: 1
    }, {
    zewdRowNo: '11',
    col2: '#410 INPUT TRANSFORM = K:$L(X)7!($L(X)1) X',
    type2: 1
    }, {
    zewdRowNo: '12',
    col2: '#411 DATA TYPE = FREE TEXT',
    type2: 1
    }, {
    zewdRowNo: '13',
    col2: '#100 SITE/SPECIMEN',
    data2: '60.01^507,^0',
    type2: 4
    }, {
    zewdRowNo: '14',
    col2: '#300 COLLECTION SAMPLE',
    data2: '60.03^507,^0',
    type2: 4
    }, {
    zewdRowNo: '15',
    col2: '#2 SYNONYM',
    data2: '60.1^507,^0',
    type2: 4
    }]
    });


    Ext.create("Ext.panel.Panel", {
    id: "rslPanel",
    items: [{
    columns: cols,
    frame: true,
    id: "rslGrid",
    resizable: true,
    shrinkwrap: true,
    store: rslStore,
    xtype: "gridpanel"
    }]
    });


    ----------------------------------------------------------------
    The columns I got from the Javascript on the page that reconfigures the grid, so I get the cols that it's using. Here is the cols object (somewhat simplified).
    ----------------------------------------------------------------
    > JSON.stringify(cols,null,4)"[ { "dataIndex": "zewdRowNo", "hidden": true, "triStateSort": false, "sortable": true, "width": 100 }, { "draggable": false, "hideable": false, "dataIndex": "type1", "sortable": false, "width": 25, "xtype": "actioncolumn", "items": [ { "icon": "/vista/ext-4/examples/shared/icons/fam/cog.png", "tooltip": "Click here to open", "hasActionConfiguration": true }, { "icon": "/vista/ext-4/examples/shared/icons/fam/cog_edit.png", "tooltip": "Click here to open", "hasActionConfiguration": true }, { "icon": "/vista/ext-4/examples/shared/icons/fam/folder.gif", "tooltip": "Click here to open", "hasActionConfiguration": true }, { "icon": "/vista/ext-4/examples/shared/icons/fam/folder-open.gif", "tooltip": "Click here to open", "hasActionConfiguration": true } ], "triStateSort": false }, { "draggable": false, "text": "Entry", "hideable": false, "dataIndex": "col1", "sortable": false, "width": 200, "triStateSort": false }, { "draggable": false, "hideable": false, "dataIndex": "type2", "sortable": false, "width": 25, "xtype": "actioncolumn", "items": [ { "icon": "/vista/ext-4/examples/shared/icons/fam/cog.png", "tooltip": "Click here to open", "hasActionConfiguration": true }, { "icon": "/vista/ext-4/examples/shared/icons/fam/cog_edit.png", "tooltip": "Click here to open", "hasActionConfiguration": true }, { "icon": "/vista/ext-4/examples/shared/icons/fam/folder.gif", "tooltip": "Click here to open", "hasActionConfiguration": true }, { "icon": "/vista/ext-4/examples/shared/icons/fam/folder-open.gif", "tooltip": "Click here to open", "hasActionConfiguration": true } ], "triStateSort": false }, { "draggable": false, "text": "Fields", "hideable": false, "dataIndex": "col2", "sortable": false, "width": 200, "triStateSort": false }]
    "

    -----------------------------------------
    I apologize that this isn't exactly a working example (and the cols is somewhat simplified from my own page). Maybe you could advise me how to get that from the visible web page itself.
    However, I did verify that using this store, and this cols, and grid.reconfigure(store,cols), yields a page with the quirky behavior in the first two columns that I asked about. [With the caveat that I don't know if that's the case if the page were created from scratch that way, since I don't know how to do that. As I said, my page was actually generated automatically. Don't know if that matters.]

    Thanks,
    Michael

  7. #7
    Sencha User
    Join Date
    Jun 2008
    Location
    Baltimore, Maryland
    Posts
    19
    Vote Rating
    0
    Michael Reach is on a distinguished road

      0  

    Default


    "
    [With the caveat that I don't know if that's the case if the page were created from scratch that way, since I don't know how to do that. As I said, my page was actually generated automatically. Don't know if that matters.]"
    Follow-up on this: I think it does matter. I tried getting rid of the grid on my page:
    grid.destroy()

    and rebuilding it using the pieces I posted, and I got a grid without any problems. So I'm assuming that the problems are because of some piece I didn't include (which was still there after the reconfigure); again, not sure how to get everything.
    Michael

  8. #8
    Sencha User
    Join Date
    Jun 2008
    Location
    Baltimore, Maryland
    Posts
    19
    Vote Rating
    0
    Michael Reach is on a distinguished road

      0  

    Default


    Update: I think my problem is fixed. I changed the reconfigure method to fire on a beforerender rather than a render event. That way, whatever problem the initial rendering was causing didn't happen, and the page looks okay now.
    Still, I would like to know how to get the information you needed off the page, so I can get proper info for you-all next time.
    Thanks,
    Michael

Thread Participants: 1