ExtJS 5:获取定义类的initialConfig

ExtJS 5: Get initialConfig of defined class

本文关键字：initialConfig 定义 获取 ExtJS      更新时间：2023-09-26

我试图获得我在面板中定义和使用的类的initialConfig。通过初始配置，我的意思是我想要在面板中使用类时设置的内容，以及类的定义值是什么。下面是一个例子:

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时，我想看看在面板的配置中为我的类设置了什么，以及类的定义属性，如列，标题等。我试着看config，但这并没有给我列…我意识到我可以直接查看网格的列，但是如果用户更改了其中一个列(隐藏/重新排序)，我不希望这些更改。我还能从别的性质上看出来吗?

您可以清除状态并重新配置带有原型列的网格:

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/小提琴/tp0
https://fiddle.sencha.com/小提琴/tp1

clear状态的功劳:
https://druckit.wordpress.com/2014/02/14/ext-js-4-grid-state-management/

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

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

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

查看这个工作小提琴:

https://fiddle.sencha.com/小提琴/传真照片

相关文章：