Sencha ext js changing column text

Question

I want to call reconfigure on a grid to change the column text like this example

http://docs.sencha.com/extjs/4.2.0/extjs-build/examples/build/KitchenSink/ext-theme-neptune/#reconfigure-grid

However I want to do it from an external control that has nothing to do with the grid.

Need to find the reference to the grid because when I pass it into a variable, I get a no method error when calling reconfigure

Any help appreciate thanks

EDIT

If you have a look at the link in the post, then this function:

onShowOfficesClick: function(){ 
var grid = this.down('grid'); 
Ext.suspendLayouts();
grid.setTitle('Employees');
grid.reconfigure(this.createOfficeStore()

Shows how to reconfigure a grid.

What I'm trying to do is get the grid reference from an external function, not sure if its possible

Here's some of my code

var Social_Environment_Grid = Ext.create('Ext.data.Store', {

Goes to to create a store, not so relevant

Then is a seperate Jquery function I want to call

Social_Environment_Grid.reconfigure(false, newColumArray)

But I get an error Social_Environment_Grid has no method reconfigure, so I guess this is not the correct object reference

Hope this makes sense

Edit Fixed

Fixed it thanks to everyones comments and answers here was my problem

 var Panel1 = Ext.create('Ext.panel.Panel', {
    layout: 'fit',
    height: 400,
    layout: {
        type: 'vbox', // Arrange child items vertically
        align: 'stretch', // Each takes up full width
        padding: 5
    },
    items: [{ // Results grid specified as a config object with an xtype of 'grid'
        xtype: 'grid',
        id: 'Panelxx1',
        columns: [

Then call

Ext.getCmp('Panelxx1').reconfigure(false,alternativeIndex);

I was not referencing the grid, and also not calling the object reference correctly, thanks for everyone's help

There is a reconfigure method in Ext.grid.Panel.prototype so, except if you'd explicitly deleted it (from the prototype!), the variable you end up with is not a reference to a grid panel... Could you show us your code so we can see what's wrong? — rixo
Thanks for your response rixo , I've added some more code to the question — Michael L Watson
Your code doesn't really make sense. The variable you declared refers to a store, not a grid. — Evan Trimboli

rixo rixo · Accepted Answer · 2013-05-31T08:15:34

What you must do in order to update your grid's view is calling the reconfigure method on the grid object. That is, the grid variable in your code example.

As stated in the doc, this method accepts a new store as its first argument, and a new columns array as its second, both optional.

So, if the fields of your data model change, you must create a new store with the updated fields. If your store is based on a Model, you can first update it using the static setField method (e.g. My.Model.setFields(...)), and then, your create a new store using this model, and you pass it to the grid's reconfigure method.

If your data fields do not change, you can skip the first argument like you do in your example, and use only an array for the new columns.

Now, your problem seems to be to get a reference to your grid object in the place you want to call reconfigure. There are many ways to achieve this. The simplest one (except using a global variable, which you should really never do), would be to give your grid an id with the id config option, and when you need your grid, you can get a reference with Ext.getCmp(myGridId). This is probably not the cleanest in your situation, but we would need to know the context in which you want to call reconfigure in order to give more appropriated suggestions.

Sencha ext js changing column text

1 Answers