Results 1 to 6 of 6

Thread: AbsoluteLayout extension

  1. #1

    Default AbsoluteLayout extension

    Hello All,

    I understand that Ext2.0 RC1 has support for an absolute layout. However, I couldn't find an absolute layout panel object to complete the loop and allow me to create a registered component. I'm guessing this is coming in a future release but I wanted to make sure I'm on the right track to minimize code changes when I upgrade to the final release. I don't want to put my extension in a ux namespace because I know I'll just have to change it again. Can anyone on the Ext team confirm that this tiny code snippet is the direction you are going with absolute layout panels?

    Code:
    Ext.AbsolutePanel = Ext.extend(Ext.FormPanel, {
        layout: 'absolute',
    });
    Ext.reg('absolute', Ext.AbsolutePanel);
    -- JCW
    Ext is kewl.

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854

    Default

    I'm not sure that the intent is to create an AbsolutePanel. My thought would be that AbsoluteLayout is used to position other components with fixed positioning and the component (panel in this case) doesn't need to know anything special to be part of it. The layout manages the positioning, not the container.

  3. #3

    Default

    Okay, it sounds like it's a good thing I checked then. In that case, why was Ext.form.FormPanel created?

    Now that you mention it, that seems to be the only layout-specific panel object that exists in Ext2.0 is the FormPanel... I just saw that one and was hoping there was an easy way to add absolute positioning features to a form.

    I suppose the better way to do that would be to create a formpanel and just use the layout config property to make it an absolute layout, correct? But in that case, how would I keep the field-rendering template features? It seems the field-rendering features are only available to the form-layout, but I want absolutely positioned fields.
    -- JCW
    Ext is kewl.

  4. #4

    Default Bump

    I'm bumping this thread because it seems no one noticed my questions in my last post.
    -- JCW
    Ext is kewl.

  5. #5
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    France
    Posts
    224

    Default

    Quote Originally Posted by jcwatson11 View Post
    I'm bumping this thread because it seems no one noticed my questions in my last post.
    As far as I understand, formpanel is indeed a panel with form layout, but also comes with :
    -> access to a "basicform" facility to set/getValues, findField..
    -> consequently, has all fields put in a hash tree

    It has some things to do with the css, too; you can test it with the form builder, but for example, a FieldSet component is rendered differently in a FormPanel and in a Panel with layout="form".

    Also, a FormPanel forces the layout "form", a FormPanel({layout:'sth-else'}) doesn't work.
    But you may have, in a complex FormPanel, to specify "form" layout in sub-sub elements (i-e in a "column" layout-one).

    So, panels like "AbsolutePanel" to replace a Panel({layout:'absolute'}) would have an interest if it adds more functions to it.

  6. #6
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    France
    Posts
    224

    Default

    Quote Originally Posted by jcwatson11 View Post
    I suppose the better way to do that would be to create a formpanel and just use the layout config property to make it an absolute layout, correct? But in that case, how would I keep the field-rendering template features? It seems the field-rendering features are only available to the form-layout, but I want absolutely positioned fields.
    Here this is annoying, but :
    * an absolute layout would not render correctly form items (not label, ...)
    * a form layout cannot enable you to put items "absolutely"

    The only escape is wrapping form items in "form-layouted" panels :

    PHP Code:
    {
    xtype:"form",
    title:"Form",
    items:[{
        
    layout:"absolute",
        
    title:"AbsoluteLayout Container",
        
    anchor:"100% 100%",
        
    items:[{
            
    layout:"form",
            
    x:33,
            
    y:41,
            
    items:[{
                
    xtype:"textfield",
                
    fieldLabel:"Text",
                
    name:"textvalue"
              
    }]
          },{
            
    layout:"form",
            
    x:14,
            
    y:119,
            
    height:138,
            
    width:348,
            
    items:[{
                
    xtype:"textarea",
                
    fieldLabel:"Text",
                
    name:"textvalue"
              
    }]
          },{
            
    layout:"form",
            
    x:232,
            
    y:84,
            
    items:[{
                
    xtype:"checkbox",
                
    fieldLabel:"Label",
                
    boxLabel:"Box label",
                
    name:"checkbox",
                
    inputValue:"cbvalue"
              
    }]
          }]
      }]


Posting Permissions

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