CODEWITHSUNDEEP
javascriptextjsextjs5
incutonez
incutonez

Reputation: 3331

ExtJS 5: Get initialConfig of defined class

I'm trying to get the initialConfig of a class that I have defined and used in a panel. By initial config, I mean I want what was set when using the class in the panel, as well as what the class's defined values are. Here's an example:

Ext.define('MyViewModel', {
  extend: 'Ext.app.ViewModel',
  alias: 'viewmodel.myview',
  stores: {
    gridStore: {
      autoLoad: true,
      fields: ['name', 'email', 'phone', 'userval', 'doj'],
      proxy: {
        type: 'ajax',
        url: 'data1.json',
        reader: {
          type: 'json'
        }
      }
    }
  }
});

Ext.define('MyGrid', {
  extend: 'Ext.grid.Panel',
  xtype: 'myGrid',
  viewModel: {
    type: 'myview'
  },
  title: 'Simpsons',
  stateful: true,
  multiSelect: true,
  stateId: 'stateGrid',
  closable: true,
  bind: {
    store: '{gridStore}'
  },
  columns: [{
    text: 'Name',
    dataIndex: 'name',
    stateId: 'name'
  }, {
    text: 'Email',
    dataIndex: 'email',
    flex: 1,
    stateId: 'email'
  }, {
    text: 'Phone',
    dataIndex: 'phone',
    stateId: 'phone'
  }, {
    text: 'Date of Joining',
    dataIndex: 'doj',
    flex: 1,
    stateId: 'date'
  }]
});
Ext.define('MyController', {
  extend: 'Ext.app.ViewController',
  alias: 'controller.myview'
});
Ext.state.Manager.setProvider(Ext.create('Ext.state.LocalStorageProvider'));
var panel = Ext.create('Ext.panel.Panel', {
  title: 'My Panel',
  controller: 'myview',
  height: 400,
  width: 400,
  layout: 'fit',
  renderTo: Ext.getBody(),
  items: [{
    xtype: 'myGrid',
    reference: 'something'
  }],
  listeners: {
    afterrender: function(panel) {
      console.log(panel.lookupReference('something').initialConfig);
    }
  }
});

And what gets outputted:

Object {
  xtype="myGrid",
  reference="something"
}

So in the afterrender handler, when I output initialConfig, I would like to see what was set up in the panel's config for my class, as well as the class's defined properties, like columns, title, etc. I've tried looking at config, but that doesn't give me the columns... I realize I can look at the grid's columns directly, but if the user changes something to one of them (hides/reorders), I don't want those changes. Is there some other property that I can look to for this?

Upvotes: 0

Views: 622

Answers (2)

Tarabass
Tarabass

Reputation: 3152

You can clear the state and reconfigure the grid with the columns of the prototype:

var grid = panel.lookupReference('something'),
    store = grid.getStore();

// Clear the state of the grid
Ext.state.Manager.clear(grid.stateId);
// Sort the store back to default
store.sort('first', 'ASC');
// Reconfigure the grid
grid.reconfigure(store, grid.self.prototype.columns);

Working example
https://fiddle.sencha.com/#fiddle/tp0
https://fiddle.sencha.com/#fiddle/tp1

Credits for the clear state:
https://druckit.wordpress.com/2014/02/14/ext-js-4-grid-state-management/

Upvotes: 2

Lucian Depold
Lucian Depold

Reputation: 2017

You could get your hands dirty and do it yourself using the self-reference of the config object.

Ext.define('MyGrid', {

    saveConfigToMyself:function() {
        this.originalConfig = this;
        return this;
    },

  extend: 'Ext.grid.Panel',
  xtype: 'myGrid',
  viewModel: {
    type: 'myview'
  },
  title: 'Simpsons',
  stateful: true,
  multiSelect: true,
  stateId: 'stateGrid',
  closable: true,
  bind: {
    store: '{gridStore}'
  },
  columns: [{
    text: 'Name',
    dataIndex: 'name',
    stateId: 'name'
  }, {
    text: 'Email',
    dataIndex: 'email',
    flex: 1,
    stateId: 'email'
  }, {
    text: 'Phone',
    dataIndex: 'phone',
    stateId: 'phone'
  }, {
    text: 'Date of Joining',
    dataIndex: 'doj',
    flex: 1,
    stateId: 'date'
  }]
}.saveConfigToMyself());

Please notice the saveConfigToMyself() declaration and also the call after the the config object. Some attributes are lost during initialization (for example the "extend" attribute),to avoid that you could clone the config.

Check out this working fiddle:

https://fiddle.sencha.com/#fiddle/tpo

Upvotes: 1

Related Questions