1. #1
    Ext User
    Join Date
    Jan 2008
    Posts
    12
    Vote Rating
    0
    enterco is on a distinguished road

      0  

    Question Form + Custom Layout, maybe template?

    Form + Custom Layout, maybe template?


    Hi all,

    I've been searching for hours an example of a modifiable form. I want to use few different "skins" for same type of data. Since I need to update some fields after form update, it would be nice that the form components to be easy identifiable.

    Here's some (pseudo) code of what i would like to do:
    Code:
    var html_template1=join('<table><tr><td>Template1</td></tr>',
    '<tr><td>Some look &amp; feel <h2>specific</h2> ',
    'text for first template<div id="updatefield1" style="display:inline;"></div></td></tr>',
    '</table>',
    <p>Here we have another layout <div id="inputfield1"',
    ' style="display:inline;"></div>
    );
    And another look of the same data:
    Code:
    var html_template1=join('<table><tr><td>Template1</td></tr>',
    '<tr><td>Another look &amp; feel <h3>specific</h3> text for another template, which uses a different layout ',
    '<em>second template</em><div id="inputfield1" style="display:inline;"></div></td></tr>',
    '</table>',
    <p>Some dummy extra text, etc, etc <div id="updatedfield1" style="display:inline;"></div>
    );
    These are two 'light' templates, but I want to use few more templates, with the same div id's. In both examples I used the same table as container, but in my app there are more tables, with different layouts and styles.
    The selected markup will be included in a formpanel and then in a window.
    My entire application is built entirely with js, I don't use anything else than the loading mask in the initial document body.
    Please give me a hint! Thanks in advance!

    later edit: i have the forms in a non-ext form, is there a method to reuse an existing html form in a 'templatable' manner?

    ps: please excuse my english

  2. #2
    Ext User
    Join Date
    Jan 2008
    Posts
    12
    Vote Rating
    0
    enterco is on a distinguished road

      0  

    Post Complex form layout design - suggestions

    Complex form layout design - suggestions


    I'm trying to create few complex forms, which must look like some printed documents. After reading the forums I have found that the best (at least for me) method is to create the layout in table layout or in absolute layout. I would appreciate any improvement suggestions.
    I've learned the following:
    - the layout ExtJS uses to display items created (textfield, combo, etc) is "column", all items are stacked from top to bottom.
    - it's a good ideea to use tableLayout to display items which must sit next to other, laid out horizontally, and to display labels in table/absolute layout

    Since it took me some time to figure out, I post here's a part of the the code I use to create a non-extjs-style form, which I will put it into a FormPanel, hoping that it'll shorten someone's diggin':
    PHP Code:
    {
    layout:"table",
    layoutConfig:/*BEGIN*/{
    columns:1
    }/*END*/,
    defaults:/*BEGIN*/{
    bodyStyle:padding:3px;
    }
    /*END*/,
    items:[{
        
    html:"&nbsp;",
        
    height:105,
        
    width:753,
        
    border:false,
        
    items:[{
            
    layout:"table",
            
    layoutConfig:/*BEGIN*/{
    columns:4
    }/*END*/,
            
    defaults:/*BEGIN*/{
    bodyStyle:"padding:2px;",
    borderfalse
    }/*END*/,
            
    width:785,
            
    border:false,
            
    items:[{
                
    html:"&nbsp;",
                
    width:60
              
    },{
                
    width:355,
                
    items:[{
                    
    layout:"table",
                    
    layoutConfig:/*BEGIN*/{
    columns:2
    }/*END*/,
                    
    defaults:/*BEGIN*/{
    border:false
    }/*END*/,
                    
    border:false,
                    
    items:[{
                        
    html:"Cod client:",
                        
    border:false
                      
    },{
                        
    items:[{
                            
    xtype:"textfield",
                            
    fieldLabel:"Text",
                            
    name:"lc_cod_client",
                            
    border:false
                          
    }]
                      }]
                  }]
              },{
                
    colspan:2,
                
    width:348,
                
    items:[{
                    
    layout:"table",
                    
    layoutConfig:/*BEGIN*/{
    columns:2
    }/*END*/,
                    
    defaults:/*BEGIN*/{
    border:false
    }/*END*/,
                    
    border:false,
                    
    items:[{
                        
    html:"Specificație la factură:"
                      
    },{
                        
    items:[{
                            
    xtype:"combo",
                            
    fieldLabel:"Text",
                            
    name:"factura_specificatie",
                            
    hiddenName:"factura_specificatie"
                          
    }]
                      }]
                  }]
              },{
                
    html:"&nbsp;"
              
    },{
                
    items:[{
                    
    layout:"table",
                    
    layoutConfig:/*BEGIN*/{
    columns:2
    }/*END*/,
                    
    defaults:/*BEGIN*/{
    border:false
    }/*END*/,
                    
    border:false,
                    
    items:[{
                        
    html:"Nume client:"
                      
    },{
                        
    items:[{
                            
    xtype:"combo",
                            
    fieldLabel:"Text",
                            
    name:"lc_nume_client",
                            
    hiddenName:"combovalue"
                          
    }]
                      }]
                  }]
              },{
                
    items:[{
                    
    layout:"table",
                    
    layoutConfig:/*BEGIN*/{
    columns:2
    }/*END*/,
                    
    defaults:/*BEGIN*/{
    border:false
    }/*END*/,
                    
    border:false,
                    
    items:[{
                        
    html:"Număr:"
                      
    },{
                        
    items:[{
                            
    xtype:"textfield",
                            
    fieldLabel:"Text",
                            
    name:"textvalue",
                            
    width:101
                          
    }]
                      }]
                  }]
              },{
                
    items:[{
                    
    layout:"table",
                    
    layoutConfig:/*BEGIN*/{
    columns:2
    }/*END*/,
                    
    defaults:/*BEGIN*/{
    border:false
    }/*END*/,
                    
    border:false,
                    
    items:[{
                        
    html:"Data:"
                      
    },{
                        
    items:[{
                            
    xtype:"datefield",
                            
    fieldLabel:"Date",
                            
    name:"factura_data"
                          
    }]
                      }]
                  }]
              },{
                
    html:"&nbsp;",
                
    colspan:3
              
    },{
                
    html:"<em>Pagina: </em>2/2"
              
    }]
          }]
      },{
        
    border:false,
        
    items:[{
            
    layout:"table",
            
    layoutConfig:/*BEGIN*/{
    columns:3
    }/*END*/,
            
    defaults:/*BEGIN*/{
    bodyStyle:"padding:2px;",
    border:false
    }/*END*/,
            
    border:false,
            
    height:96,
            
    items:[{
                
    html:"<em>ENERGIE MĂSURATĂ</em>",
                
    colspan:3
              
    },{
                
    html:"&nbsp;",
                
    width:100
              
    },{
                
    width:297,
                
    items:[{
                    
    layout:"table",
                    
    layoutConfig:/*BEGIN*/{
    columns:2
    }/*END*/,
                    
    defaults:/*BEGIN*/{
    border:false
    }/*END*/,
                    
    border:false,
                    
    items:[{
                        
    html:"Cod LC:"
                      
    },{
                        
    items:[{
                            
    xtype:"textfield",
                            
    fieldLabel:"Text",
                            
    name:"lc_nume"
                          
    }]
                      }]
                  }]
              },{
                
    items:[{
                    
    layout:"table",
                    
    layoutConfig:/*BEGIN*/{
    columns:2
    }/*END*/,
                    
    defaults:/*BEGIN*/{
    border:false
    }/*END*/,
                    
    border:false,
                    
    items:[{
                        
    html:"Denumire LC:"
                      
    },{
                        
    items:[{
                            
    xtype:"textfield",
                            
    fieldLabel:"Text",
                            
    name:"lc_denumire",
                            
    width:257
                          
    }]
                      }]
                  }]
              },{
                
    html:"&nbsp;"
              
    },{
                
    items:[{
                    
    layout:"table",
                    
    layoutConfig:/*BEGIN*/{
    columns:2
    }/*END*/,
                    
    defaults:/*BEGIN*/{
    border:false
    }/*END*/,
                    
    border:false,
                    
    items:[{
                        
    html:"Nivel tensiune PD:"
                      
    },{
                        
    items:[{
                            
    xtype:"textfield",
                            
    fieldLabel:"Text",
                            
    name:"lc_nivel_tensiune_pd"
                          
    }]
                      }]
                  }]
              },{
                
    items:[{
                    
    layout:"table",
                    
    layoutConfig:/*BEGIN*/{
    columns:2
    }/*END*/,
                    
    defaults:/*BEGIN*/{
    border:false
    }/*END*/,
                    
    border:false,
                    
    items:[{
                        
    html:"Tip tarif:"
                      
    },{
                        
    items:[{
                            
    xtype:"combo",
                            
    fieldLabel:"Text",
                            
    name:"textvalue"
                          
    }]
                      }]
                  }]
              }]
          }]
      }

    Best regards,
    Keep doin' good things!
    Attached Images

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar