ExtJs - 自定义 class 分辨率
ExtJs - custom class resolution
假设我有一个名为 "view." 的具体视图,我希望在运行时能够调用 Ext.create("view_1")
或 Ext.create({ xtype: "view_5" })
,它们将创建 [=35= 的实例].
因此,任何匹配正则表达式的 xtype:/view_[0-9]+/ 都应该创建一个 "view"。
这可能吗,如果可能怎么办?
更多详情,
我们为用户添加了创建自定义报告的功能。它们定义菜单名称、标题、列集和要使用的数据约束。每个自定义报告都是使用相同的 xtype view
构建的。
当我们保存这些自定义报告的状态时会出现问题。通常,我们使用 xtype 作为 key 进行存储。因此,如果所有自定义报告都是相同的 xtype,它们将覆盖彼此的状态。
直接的解决方法是为每个自定义报告设置不同的 xtype。所以 "view_1", "view_5", "view_1008"...view_[0-9]+
是与 custom report #1, custom report #5, custom report #1008...custom report [0-9]+
关联的 xtype。但它们都应该使用 xtype view
.
构造
如果我们创建别名,我们需要添加 view_[0-9]+
的所有 reasonable/possible 形式。当我们有更多类型的动态视图时,我不确定这种方法能否很好地扩展。
无法从正则表达式创建视图。
在我看来,最好的方法是将别名设置为字符串列表。
示例:
Ext.define('SomeView', {
alias: ['widget.view_1', 'widget.view_2', 'widget.view_3', 'widget.view_4' ...],
});
更新(根据评论):
也许你想创建多个视图(相同的定义),id 如下:
Ext.create("SomeView", {
id: "view_1",
});
Ext.create("SomeView", {
id: "view_2",
});
更新:
另一种方法是覆盖 Ext.create
函数。
示例 https://fiddle.sencha.com/#view/editor&fiddle/32lj
Ext.apply(Ext, {
_create: Ext.create
});
Ext.override(Ext, {
create: function () {
var name = arguments[0],
nameType = typeof name;
if(nameType == 'string'){
let regex = /widget\.viewx_[0-9]+/;
let found = name.match(regex);
if (found) {
name = "widget.viewx";
}
}
return Ext._create(name, arguments[1], arguments[2], arguments[3]);
}
});
和用法:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create("Ext.panel.Panel", {
width: 300,
height: 300,
renderTo: Ext.getBody(),
items: [{
xtype: 'viewx',
fieldLabel: "AA"
}, {
xtype: 'viewx_1',
fieldLabel: "AA"
}, {
xtype: 'viewx_2',
fieldLabel: "AA"
}]
});
}
});
假设我有一个名为 "view." 的具体视图,我希望在运行时能够调用 Ext.create("view_1")
或 Ext.create({ xtype: "view_5" })
,它们将创建 [=35= 的实例].
因此,任何匹配正则表达式的 xtype:/view_[0-9]+/ 都应该创建一个 "view"。
这可能吗,如果可能怎么办?
更多详情,
我们为用户添加了创建自定义报告的功能。它们定义菜单名称、标题、列集和要使用的数据约束。每个自定义报告都是使用相同的 xtype view
构建的。
当我们保存这些自定义报告的状态时会出现问题。通常,我们使用 xtype 作为 key 进行存储。因此,如果所有自定义报告都是相同的 xtype,它们将覆盖彼此的状态。
直接的解决方法是为每个自定义报告设置不同的 xtype。所以 "view_1", "view_5", "view_1008"...view_[0-9]+
是与 custom report #1, custom report #5, custom report #1008...custom report [0-9]+
关联的 xtype。但它们都应该使用 xtype view
.
如果我们创建别名,我们需要添加 view_[0-9]+
的所有 reasonable/possible 形式。当我们有更多类型的动态视图时,我不确定这种方法能否很好地扩展。
无法从正则表达式创建视图。 在我看来,最好的方法是将别名设置为字符串列表。 示例:
Ext.define('SomeView', {
alias: ['widget.view_1', 'widget.view_2', 'widget.view_3', 'widget.view_4' ...],
});
更新(根据评论): 也许你想创建多个视图(相同的定义),id 如下:
Ext.create("SomeView", {
id: "view_1",
});
Ext.create("SomeView", {
id: "view_2",
});
更新:
另一种方法是覆盖 Ext.create
函数。
示例 https://fiddle.sencha.com/#view/editor&fiddle/32lj
Ext.apply(Ext, {
_create: Ext.create
});
Ext.override(Ext, {
create: function () {
var name = arguments[0],
nameType = typeof name;
if(nameType == 'string'){
let regex = /widget\.viewx_[0-9]+/;
let found = name.match(regex);
if (found) {
name = "widget.viewx";
}
}
return Ext._create(name, arguments[1], arguments[2], arguments[3]);
}
});
和用法:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create("Ext.panel.Panel", {
width: 300,
height: 300,
renderTo: Ext.getBody(),
items: [{
xtype: 'viewx',
fieldLabel: "AA"
}, {
xtype: 'viewx_1',
fieldLabel: "AA"
}, {
xtype: 'viewx_2',
fieldLabel: "AA"
}]
});
}
});