Results 1 to 7 of 7

Thread: Form fields not rendering properly, deferredRender is false

  1. #1
    Ext User
    Join Date
    Aug 2009
    Posts
    100

    Default Form fields not rendering properly, deferredRender is false

    I have a tab panel which I needed to set deferredRender: false, because I have a form which needs to have access to fields within the TabPanel. Problem is that now the fields and a grid on the tabpanel are not rendering properly now:



    In the above shot, the grid is supposed to fill the width, and autoexpand the system fields column. The drop down box is also not as wide as it should be when you click on it - it appears to be cut off.

    Anyone know what I am doing wrong? The rendering was fine before I set it to not defer the rendering.

  2. #2
    Sencha User aw1zard2's Avatar
    Join Date
    Sep 2009
    Location
    Dallas, Texas
    Posts
    589

  3. #3
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    child items of a TabPanel should be configured with hideMode: 'offsets'

    Looks like you've overnested a bit there. In Panels too. I see some border cruft building up which is what you get if you don't think about things.

  4. #4
    Ext User
    Join Date
    Aug 2009
    Posts
    100

    Default

    Quote Originally Posted by Animal View Post
    child items of a TabPanel should be configured with hideMode: 'offsets'

    Looks like you've overnested a bit there. In Panels too. I see some border cruft building up which is what you get if you don't think about things.
    No, it's just the frame:true. I like the effect on my panels. I set frame:false, and added a background color to match the blue, but there must be other things the frame option does. When I just did the background color, other things in my form did not look right in the subitems such as grids and trees.

  5. #5
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    And your ComboBox's dropdown?

    That's your main issue. Colours are surely the very last thing to think about and completely up to any CSS you may add in your stylesheet!

  6. #6

    Thumbs up

    I know - the last post is long ago - but I want to give an answer to Animal ...

    Animal solves the DropDown-Problem
    Quote Originally Posted by Animal View Post
    child items of a TabPanel should be configured with hideMode: 'offsets'
    aw1zard2 solves another problem that comes up with Animals solution: With this you prevent a jump if you scroll down into the tabPannel and than click on an inactive tab.
    Quote Originally Posted by aw1zard2 View Post
    Try forceLayout: true, for the tabpanel.
    Thanks, Animal and aw1zard2

    If anyone want's to know:
    The combination was the solution for the problem in my case ...

    Here an example for those who don't want to search as long as I did

    Code:
    var tabs = new Ext.TabPanel({
        /* ... here's your config ... */
        forceLayout: true,
        items: [{
            title: 'Tab 1',
            hideMode: 'offsets',
            items: [{
                /* ... your form-elements ... */
            }]
        },{
            title: 'Tab 2',
            hideMode: 'offsets',
            items: [{
                /* ... your form-elements ... */
            }]
        }]
    });
    This is an modified example I copied from the Ext3.1 API

  7. #7

    Exclamation

    Hi, all

    Another problem occured ...

    Pleace view this example to understand my problem - I can't describe it ...
    I've placed an image as attachment to this post for all who don't have the time to try the example ...
    At my Screenshot there's an empty space of 123px between the tab-panel-navigation and the tab-panel-body

    Example:
    Code:
    var test = new Ext.TabPanel({
    	autoHeight:true,
    			
    	/**
    	 * only fields of an active tab are submitted
    	 * if the following line is not present
    	 */
    	deferredRender:false,
    	forceLayout: true,
    	
    	activeTab: 1,
    	defaults: {
    		hideMode: 'offsets',
    	},
    	items:[{
    		title: '+',
    		disabled: true,
    		items: [
    			new Ext.form.FieldSet({
    				title: 'MySubForm',
    				
    				items: [
    					new Ext.form.NumberField({ fieldLabel: 'Test1' }),
    					new Ext.form.NumberField({ fieldLabel: 'Test2' }),
    					new Ext.form.NumberField({ fieldLabel: 'Test3' })
    				]
    			})
    		]
    		
    	}, {
    		title: '5502',
    		disabled: false,
    		items: [
    			new Ext.form.FieldSet({
    				title: 'MySubForm',
    				
    				items: [
    					new Ext.grid.GridPanel({
    						title: "MyGrid",
    						store: ['asdf', 'asdf'],
    						columns: [
    							{ header: "Col A", dataIndex: "a" },
    							{ header: "Col B", dataIndex: "b" },
    							{ header: "Col C", dataIndex: "c" },
    							{ header: "Col D", dataIndex: "d" },
    							{ header: "Col E", dataIndex: "e" }
    						]
    					})
    				]
    			})
    		]
    	}]
    });
    Pleace don't say that I don't declare the grid-store correctly - I know ... I want to point out another mistake concerning the tabPanel.

    In my case the first tab-element has the following CSS-Classes:
    x-panel x-panel-noborder x-masked-relative x-masked x-hide-offsets
    and this must not be!
    pleace look at the css:
    Code:
    .x-masked-relative {
        position: relative !important;
    }
    
    .x-hidden, .x-hide-offsets {
        position:absolute !important;
        left:-10000px;
        top:-10000px;
        visibility:hidden;
    }
    and as you see this element will get the following css out of this declaration:
    Code:
    {
        position: relative;
        left:-10000px;
        top:-10000px;
        visibility:hidden;
    }
    I hope you can understand my problem and can understand why the browser shows it like this ...

    But I have to use the hideMode to fix this problem ...

    EDIT:
    Is this bug/feature xD still fixed in the Ext 3.0.1 ?
    I'm still working with 3.0.0 because I don't want to switch - I haven't found the time to switch and test all functions I use ...
    Attached Images Attached Images
    Last edited by SimonSimCity; 8 Jan 2010 at 12:28 AM. Reason: version of extjs

Posting Permissions

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