Fatal编程技术网
  • javascript/
  • Javascript ExtJS 5:获取已定义类的initialConfig

Javascript ExtJS 5:获取已定义类的initialConfig

javascript extjs

Javascript ExtJS 5:获取已定义类的initialConfig,javascript,extjs,extjs5,Javascript,Extjs,Extjs5,我试图获取我在面板中定义和使用的类的initialConfig。通过初始配置，我想知道在面板中使用类时设置了什么，以及类的定义值是什么。下面是一个例子： Ext.define('MyViewModel', { extend: 'Ext.app.ViewModel', alias: 'viewmodel.myview', stores: { gridStore: { autoLoad: true, fields: ['name', 'email', 'p

我试图获取我在面板中定义和使用的类的
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
，但没有给出列。。。我意识到我可以直接查看网格的列，但如果用户对其中一列进行了某些更改（隐藏/重新排序），我不希望进行这些更改。是否有其他属性可供我查找？

您可能会弄脏手，然后使用配置对象的自引用自己进行操作

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（）声明以及在config对象后面的调用。 初始化过程中会丢失一些属性（例如“extend”属性），以避免克隆配置

看看这把小提琴：

您可以自己动手，使用config对象的自引用

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（）声明以及在config对象后面的调用。 初始化过程中会丢失一些属性（例如“extend”属性），以避免克隆配置

看看这把小提琴：

您可以自己动手，使用config对象的自引用

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（）声明以及在config对象后面的调用。 初始化过程中会丢失一些属性（例如“extend”属性），以避免克隆配置

看看这把小提琴：

您可以自己动手，使用config对象的自引用

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（）声明以及在config对象后面的调用。 初始化过程中会丢失一些属性（例如“extend”属性），以避免克隆配置

看看这把小提琴：

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

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);
工作示例

清除状态的积分：

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

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);
工作示例

清除状态的积分：

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

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);
工作示例

清除状态的积分：

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

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);
工作示例

清除状态的积分：

您为什么想要这个？用户案例是什么？基本上可以归结为我在网格上有stateful true，在工具栏上有一个Revert grid Preferences按钮。。。当用户单击该按钮时，我希望将网格恢复到其原始的非首选状态。我使用
reconfigure
来执行此操作，该操作可在其他未定义的网格上运行，如上文所述。您为什么需要此操作？用户案例是什么？基本上可以归结为我在网格上有stateful true，在工具栏上有一个Revert grid Preferences按钮。。。当用户单击该按钮时，我希望将网格恢复到其原始的非首选状态。我使用
reconfigure
来执行此操作，该操作可在其他未定义的网格上运行，如上文所述。您为什么需要此操作？用户案例是什么？基本上可以归结为我在网格上有stateful true，在工具栏上有一个Revert grid Preferences按钮。。。当用户单击该按钮时，我希望将网格恢复到其原始的非首选状态。我使用
reconfigure
来执行此操作，该操作可在其他未定义的网格上运行，如上文所述。您为什么需要此操作？用户案例是什么？基本上可以归结为我在网格上有stateful true，在工具栏上有一个Revert grid Preferences按钮。。。当用户单击该按钮时，我希望将网格恢复到其原始的非首选状态。我使用
reconfigure
来执行此操作，它可以在其他网格上工作，这些网格没有像我上面定义的那样。这是一个有趣的想法，但是我想我更愿意使用某种基类在initComponent中克隆配置之类的东西。我忽略了你的问题只是针对网格。这是一个有趣的想法，但是我想我更愿意使用某种基类在initComponent中克隆配置之类的东西。我忽略了你的问题只是针对网格。这是一个有趣的想法，但是我想我更愿意使用某种基类在initComponent中克隆配置之类的东西。我忽略了你的问题只是针对网格。这是一个有趣的想法，但我想我更愿意使用某种基类在initComponent中克隆配置之类的东西。我忽略了你的问题仅仅是针对网格。我担心会出现这种情况。除了创建一些基本的网格类和克隆状态管理所需的属性之外，我认为这是最简单的方法。我担心这必须做到。除了创建一些基本的网格类和克隆状态管理所需的属性之外，我认为这是最简单的方法。我担心这必须做到。除了创建一些基本的网格类和克隆状态管理所需的属性之外，我认为这是最简单的方法。我担心这必须做到。其他tha