Results 1 to 2 of 2

Thread: dynamic remove and insert field in table layout

  1. #1
    Sencha User
    Join Date
    Nov 2009
    Posts
    1

    Default dynamic remove and insert field in table layout

    I have tried to replace the textfield with datefield in a table layout .
    I tried to remove the textfield first and then insert the datefield in the same position, but the inserted datefield does appear in the end of table.


    HTML Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Form</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
         <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="../../ext-all.js"></script>
    <link rel="stylesheet" type="text/css" href="forms.css" />
    </head>
    <body>
    <script>
    Ext.onReady(function(){
    
        Ext.QuickTips.init();
    
        Ext.form.Field.prototype.msgTarget = 'side';
    
        var fs = new Ext.FormPanel({
            frame: true,
            title:'Form',
            labelAlign: 'right',
            labelWidth: 85,
            width:500,
            waitMsgTarget: true,
            items: [
                new Ext.form.FieldSet({
                    id:'fieldset',
                    title: 'Contact Information',
                    autoHeight: true,
                    autoScroll:true,
                        items :[
                            {
                            id:'tableLayout',
                            layout:'table', //?
                            layoutConfig:{columns:2},
                            items:[
                                {title:'name',width:150,height:10},
                                {title:'textOrDate',width:150,height:10},
                                new Ext.form.TextField({id:'name1', name:'name1', width:150}),
                                new Ext.form.TextField({id:'text1', name:'text1', width:150}),
                                new Ext.form.TextField({id:'name2', name:'name2', width:150}),
                                new Ext.form.TextField({id:'text2', name:'text2', width:150})
                            ]
                        }]
                })
            ]
        });
    
        fs.addButton('Change', function(){
                                            //
                                            var datetype = new Ext.form.DateField({id:'date1', name:'date1', width:150});
    
                                            var table = Ext.getCmp('tableLayout');
                                            table.remove(Ext.getCmp('text1'));//
                                            table.insert(3,datetype);//
                                            table.doLayout();
                                            //fs.doLayout(); 
                                         }
                    );
    
        fs.render('form-ct');
    });
    </script>
    <div id="form-ct"></div>
    
    </body>
    </html>
    Any idea?
    Attached Images Attached Images

  2. #2
    Sencha User
    Join Date
    Jun 2010
    Posts
    16

    Default

    I can not guarantee this will cause the disaster, but it works.

    PHP Code:
                                            var table Ext.getCmp('tableLayout');
                                            
    //alert(table.getXType());
                                            
    var  Ext.getCmp('text1');


                                            var 
    t.getEl().dom.parentNode;
                                            
    alert(table.items.length);
                                                
    table.remove(Ext.getCmp('text1'));//

                                              
    var datetype = new Ext.form.DateField({renderTo:pid:'date1'name:'date1'width:150});
                                              
    table.insert(3,datetype);
                                            var 
    index table.items.indexOf(t);

                                            
    alert(table.items.length); 

Similar Threads

  1. [SOLVED]insert and remove field to form
    By ibralnet in forum Ext 2.x: Help & Discussion
    Replies: 17
    Last Post: 3 Apr 2009, 3:52 AM
  2. Help: Dynamic form with table layout.
    By phucit in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 28 Oct 2008, 7:29 PM
  3. dynamic insert field into FormPanel
    By kohwuyea in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 1 Jun 2008, 4:58 AM
  4. Table Layout and Dynamic Content
    By bscott in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 2 Jan 2008, 6:35 PM
  5. Replies: 1
    Last Post: 7 Nov 2007, 8:17 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •