ExtJS4: добавьте поле на панель формы, но не хотите, чтобы оно отображалось панелью - PullRequest
Новая
       29

ExtJS4: добавьте поле на панель формы, но не хотите, чтобы оно отображалось панелью

0 голосов
/ 22 сентября 2011

У меня есть статический HTML-макет формы, в который я добавляю поля формы extjs, используя конфигурацию renderTo. Для проверки формы и простых методов отправки я хочу добавить поля на панель формы. Поскольку макет управляется фреймом html, я не хочу, чтобы форма отображалась панелью (панель имеет html-фрейм как contentEl, и его следует использовать как есть).

В extjs3 я мог бы добиться этого, добавив поле не на панель, а в BasicForm (formpanel.getForm (). Add (...)), но в extjs4 этот метод, похоже, исчез.

Как я могу сделать это, используя extjs4?

Заранее спасибо.

Ответы [ 2 ]

3 голосов
/ 22 сентября 2011

Поскольку у вас уже есть Panel, которая использует contentEl для визуализации HTML в своем теле, я рекомендую придерживаться этого подхода: Замените панель экземпляром Ext.form.Panel - конфигурация, особенно конфигурация contentEl, может остаться неизменной.

Код, предоставленный здесь, переопределит стандартный класс Ext (Ext.layout.Layout) и введет поддержку свойства конфигурации renderItemTo для дочерних элементов любого контейнера Ext или панели (включая Ext.form.Panel). Значение свойства config должно быть идентификатором уже отрисованного узла DOM, например, элемент 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 (примечание: измените размер окна, если у вас возникла проблема с рендерингом - это связано с JSFiddle, а не с переопределением).

0 голосов
/ 26 мая 2012

После копания в системе макетов 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" для элементов.

...