Results 1 to 3 of 3

Thread: when adding dinamically form elements they comes over eachother and not seperated

  1. #1

    Default when adding dinamically form elements they comes over eachother and not seperated

    Hi all,

    Depending on whats in the store i create different tabs.
    then in each tab i will have a column layout with 4 form elements next to eachother ,
    and a link ( that i cant seem to be gettin at the right of it , but thats another problem.)
    that has an onclick handler to create another "row" with same form elements along with a delete link to delete the row again.
    Now i have spend atleast 2 days onit and i cant seem to get it right positioned , i get the elements next to eachother without the labels all into eachother, or good(with labels) but like
    [ ]
    [ ]
    below each
    but never as expected

    expected ( this is like this when i create the standard rule , but in the function addRule( ) is where i add another "row" below it and its what messes up
    :

    from: [ ] amount:[ ] untill: [ ] amount: [ ] [delete link]



    Code:
    var wizard_billing_types = new Ext.data.JsonStore({
        url: 'json_billing_types.php',
           autoLoad: false ,
        fields: [ 
    {name: 'ID'},
    {name: 'NAME', type: 'string'}
    ]
     
    });
     
    wizard_billing_types.load();
    wizard_billing_types.on('load',function()
    {
     
        var count = 1;
     
     
    wizard_billing_types.each(
    			function(r)
    			{
    				// items for 
    				
    	
    				var idd = 'payout_tab_'+r.get('ID')+'_'+count;
    				//alert(idd);
    				Ext.getCmp('payout_table').add({title:r.get('NAME'),id:'payout_tab_'+r.get('ID')});
    			   Ext.getCmp('payout_table').findById('payout_tab_'+r.get('ID')).add(
    						{
    				anchor: '0',
    				layout: 'column',
    				border: false,
    				id:idd,// this is the one we delte again
    				defaults: {
    					//labelAlign:'top',
    					labelWidth:55,
    					layout: 'form',
    					border: false
    					//,columnWidth: .25
    					//defaultType: 'textfield'
    				
    				},
    				items: [{
    					
    				//	columnWidth: .25,
    					items: [{
    						xtype: 'combo',
    						allowBlank: false,
    						id: 'payout_tab_'+r.get('ID')+'start_volume_rate_'+count,
    						width: 75,
    						store: new Ext.data.SimpleStore({
    							fields: ['volume_parameter_id', 'volume_parameter'],
    							data: [[0, '>'], [1, '<'], [2, '>='], [3, '<=']]
    						}),
    						displayField: 'volume_parameter',
    						hiddenName: 'volume_parameter_id',
    						editable: false,
    						mode: 'local',
    						triggerAction: 'all',
    						fieldLabel: 'From'
    					}]
    				}, {
    				//	columnWidth: .25,
    					items: [{
    						xtype: 'textfield',
    						name: 'payout_tab_'+r.get('ID')+'start_volume_secs_'+count,
    						id: 'payout_tab_'+r.get('ID')+'start_volume_secs'+count,
    						width: 75,
    						fieldLabel: 'Amount',
    						allowBlank: false
    					}]
    				
    				},
    				{
    					//columnWidth: .25,
    					items: [{
    						xtype: 'combo',
    						allowBlank: false,
    						id: 'payout_tab_'+r.get('ID')+'end_volume_rate_'+count,
    						width: 75,
    						store: new Ext.data.SimpleStore({
    							fields: ['volume_parameter_id', 'volume_parameter'],
    							data: [[0, '>'], [1, '<'], [2, '>='], [3, '<=']]
    						}),
    						displayField: 'volume_parameter',
    						hiddenName: 'volume_parameter_id',
    						editable: false,
    						mode: 'local',
    						triggerAction: 'all',
    						fieldLabel: 'Untill'
    					}]
    				}, {
    					//columnWidth: .25,
    					
    					
    					items: [{
    						xtype: 'textfield',
    						name: 'payout_tab_'+r.get('ID')+'end_volume_secs_'+count,
    						id: 'payout_tab_'+r.get('ID')+'end_volume_secs_'+count,
    						width: 75,
    						fieldLabel: 'Amount',
    						allowBlank: false
    						
    					}],
    				listeners: {
    							render: function(ct){
    						//	alert(idd);
    								var wrapDiv = ct.getEl('div.x-column-inner');
    								if (wrapDiv) {
    									wrapDiv.createChild({
    										tag: 'a',
    										href: 'javascript:void(0)',
    										onclick:'addRules('+idd+')',
    										style: '',
    										html: '[<img src="icons/add.png" border="0" /> Add Rule]<br style="clear:both;" />'
    									});
    								}
    							}
    						}
    				}]
    			} ,{} );
    			if (parseInt(count) == 1)
    			{
    				Ext.getCmp('payout_table').setActiveTab('payout_tab_'+ r.get('ID'));
    			}
    			Ext.getCmp('payout_table').findById('payout_tab_'+r.get('ID')).doLayout();
    			count++;
    			}
    				);
    				
    	});
    			        var fsf = new Ext.FormPanel({
          //  labelWidth: 75, // label settings here cascade unless overridden
            url:'save-form.php',
            frame:true,
     
            title: 'Simple Form with FieldSets',
            region:'center',
            bodyStyle:'padding:5px 5px 0',
            width: 650,
            id:'myform',
            items: [{
                xtype: 'tabpanel',
                width: 500,
                height: 300,
                //region: 'center',
                title: 'Payout Table ',
                id: 'payout_table',
                deferredRender: false,
                layoutOnTabChange: true,
                autoDestroy: false,
                defaults: {
                    hideMode: 'offsets'
                },
                activeTab:0
     
            }],
     
            buttons: [{
                text: 'Save'
            },{
                text: 'Cancel'
            }]
        });
     
        fsf.render(document.body);
     
    });
    var count = 1;
     
    function addRules(tabID)
    {
        var unique_id = tabID.id+'_'+count;
     
        Ext.getCmp(tabID.id).add(
                            {
                                width:500,
                     anchor: '0',
                    layout: 'column',
                    border: false,
                    id:unique_id, // it must be unique ,this will be passed to delete actually
                    defaults: {
                        labelAlign: 'top',
                        layout: 'form',
                        border: false,
                        columnWidth: .25
     
                    },
                    items: [{
     
                        columnWidth: .25,
                        items: [{
                            xtype: 'combo',
                            allowBlank: false,
                            //id: 'start_volume_rate_'+count,
                            width: 75,
                            store: new Ext.data.SimpleStore({
                                fields: ['volume_parameter_id', 'volume_parameter'],
                                data: [[0, '>'], [1, '<'], [2, '>='], [3, '<=']]
                            }),
                            displayField: 'volume_parameter',
                            hiddenName: 'volume_parameter_id',
                            editable: false,
                            mode: 'local',
                            triggerAction: 'all',
                            fieldLabel: 'from'
                        }]
                    }, {
                        columnWidth: .25,
                        items: [{
                            xype: 'textfield',
                            name: 'start_volume_secs_'+count,
                            id: 'start_volume_secs'+count,
                            width: 75,
                            fieldLabel: 'ggg',
                            allowBlank: false
                        }]
     
                    },
                    {
                        columnWidth: .25,
                        items: [{
                            xtype: 'combo',
                            allowBlank: false,
                            id: 'end_volume_rate_'+count,
                            width: 75,
                            store: new Ext.data.SimpleStore({
                                fields: ['volume_parameter_id', 'volume_parameter'],
                                data: [[0, '>'], [1, '<'], [2, '>='], [3, '<=']]
                            }),
                            displayField: 'volume_parameter',
                            hiddenName: 'volume_parameter_id',
                            editable: false,
                            mode: 'local',
                            triggerAction: 'all',
                            fieldLabel: ''
                        }]
                    }, {
                        columnWidth: .25,
                        listeners: {
    render: function(ct) { 
     
    var wrapDiv = ct.getEl('div.x-column-inner'); 
    if(wrapDiv){ 
    wrapDiv.createChild({tag: 'a', href:'#', onclick:'DeleteRule('+unique_id+')', style: 'margin-top:-15px;float:right;margin:0px;', html: '[<img src="icons/delete.png" border="0" /> delete Rule]'});
    } 
    }
    },
     
                        items: [{
                            xype: 'textfield',
                            name: 'end_volume_secs_'+count,
                            id: 'end_volume_secs_'+count,
                            width: 75,
                            fieldLabel: 'untill',
                            allowBlank: false
     
                        }]
     
                    }]
                }  );
                count++;
     
                Ext.getCmp(tabID.id).doLayout();
    }
    function DeleteRule(thisid)
    {
        //var oparent = document.getElementById('add_them_here'); 
    var tbl = document.getElementById(thisid.id); 
     
        while (tbl.childNodes.length > 0) {
            //alert(tbl.firstChild);
     
     
     
     
    tbl.removeChild(tbl.firstChild);
    } 
     
        Ext.getCmp('payout_table').doLayout();
    }

  2. #2

    Default sample

    Heres a sample

    Code:
    <html>
    <head>
      <title></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-debug.js"></script>
            <script>
     
            Ext.onReady(function(){
     
    var wizard_billing_types = new Ext.data.JsonStore({
        url: 'json_billing_types.php',
           autoLoad: false ,
        fields: [ 
    {name: 'ID'},
    {name: 'NAME', type: 'string'}
    ]
     
    });
     
    wizard_billing_types.load();
    wizard_billing_types.on('load',function()
    {
     
        var count = 1;
     
     
    wizard_billing_types.each(
                function(r)
                {
                    // items for 
     
     
                    var idd = 'payout_tab_'+r.get('ID')+'_'+count;
                    //alert(idd);
                    Ext.getCmp('payout_table').add({title:r.get('NAME'),id:'payout_tab_'+r.get('ID')});
                   Ext.getCmp('payout_table').findById('payout_tab_'+r.get('ID')).add(
                            {
                    anchor: '0',
                    layout: 'column',
                    border: false,
                    id:idd,// this is the one we delte again
                    defaults: {
                        //labelAlign:'top',
                        labelWidth:55,
                        layout: 'form',
                        border: false
                        //,columnWidth: .25
                        //defaultType: 'textfield'
     
                    },
                    items: [{
     
                    //    columnWidth: .25,
                        items: [{
                            xtype: 'combo',
                            allowBlank: false,
                            id: 'payout_tab_'+r.get('ID')+'start_volume_rate_'+count,
                            width: 75,
                            store: new Ext.data.SimpleStore({
                                fields: ['volume_parameter_id', 'volume_parameter'],
                                data: [[0, '>'], [1, '<'], [2, '>='], [3, '<=']]
                            }),
                            displayField: 'volume_parameter',
                            hiddenName: 'volume_parameter_id',
                            editable: false,
                            mode: 'local',
                            triggerAction: 'all',
                            fieldLabel: 'From'
                        }]
                    }, {
                    //    columnWidth: .25,
                        items: [{
                            xtype: 'textfield',
                            name: 'payout_tab_'+r.get('ID')+'start_volume_secs_'+count,
                            id: 'payout_tab_'+r.get('ID')+'start_volume_secs'+count,
                            width: 75,
                            fieldLabel: 'Amount',
                            allowBlank: false
                        }]
     
                    },
                    {
                        //columnWidth: .25,
                        items: [{
                            xtype: 'combo',
                            allowBlank: false,
                            id: 'payout_tab_'+r.get('ID')+'end_volume_rate_'+count,
                            width: 75,
                            store: new Ext.data.SimpleStore({
                                fields: ['volume_parameter_id', 'volume_parameter'],
                                data: [[0, '>'], [1, '<'], [2, '>='], [3, '<=']]
                            }),
                            displayField: 'volume_parameter',
                            hiddenName: 'volume_parameter_id',
                            editable: false,
                            mode: 'local',
                            triggerAction: 'all',
                            fieldLabel: 'Untill'
                        }]
                    }, {
                        //columnWidth: .25,
     
     
                        items: [{
                            xtype: 'textfield',
                            name: 'payout_tab_'+r.get('ID')+'end_volume_secs_'+count,
                            id: 'payout_tab_'+r.get('ID')+'end_volume_secs_'+count,
                            width: 75,
                            fieldLabel: 'Amount',
                            allowBlank: false
     
                        }],
                    listeners: {
                                render: function(ct){
                            //    alert(idd);
                                    var wrapDiv = ct.getEl('div.x-column-inner');
                                    if (wrapDiv) {
                                        wrapDiv.createChild({
                                            tag: 'a',
                                            href: 'javascript:void(0)',
                                            onclick:'addRules('+idd+')',
                                            style: '',
                                            html: '[<img src="icons/add.png" border="0" /> Add Rule]<br style="clear:both;" />'
                                        });
                                    }
                                }
                            }
                    }]
                } ,{} );
                if (parseInt(count) == 1)
                {
                    Ext.getCmp('payout_table').setActiveTab('payout_tab_'+ r.get('ID'));
                }
                Ext.getCmp('payout_table').findById('payout_tab_'+r.get('ID')).doLayout();
                count++;
                }
                    );
     
        });
     
     
            var fsf = new Ext.FormPanel({
          //  labelWidth: 75, // label settings here cascade unless overridden
            url:'save-form.php',
            frame:true,
     
            title: 'Simple Form with FieldSets',
            region:'center',
            bodyStyle:'padding:5px 5px 0',
            width: 650,
            id:'myform',
            items: [{
                xtype: 'tabpanel',
                //layout: 'form',
                width: 600,
                height: 300,
                //region: 'center',
                title: 'Payout Table ',
                id: 'payout_table',
                deferredRender: false,
                layoutOnTabChange: true,
                autoDestroy: false,
                defaults: {
                    hideMode: 'offsets'
                },
                activeTab:0
     
            }],
     
            buttons: [{
                text: 'Save'
            },{
                text: 'Cancel'
            }]
        });
     
        fsf.render(document.body);
     
    });
    var count = 1;
     
    function addRules(tabID)
    {
        var unique_id = tabID.id+'_'+count;
     
        Ext.getCmp(tabID.id).add(
                            {
                    anchor: '0',
                    layout: 'column',
                    border: false,
                    width:600,
                    id:unique_id,// this is the one we delte again
                    defaults: {
                        //labelAlign:'top',
                        labelWidth:55,
                        //layout: 'form',
                        border: false
                        //,columnWidth: .25
     
                    },
                    items: [{
                        layout:'form',
                        labelWidth:55,
                        style:'float:left',
                    items: [{
     
     
     
                            xtype: 'combo',
                            allowBlank: false,
                            //id: 'start_volume_rate_'+count,
                            width: 75,
                            store: new Ext.data.SimpleStore({
                                fields: ['volume_parameter_id', 'volume_parameter'],
                                data: [[0, '>'], [1, '<'], [2, '>='], [3, '<=']]
                            }),
                            displayField: 'volume_parameter',
                            hiddenName: 'volume_parameter_id',
                            editable: false,
                            mode: 'local',
                            triggerAction: 'all',
                            fieldLabel: 'From'
     
                    }, {
     
                            xtype: 'textfield',
                            name: 'start_volume_secs_'+count,
                            id: 'start_volume_secs'+count,
                            width: 75,
                            fieldLabel: 'Amount',
                            allowBlank: false
                        }
     
                    ,
                        {
                            xtype: 'combo',
                            allowBlank: false,
                            id: 'end_volume_rate_'+count,
                            width: 75,
                            store: new Ext.data.SimpleStore({
                                fields: ['volume_parameter_id', 'volume_parameter'],
                                data: [[0, '>'], [1, '<'], [2, '>='], [3, '<=']]
                            }),
                            displayField: 'volume_parameter',
                            hiddenName: 'volume_parameter_id',
                            editable: false,
                            mode: 'local',
                            triggerAction: 'all',
                            fieldLabel: 'Untill'
                        },{
                            xtype: 'textfield',
                            name: 'end_volume_secs_'+count,
                            id: 'end_volume_secs_'+count,
                            width: 75,
                            fieldLabel: 'Amount',
                            allowBlank: false
     
                        ,
                    listeners: {
    render: function(ct) { 
     
    var wrapDiv = ct.getEl('div.x-column-inner'); 
    if(wrapDiv){ 
    wrapDiv.createChild({tag: 'a', href:'#', onclick:'DeleteRule('+unique_id+')', style: '', html: '[<img src="icons/delete.png" border="0" /> delete Rule]'});
    } 
    }
    }
                    }
                    ]
                    }]
     
                }  );
                count++;
     
                Ext.getCmp(tabID.id).doLayout();
    }
     
     
     
     
    function DeleteRule(thisid)
    {
        //var oparent = document.getElementById('add_them_here'); 
    var tbl = document.getElementById(thisid.id); 
     
        while (tbl.childNodes.length > 0) {
            //alert(tbl.firstChild);
     
     
     
     
    tbl.removeChild(tbl.firstChild);
    } 
     
        //Ext.getCmp('payout_table').doLayout();
    }
        </script>
    </head>
    <body>
     
            </body>
    </html>

  3. #3

    Default anybody knows the solution

    Anybody knows how to resolve this?

    tia

    phpfreak.

Posting Permissions

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