Question

我有一个静态html表单布局，我使用“renderTo”配置添加extjs表单字段。为了进行表单验证和简单的提交方法，我想将字段添加到表单面板。由于布局由html框架管理，我不希望面板呈现窗体（面板的html框架为contentEl，应该按原样使用）。

在extjs3中我可以通过将字段添加到面板而不是添加到BasicForm（formpanel.getForm（）。add（...））来实现这一点，但是在extjs4中，这个方法似乎已经消失了。

我怎样才能使用extjs4？

提前致谢。

Answer 1

由于您已经有一个Panel使用contentEl将HTML呈现到其正文中，我建议坚持使用这种方法：用Ext.form.Panel实例替换面板 - 配置，特别是contentEl配置 - 可以保持不变。

此处提供的代码将覆盖标准Ext类（Ext.layout.Layout），并在任何Ext容器或面板实例（包括Ext.form.Panel）的子项上引入对“renderItemTo”配置属性的支持。 config属性的值应该是已经渲染的DOM节点的ID，例如，一个DIV元素，它是HTML片段的一部分，用作父容器主体的contentEl。

Ext.require(['Ext.layout.Layout'], function() {
    Ext.override(Ext.layout.Layout, {
        renderItem: function (item, target, position) {
            if(item.renderItemTo) {
                // render 'renderItemTo' components into the specified DOM element
                item.render(item.renderItemTo, 1);
                // don't allow container layout to seize the component
                item.layoutManagedHeight = 2;
                item.layoutManagedWidth = 2;
            } else {
                // just use standard Ext code for non-renderItemTo components
                this.callOverridden(arguments);
            }
        },
        isValidParent: function(item, target, position) {
            // signal Ext that we are OK with were our 'renderItemTo' component is right now
            // otherwise it would get moved during the layout process
            return item.renderItemTo ? true : this.callOverridden(arguments);
        }
    });
});

用法：

var panel = Ext.create('Ext.form.Panel', {
    contentEl: 'form', // the DOM element ID that holds the HTML fragment for the body
    title: 'My FormPanel with special FX',
    items: [
        {
            xtype: 'textfield',
            renderItemTo: 'text1', // the ID of a DOM element inside the HTML fragment
            fieldLabel: 'Label 1',
        },
        {
            xtype: 'textfield',
            renderItemTo: 'text2', // the ID of a DOM element inside the HTML fragment
            fieldLabel: 'Label 2'
        }
    ]
});

我向JSFiddle上传了一个working example（注意：如果遇到渲染问题，请调整窗口大小 - 这与JSFiddle有关，而不是我的覆盖）。

Answer 2

在挖掘ExtJS 4.1的布局系统后，我实现了一个自定义布局，在渲染后将项目移动到固定标记中的所需位置。结果与此线程中的ExtJS 4.0.7版本相同。它接缝适用于ExtJS标准字段。我的自定义字段有些问题。

Ext.define('Ext.ux.layout.Fixed', {
  extend: 'Ext.layout.container.Auto',
  alias: 'layout.uxfixed',
  afterRenderItem: function(item) {
    // move items with renderToFixedMarkup to desired position
    if (item.renderToFixedMarkup) {
      var target = Ext.getDom(item.renderToFixedMarkup);
      this.moveItem(item, target);
    }
  },
  isValidParent: function(item, target, position) {
    // items with renderToFixedMarkup property are always positioned correctly
    return (item.renderToFixedMarkup) ? true : this.callOverridden(arguments);
  }
});

可以通过在面板上设置“layout：'uxfixed'”和项目上的“renderToFixedMarkup”配置来使用它。

ExtJS4：向表单面板添加字段，但不希望它由面板呈现

2 个答案: