Databases
StackOverflow2013
Postsdbo
POUnable to render a Ext.form.TextField into the output of an XTemplate
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POUnable to render a Ext.form.TextField into the output of an XTemplate
    primarykey
    data
    text
    <p>I want to render some Ext components into the output of an <code>XTemplate</code>. We want to have the flexibility of using an <code>XTemplate</code> to render the HTML but retain the styling, behaviour, and handlers of using Ext components rather than plain old HTML elements.</p> <p>I am currently successfully doing this with an <code>Ext.Button</code>. In the template I am writing a placeholder div like so:<br> <code>&lt;div id="paceholder-1"&gt;&lt;/div&gt;</code></p> <p>After I have called <code>apply()</code> on the template I then create a new Ext component and render it in like so:</p> <pre><code>this._replacePlaceholders.defer(1, this, [html, 'placeholder-1', collection]); </code></pre> <p>The <code>_replacePlaceholders</code> function looks like this: </p> <pre><code>_replacePlaceholders: function(html, id, collection) { var emailField = new Ext.form.TextField({ emptyText: 'Email address', hideLabel: true }); var downloadButton = new Ext.Button({ text: 'Download as...', icon: 'images/down.png', scope: this, menu: this._createDownloadOptionsMenu(collection) // Create Menu for this Button (works fine) }); var form = new Ext.form.FormPanel({ items: [emailField, downloadButton] }); downloadButton.render(html, id); } </code></pre> <p>This works and renders the button into the html correctly. The button menu behaves as expected.</p> <p>But if I change the last line of <code>replacePlaceholders</code> to <code>emailField.render(html, id);</code> or <code>form.render(html, id);</code> I get a javascript error.</p> <pre><code>TypeError: ct is null ct.dom.insertBefore(this.el.dom, position); ext-all-debug.js (line 10978) </code></pre> <p>I'm a bit confused because from what I can tell from the <a href="http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.Component-method-render" rel="nofollow">docs</a> the <code>render()</code> method called is going to be the same one (from <code>Ext.Component</code>). But I've had a bit of a play around and can't seem to track down what is happening here.</p> <p><strong>So is there any good reason why these components behave differently from <code>Ext.Button</code>? and is it possible to render an <code>Ext.form.TextField</code> or an <code>Ext.form.FormPanel</code> or <em>anything</em> that will let me use an Ext text field in mt XTemplate html?</strong></p> <p><em>NB. I am using ExtJS 3.3.1 and don't have the opportunity to upgrade the version. I believe ExtJS 4 has functionality which would make doing what I doing much easier.</em></p> <p>Thanks!</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USDavid
    1. USDavid
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POUnable to render a Ext.form.TextField into the output of an XTemplate
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload