Dynamically add form elements in Extjs 4

Code snippet to dynamically add form elements in Extjs 4 with ease.


Ext.onReady(function() {

    var myForm = Ext.create('Ext.form.Panel', {
        title: 'Query form',
        width: 600,
        renderTo: Ext.getBody(),
        items: [{
            xtype: 'button',
            text: 'click me to add',
            handler: function() {
                var tf = Ext.create('Ext.form.field.Text', {
                    name: 'name',
                    fieldLabel: 'Name'
                });
                myForm.add(tf);
            }
        }]
    });

});

Comments

  1. Anonymous1 September 2011 at 13:59

    I love seeing stuff like this, want to contribute some learning materials to the framework itself? (ed @ sencha com if you're interested)

    ReplyDelete

Post a Comment

Popular posts from this blog

Getting Started: Quick Setup for GXT 3 (includes reset.css link how to)

Image
STEP 1 -> Create a Google Web Application Project project within Eclipse. 1a. Get Ext GWT Download the latest Ext GWT release http://www.sencha.com/products/gxt/download/ (Note: GXT 3.X requires GWT 2.4+.) 1b. Get GWT Running For detailed instructions for getting started with the GWT SDK: https://developers.google.com/web-toolkit/gettingstarted For a quick start guide for the Google Plugin for Eclipse: https://developers.google.com/eclipse/docs/getting_started 1c. Create a User Defined Library Select Windows > Preferences and select Java > Build Path > User Libraries in the preference tree. Click New and type "GXT" into the User library name field. Make sure your new library is selected and click "Add JARs". Navigate to the root folder of the Ext GWT download and add the "gxt.jar" file. Click OK. (Optional; If you prefer seeing jars in the build path rather than a user library, you can just click "Add External JARs&qu
Read more

How to setup GXT 3 examples, samples and demos

Here's how I got the examples that come with GXT 3 working, in six simple steps! 1. Setup a GXT 3 app Setup your Gxt app as shown in the previous post on this blog; Quick Setup for GXT 3 . 2. Add additional jars In addition to the gxt jar there are several other jars that need to be added to the build path; gxt-3.0.0.jar gxt-chart-3.0.0.jar gxt-legacy-3.0.0.jar uibinder-bridge-2.4.0.jar gwt-dev.jar gin-1.5-post-gwt-2.2.jar guice-3.0.jar json-org.jar javax.persistence.jar javax.inject.jar That will fix all of the errors except for 2 in the file Folder.java, (I'm not sure how to fix that one yet, answers on a post card please. I tried using the  javax.persistence.jar from J2EE / Glassfish modules but this didn't fix it for me, so I just had the methods with errors return null ). 3. Import the examples Select the src folder in your project (eclipse), select "file import" navigate to the examples-src folder inside the gxt 3 download and se
Read more

ExtJs4 : Dynamically Add Columns

Cod Snippet for Dynamically Adding Columns to a grid panel in Extjs4 Ext.create('Ext.data.Store', { storeId:'simpsonsStore', fields:['name', 'email', 'phone'], data:{'items':[ { 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" }, { 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" }, { 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" }, { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" } ]}, proxy: { type: 'memory', reader: { type: 'json', root: 'items' } } }); Ext.create('Ext.grid.Panel', { i
Read more