1. #11
    Sencha Premium Member
    Join Date
    Feb 2008
    Posts
    53
    Vote Rating
    0
    backoffice is on a distinguished road

      0  

    Default


    Hi,

    thanks. Your code works for my simple example. But it doesn't for a more complex one:

    Code:
    Ext.onReady(function()
    {
        // Settings
        Ext.BLANK_IMAGE_URL = '/resources/images/default/s.gif';
        
        // Formular
        var formpanel = new Ext.form.FormPanel({
            id: 'formpanel',
            region: 'center',
            labelAlign: 'top',
            layout: 'fit',
            items: [{
                "xtype": "fieldset",
                "title": "#NT#_Telefon",
                "autoHeight": true,
                "border": false,
                "collapsible": true,
                "layout": "fit",
                "items": [{
                    "layout": "column",
                    "border": false,
                    "items": [{
                        "layout": "form",
                        "border": false,
                        "items": [{
                            "xtype": "textfield",
                            "fieldLabel": "Firstname",
                            "anchor": "90%",
                            "name": "firstname"
                        }],
                        "columnWidth": 0.5
                    }, {
                        "layout": "form",
                        "border": false,
                        "items": [{
                            "xtype": "textfield",
                            "fieldLabel": "Lastname",
                            "anchor": "90%",
                            "name": "lastname"
                        }],
                        "columnWidth": 0.5
                    }]
                }, {
                    "layout": "column",
                    "border": false,
                    "items": [{
                        "layout": "form",
                        "border": false,
                        "items": [{
                            "xtype": "textfield",
                            "fieldLabel": "Street",
                            "anchor": "90%",
                            "name": "street"
                        }],
                        "columnWidth": 1.0
                    }]
                }, {
                    "layout": "column",
                    "border": false,
                    "items": [{
                        "layout": "form",
                        "border": false,
                        "items": [{
                            "xtype": "textfield",
                            "fieldLabel": "Zipcode",
                            "anchor": "90%",
                            "name": "zipcode"
                        }],
                        "columnWidth": 0.5
                    }, {
                        "layout": "form",
                        "border": false,
                        "items": [{
                            "xtype": "textfield",
                            "fieldLabel": "City",
                            "anchor": "90%",
                            "name": "city"
                        }],
                        "columnWidth": 0.5
                    }]
                }, {
                    "layout": "column",
                    "border": false,
                    "items": [{
                        "layout": "form",
                        "border": false,
                        "items": [{
                            "xtype": "datefield",
                            "fieldLabel": "Birthday",
                            "anchor": "90%",
                            "name": "birthday",
                            "format": "d.m.Y"
                        }, {
                            "xtype": "timefield",
                            "fieldLabel": "Birthtime",
                            "anchor": "90%",
                            "name": "birthtime",
                            "format": "H:i:s"
                        }, {
                            "xtype": "numberfield",
                            "fieldLabel": "Numeric",
                            "anchor": "90%",
                            "name": "number"
                        }],
                        "columnWidth": 1.0
                    }]
                }]
            }]
        });
        
        // Viewport
        var viewport = new Ext.Viewport({
            layout: 'border',
            items: [formpanel, {
                region: 'west',
                title: 'West',
                split: true,
                width: 200,
                minSize: 175,
                maxSize: 400,
                collapsible: true
            }, {
                region: 'east',
                title: 'East',
                split: true,
                width: 200,
                minSize: 175,
                maxSize: 400,
                collapsible: true
            }]
        });
    });
    Even with your fix the resize of this form doesn't work correct (in FireFox and IE). Moreover it seems that there are "spacers" created on resize which "move" the rest of the form out of the visible area. I hope that you are able to understand what i mean... my english is not as good :/ If not please try the code or ask...

    Yours
    backoffice

  2. #12
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,498
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    layout:'fit' does not support multiple items.

  3. #13
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    86
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Correct, but it also shows another error:

    A fieldset with border:false and collapsible:true doesn't display correctly on IE (text overlaps toggle).

  4. #14
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,498
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    This almost works, but you have to explicitly call Ext.getCmp("formpanel").doLayout() after resizing the regions which you should not have to do!

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Untitled Document</title>
            <link href="../../resources/css/ext-all.css" rel="stylesheet" type="text/css" />
            <link href="../../resources/css/xtheme-aero.css" rel="stylesheet" type="text/css" id="theme" />
            <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
            <style type="text/css">
            
            fieldset.my-fieldset table {
            	width: 100%
            }
    
            td.half {
            	width: 50%
            }
            </style>
            <script type="text/javascript" src="../../ext-all-debug.js"></script>
    
    <script type="text/javascript">
    	Ext.onReady(function()
    	{
    	    // Settings
    	    Ext.BLANK_IMAGE_URL = '/resources/images/default/s.gif';
    	    
    	    // Formular
    	    var formpanel = new Ext.form.FormPanel({
    	        id: 'formpanel',
    	        region: 'center',
    	        labelAlign: 'top',
    	        layout: 'fit',
    	        items: [{
    	        	cls: 'my-fieldset',
    	            "xtype": "fieldset",
    	            "title": "#NT#_Telefon",
    	            "autoHeight": true,
    	            "border": false,
    	            "collapsible": true,
    	            "layout": "table",
    	            layoutConfig: {
    	            	columns: 2
    	            },
    	            defaults: {
    	            	border: false
    	            },
                    "items": [{
                    	cellCls: 'half',
                        "layout": "form",
                        "border": false,
                        "items": [{
                            "xtype": "textfield",
                            "fieldLabel": "Firstname",
                            "anchor": "90%",
                            "name": "firstname"
                        }],
                    }, {
                    	cellCls: 'half',
                        "layout": "form",
                        "border": false,
                        "items": [{
                            "xtype": "textfield",
                            "fieldLabel": "Lastname",
                            "anchor": "90%",
                            "name": "lastname"
                        }],
                    }, {
                    	colspan: 2,
                        "layout": "form",
                        "border": false,
                        "items": [{
                            "xtype": "textfield",
                            "fieldLabel": "Street",
                            "anchor": "90%",
                            "name": "street"
                        }],
                    }, {
                    	cellCls: 'half',
                        "layout": "form",
                        "border": false,
                        "items": [{
                            "xtype": "textfield",
                            "fieldLabel": "Zipcode",
                            "anchor": "90%",
                            "name": "zipcode"
                        }]
                    }, {
                    	cellCls: 'half',
                        "layout": "form",
                        "border": false,
                        "items": [{
                            "xtype": "textfield",
                            "fieldLabel": "City",
                            "anchor": "90%",
                            "name": "city"
    	                }]
    	            }, {
    	                "layout": "column",
    	                colspan: 2,
    	                "border": false,
    	                defaults: {
    	                	border: false,
    	                	columnWidth: 0.333
    	                },
                        "items": [{layout:'form', items: {
                            "xtype": "datefield",
                            "fieldLabel": "Birthday",
                            "anchor": "90%",
                            "name": "birthday",
                            "format": "d.m.Y"
                        }}, {layout:'form', items: {
                            "xtype": "timefield",
                            "fieldLabel": "Birthtime",
                            "anchor": "90%",
                            "name": "birthtime",
                            "format": "H:i:s"
                        }}, {layout:'form', items: {
                            "xtype": "numberfield",
                            "fieldLabel": "Numeric",
                            "anchor": "90%",
                            "name": "number"
                        }}]
    	            }]
    	        }]
    	    });
    	    
    	    // Viewport
    	    var viewport = new Ext.Viewport({
    	        layout: 'border',
    	        items: [formpanel, {
    	            region: 'west',
    	            title: 'West',
    	            split: true,
    	            width: 200,
    	            minSize: 175,
    	            maxSize: 400,
    	            collapsible: true
    	        }, {
    	            region: 'east',
    	            title: 'East',
    	            split: true,
    	            width: 200,
    	            minSize: 175,
    	            maxSize: 400,
    	            collapsible: true
    	        }]
    	    });
    	});
    </script>
        </head>
        <body>        
        </body>

  5. #15
    Sencha Premium Member
    Join Date
    Feb 2008
    Posts
    53
    Vote Rating
    0
    backoffice is on a distinguished road

      0  

    Default


    Hi,

    thanks again for your help.

    The problem is that the "items-String" ([{.....}]) is generated automatically using an XML-File. This makes it extremly difficult (nearly impossible) for me to use your solution because i cannot say how much columns i have (and some other problems).

    Is there no other working solution to use multiple items which resize correctly?

    Yours
    backoffice

  6. #16
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,498
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    I don't think so.

    I think this is an area that Jack needs to revisit.

    The multitude of general Layout classes are great.

    That fact that we can only usefully add form Fields to layout:form Panels is bad. It means too much nesting.

    All layouts should be capable of rendering Fields.

  7. #17
    Ext User
    Join Date
    Apr 2007
    Posts
    36
    Vote Rating
    0
    Pagebaker is on a distinguished road

      0  

    Default


    I was facing the same problems, my tabpanel didn't get the right hight in the formpanel. As I was checking the source, I also noticed the form element wasn't the body of the formpanel.

    Any idea if this will be corrected in the next release?

    In meanwhile I'll use animals fix, thanks.

  8. #18
    Ext User
    Join Date
    Apr 2008
    Posts
    3
    Vote Rating
    0
    Alli is on a distinguished road

      0  

    Default


    I got the same problem and I used your patch and now the panels inside the formpanel get resized accurately.
    But other elemenet like TextField inside these panels don't get resized. They get bigger in width when the page is maximised but they don't get small again.

    Another thing that I noticet is this although firefox work without the patch but it has this preblem too.

  9. #19
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,498
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    You need to tell fields how to anchor themselves using the anchor config.

    FormPanels use layout:'form' and FormLayout extends AnchorLayout

    http://extjs.com/deploy/dev/docs/?cl...t.AnchorLayout

  10. #20
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    At every stage there needs to be a layout that provides dimensions or a set width in order for a lower level dimensions oriented layout (e.g. anchor layout) to work. In this case, it's the table layout that is causing issues. The table layout does not provide dimensions to components under it (the browser calculates dimensions, not the layout) so layouts don't flow through it.
    Jack Slocum
    Ext JS Founder
    Original author of Ext JS 1, 2 & 3.
    Twitter: @jackslocum
    jack@extjs.com

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi