ExtJS 5：获取已定义 class 的初始配置

Question

我正在尝试获取我在面板中定义和使用的 class 的 initialConfig。通过初始配置，我的意思是我想要在面板中使用 class 时设置的内容，以及 class 的定义值。这是一个例子：

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);
    }
  }
});

以及输出的内容：

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

所以在 afterrender 处理程序中，当我输出 initialConfig 时，我想看看在面板配置中为我的 class 设置了什么，以及 class 的定义属性，如列、标题等。我试过查看 config，但这并没有给我列...我意识到我可以直接查看网格的列，但如果用户对其中之一进行了更改 (hides/reorders)，我不希望进行这些更改。有没有其他的属性我可以参考一下？

Answer 1

您可以亲自动手，使用配置对象的自引用自行完成。

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());

请注意 saveConfigToMyself() 声明以及配置对象之后的调用。一些属性在初始化期间丢失（例如 "extend" 属性），以避免您可以克隆配置。

看看这个工作 fiddle:

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

Answer 2

您可以清除状态并使用原型的列重新配置网格：

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);

工作示例
https://fiddle.sencha.com/#fiddle/tp0
https://fiddle.sencha.com/#fiddle/tp1

清除状态的学分：
https://druckit.wordpress.com/2014/02/14/ext-js-4-grid-state-management/

ExtJS 5：获取已定义 class 的初始配置

ExtJS 5: Get initialConfig of defined class

javascript

extjs

extjs5