如何通过组合其他表单字段来创建自定义表单字段？

Question

如何通过组合其他表单字段来创建自定义表单字段？

6

我想在ExtJS 4中将几个标准表单字段分组成一个自定义表单字段。基本上，我想要一个类别选择器：当您从第一个下拉框中选择一个类别时，会出现一个次级下拉框，显示其子类别，以此类推。

我已经编写了此逻辑，并且所有内容都封装在一个扩展了Ext.form.FieldSet的自定义组件中。但是，我想在具有记录的表单中使用此组件，因此我猜想需要将其转换为具有setValue、getValue和验证器等功能的字段。我找到了Ext.form.field.Base，它提供了所有这些功能，但我找不到一种将两个组件（如Ext.form.FieldSet容器+Ext.form.field.base字段）和谐组合的方法。

请问是否有人知道我如何实现这一点？

先行致谢！

- liviucmg

2个回答

2

我用了一种不同的方法来实现这个，但需要声明：它在ExtJS 4.1中停止工作了。

我扩展了Ext.container.Container，然后添加了Ext.form.field.Field作为mixin。从那里开始，我实现了getValue/setValue。一切都很顺利，但突然在4.1中出现了各种问题。

- Nathan Wolf

你能把你的代码放在某个地方吗？这样或许我们都可以让它正常工作。 - Misiu

很抱歉，我不能提供代码了，因为我已经不在那家公司工作了，也没有代码了！ - Nathan Wolf

1

我可以尝试在某个时间点复现它，但是我已经有一段时间没有使用EXTjs了。虽然它并不是非常复杂-基本上就像上面描述的那样，我唯一“棘手”的事情就是将Form.field.Field添加为mixin，这样“聚合”字段就可以像普通单个字段一样行为，一旦实现了getValue和setValue。从那里开始，处理包含的子字段就是一个相对简单的问题...希望这有所帮助！但我希望有更好的方法，我从来没有找到过。 - Nathan Wolf

1

感谢您的描述 :) 我找到了您在这里描述的解决方案：https://dev59.com/n2025IYBdhLWcg3wNC92#17059073。我想要创建具有多个控件的自定义表单字段。我先找到了您的帖子，然后再感谢您的描述，我找到了所附的链接 :) - Misiu

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Molecular Man · Accepted Answer

以下解决方案可能不是最佳的，但应该可以工作。

扩展 Ext.form.field.Base。然后在 afterrender 处理程序中创建 Ext.form.FieldSet 并将其附加到字段的 inputEl 上。然后，当然要重写字段的 valueToRaw，setRawValue，...

这是一段代码：

Ext.define('Ext.ux.form.field.MyCoolField', {
    extend:'Ext.form.field.Base',
    requires: ['Ext.util.Format', 'Ext.XTemplate'], 
    fieldSubTpl: [  
        '<div id="{id}" class="{fieldCls}"></div>',
        {
            compiled: true,          
            disableFormats: true     
        }           
    ],

    isFormField: true,
    submitValue: true,
    afterRender: function() {
        this.callParent();

        this.fieldSet = Ext.create('Ext.form.FieldSet', {
            items: [{
              // ... config of the first item

              // The following configs should be set to false. It's important.
              // Otherwise form will assume this items as its fields
              isFormField: false,
              submitValue: false
        });
        this.fieldSet.render(this.inputEl);
    },

    // and here overriding valueToRaw and so on
    // ...
});