Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

  1. #1
    Ext User
    Join Date
    Nov 2009
    Posts
    2
    Vote Rating
    0
    neeteesh is on a distinguished road

      0  

    Default Problem with table layout placement

    Problem with table layout placement


    Hi Friends,

    I am new to EXTJS and for our project we require to build a form layout. I am using the table layout for that purpose, but the problem I am coming across is
    1. there is too much spacing among the different rows.
    2. the label having more than 13 characters are breaking up into two lines.
    I am going on adding a fieldset for each cell in the table which contains the various form components such as textfield, and combo etc

    the code is like this:
    Code:
        var createCust = new Ext.FormPanel({
            renderTo: Ext.getBody(),        
            title: 'Create Customer',
            layout: 'table',
            frame: true,
            defaults: {
                   border: true,
                   labelWidth: 140,
                   anchor: '100%'
            },
            layoutConfig: {
                columns: 6,
                tableAttrs: {
                  style: {
                    width: 1000
                     }
                  }
            },
            items: [{
                html: '<div align="center" style="background-color:rgb(140, 162, 189);"><font size="2"><b>CREATE CUSTOMER</b></font></div>',
                colspan: 3
            }, {
                xtype: 'fieldset',
                border: false,
                collapsible: true,
                defaults: {
                    anchor: '100%'
                },
                items: [{
                    xtype: 'textfield',
                    fieldLabel: 'Customer Name',
                    name: 'cName',
                    width: 165,
                    labelStyle: 'font-weight: bold;',
                    allowBlank: false
                }] 
            }, {
                xtype: 'fieldset',
                border: false,
                defaults: {
                    anchor: '100%'
                },
                items: [{
                    xtype: 'combo',
                    fieldLabel: 'Customer Type',
                    name: 'cType',
                    mode: 'local',
                    labelStyle: 'font-weight: bold;',
                    allowBlank: false
                }] 
            }, {
                xtype: 'fieldset',
                border: false,
                defaults: {
                    anchor: '100%'
                },
                items: [{
                    xtype: 'combo',
                    fieldLabel: 'Priority',
                    name: 'pri',
                    mode: 'local',
                    labelStyle: 'font-weight: bold;',
                    allowBlank: false
                }] 
            }, {
                xtype: 'fieldset',
                border: false,
                defaults: {
                    anchor: '100%'
                },
                items: [{
                    xtype: 'combo',
                    fieldLabel: 'Region',
                    name: 'reg',
                    mode: 'local',
                    labelStyle: 'font-weight: bold;',
                    allowBlank: false
                }] 
            }, {
                xtype: 'fieldset',
                border: false,
                defaults: {
                    anchor: '100%'
                },
                items: [{
                    xtype: 'combo',
                    fieldLabel: 'Segment',
                    name: 'seg',
                    mode: 'local',
                    labelStyle: 'font-weight: bold;',
                    allowBlank: false
                }] 
            }, {
                xtype: 'fieldset',
                border: false,
                defaults: {
                    anchor: '100%'
                },
                items: [{
                    xtype: 'datefield',
                    fieldLabel: 'Creation Date',
                    labelStyle: 'font-weight: bold;',
                    name: 'date'
                }] 
            }, {
                html: '<div align="center" style="background-color:rgb(140, 162, 189);"><font size="2"><b>PERSONAL DETAILS</b></font></div>',
                colspan: 3
            }, {
                xtype: 'fieldset',
                border: false,
                defaults: {
                    anchor: '100%'
                },
                items: [{
                    xtype: 'combo',
                    fieldLabel: 'Title',
                    name: 'title',
                    mode: 'local',
                    labelStyle: 'font-weight: bold;',
                    allowBlank: false
                }] 
            }, {
                xtype: 'fieldset',
                border: false,
                defaults: {
                    anchor: '100%'
                },
                items: [{
                    xtype: 'textfield',
                    fieldLabel: 'First Name',
                    name: 'fName',
                    labelStyle: 'font-weight: bold;',
                    allowBlank: false
                }] 
            }, {
                xtype: 'fieldset',
                border: false,
                defaults: {
                    anchor: '100%'
                },
                items: [{
                    xtype: 'textfield',
                    fieldLabel: 'Last Name',
                    name: 'lName',
                    labelStyle: 'font-weight: bold;',
                    allowBlank: false
                }] 
            }, {
                xtype: 'fieldset',
                border: false,
                defaults: {
                    anchor: '100%'
                },
                items: [{
                    xtype: 'textfield',
                    fieldLabel: 'Initials',
                    name: 'init',
                    labelStyle: 'font-weight: bold;',
                    allowBlank: false
                }] 
            }, {
                xtype: 'fieldset',
                border: false,
                defaults: {
                    anchor: '100%'
                },
                items: [{
                    xtype: 'textfield',
                    fieldLabel: 'Department',
                    name: 'dept',
                    labelStyle: 'font-weight: bold;',
                    allowBlank: false
                }] 
            }, {
                xtype: 'fieldset',
                border: false,
                defaults: {
                    anchor: '100%'
                },
                items: [{
                    xtype: 'textfield',
                    fieldLabel: 'Position',
                    name: 'pos',
                    labelStyle: 'font-weight: bold;',
                    allowBlank: false
                }] 
            }, {
                html: '<div align="center" style="background-color:rgb(140, 162, 189);"><font size="2"><b>ADDRESS</b></font></div>',
                colspan: 3
            }, {
                xtype: 'fieldset',
                border: false,
                defaults: {
                    anchor: '100%'
                },
                items: [{
                    xtype: 'textfield',
                    fieldLabel: 'Address Line 1',
                    name: 'addLine1',
                    labelStyle: 'font-weight: bold;',
                    allowBlank: false
                }] 
            }, {
                xtype: 'fieldset',
                border: false,
                defaults: {
                    anchor: '100%'
                },
                items: [{
                    xtype: 'textfield',
                    fieldLabel: 'Address Line 2',
                    name: 'addLine2',
                    labelStyle: 'font-weight: bold;',
                    allowBlank: false
                }] 
            }, {
                xtype: 'fieldset',
                border: false,
                defaults: {
                    anchor: '100%'
                },
                items: [{
                    xtype: 'textfield',
                    fieldLabel: 'Address Line 3',
                    name: 'addLine3',
                    labelStyle: 'font-weight: bold;',
                    allowBlank: false
                }] 
            }, {
                xtype: 'fieldset',
                border: false,
                defaults: {
                    anchor: '100%'
                },
                items: [{
                    xtype: 'combo',
                    fieldLabel: 'Country',
                    name: 'con',
                    mode: 'local',
                    labelStyle: 'font-weight: bold;',
                    allowBlank: false
                }] 
            }, {
                xtype: 'fieldset',
                border: false,
                defaults: {
                    anchor: '100%'
                },
                items: [{
                    xtype: 'textfield',
                    fieldLabel: 'State/Province',
                    name: 'state',
                    labelStyle: 'font-weight: bold;',
                    allowBlank: false
                }] 
            }, {
                xtype: 'fieldset',
                border: false,
                defaults: {
                    anchor: '100%'
                },
                items: [{
                    xtype: 'textfield',
                    fieldLabel: 'City',
                    name: 'city',
                    labelStyle: 'font-weight: bold;',
                    allowBlank: false
                }] 
            }, {
                xtype: 'fieldset',
                border: false,
                defaults: {
                    anchor: '100%'
                },
                items: [{
                    xtype: 'textfield',
                    fieldLabel: 'Zip/Postal Code',
                    name: 'zipcode',
                    labelStyle: 'font-weight: bold;',
                    allowBlank: false
                }] 
            }, {
                html: '<div>&nbsp</div>',
                colspan: 2 
            }, {
                html: '<div align="center" style="background-color:rgb(140, 162, 189);"><font size="2"><b>CONTACT DETAILS</b></font></div>',
                colspan: 3
            }, {
                xtype: 'fieldset',
                border: false,
                defaults: {
                    anchor: '100%'
                },
                items: [{
                    xtype: 'textfield',
                    fieldLabel: 'Day Telephone',
                    name: 'dTel',
                    labelStyle: 'font-weight: bold;',
                    allowBlank: false
                }] 
            }, {
                xtype: 'fieldset',
                border: false,
                defaults: {
                    anchor: '100%'
                },
                items: [{
                    xtype: 'textfield',
                    fieldLabel: 'Day Extension',
                    name: 'dExt',
                    labelStyle: 'font-weight: bold;',
                    allowBlank: false
                }] 
            }, {
                xtype: 'fieldset',
                border: false,
                defaults: {
                    anchor: '100%'
                },
                items: [{
                    xtype: 'textfield',
                    fieldLabel: 'Evening Telephone',
                    name: 'eTel',
                    anchor: '100%',
                    //labelWidth: 350,
                    labelStyle: 'font-weight: bold;',
                    allowBlank: false
                }] 
            }, {
                xtype: 'fieldset',
                border: false,
                defaults: {
                    anchor: '100%'
                },
                items: [{
                    xtype: 'textfield',
                    fieldLabel: 'Evening Extension',
                    name: 'eExt',
                    //labelWidth: 150,
                    labelStyle: 'size:2; font-weight: bold;',
                    allowBlank: false
                }] 
            }, {
                xtype: 'fieldset',
                border: false,
                defaults: {
                    anchor: '100%'
                },
                items: [{
                    xtype: 'textfield',
                    fieldLabel: 'Mobile',
                    name: 'mob',
                    labelStyle: 'font-weight: bold;',
                    allowBlank: false
                }] 
            }, {
                xtype: 'fieldset',
                border: false,
                defaults: {
                    anchor: '100%'
                },
                items: [{
                    xtype: 'textfield',
                    fieldLabel: 'Fax',
                    name: 'fax',
                    labelStyle: 'font-weight: bold;',
                    allowBlank: false
                }] 
            }, {
                xtype: 'fieldset',
                border: false,
                defaults: {
                    anchor: '100%'
                },
                items: [{
                    xtype: 'textfield',
                    fieldLabel: 'Email',
                    name: 'email',
                    labelStyle: 'font-weight: bold;',
                    allowBlank: false
                }] 
            }, {
                html: '<div><a href="window.html">Add Sales Info</a></div>'
            }, {
                html: '<div>&nbsp</div>'
            }],
            buttons: [{
                text: 'Submit',
                align: 'center',
                handler: function(){
                    
                }
            }]
        });
    I have attached screen shot for my
    1. code's output along with the
    2. desired layout...

    Please help.

    Thank You,
    Neeteesh
    Attached Images
    Last edited by neeteesh; 3 Dec 2009 at 11:00 PM. Reason: formated the code

  2. #2
    Ext User
    Join Date
    Nov 2009
    Posts
    2
    Vote Rating
    0
    neeteesh is on a distinguished road

      0  

    Default


    please help... any help from you all will be highly appreciated

    Thank You,
    Neeteesh