1. #1
    Sencha User
    Join Date
    Feb 2008
    Posts
    116
    Vote Rating
    0
    buntyindia is on a distinguished road

      0  

    Default Form fieldset layout issue

    Form fieldset layout issue


    I have a application view in ExtJs. that was earlier using the Viewport to fit that inside my existing layout i converted it into Layout.

    Earlier in divs visibility:hidden was used, that was creating additional white space between divs but form was good, i replaced this with display:none but now when i am opening forms from this they are little distracted from there position but when i click on any of the field or move the form position, all fields comes back to its original position.

    Firefox


    IE


    IE [After Clicking on field, comes to original position ]


    Please help in this...

    Regards,

  2. #2
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    one word: code!

  3. #3
    Sencha User
    Join Date
    Feb 2008
    Posts
    116
    Vote Rating
    0
    buntyindia is on a distinguished road

      0  

    Default


    Following is the code...in the following code to convert Viewport to Panel I added this

    PHP Code:
     var viewport = new Ext.Panel({
                        
    layout:'border',
                        
    renderTo:document.getElementById('panelDiv'),
                        
    height600,
                        
    items:[ 
    HTML

    PHP Code:
                 <div id="west">
        <
    div id="search">
                <
    div id="searchtop">
                    
                </
    div>
                <
    div id="searchresults"></div>
                <
    div id="searchfooter" style="visibility:hidden;"></div>
            </
    div>
      </
    div>
      <
    div id="north" class="x-layout-inactive-content">
       <
    div class="topbit"><img src="images/dots.gif">test 123</div>
       <
    div id="toolbar"></div>
      </
    div>

      <
    div id="center1">

      </
    div>


    <
    div id="holder" style="visibility:hidden;">
                             <
    div id="form1"  >
                             </
    div>
                             <
    div id="form2">
                             </
    div>
                             <
    div id="form3">
                             </
    div>
                             <
    div id="formIP1">
                             </
    div>                         
                             <
    div id="formC">
                             </
    div>
                             
                             
                             <
    div id="clienta">
                            </
    div>                         
                             <
    div id="clientb">
                            </
    div>
                             <
    div id="clientC">
                            </
    div>             
                             <
    div id="user">
                            </
    div>                 
                            <
    div id="att">
                            </
    div>    

     <
    div id="smDlg">
     </
    div>                
     
     </
    div
    ExtJs Code


    PHP Code:
    Ext.get("btnNewFrom").on("click",newFrm);
                    
    newFrm: function(){
             
    doOrder(true,"btnNewFrom");
                        } 
    PHP Code:
    doOrder: function(pNewCase,btn){
    frmDlg = new Ext.Window( { 
                            
    title'Form',
                            
    closable:false,
                            
    width:490,
                            
    height:455,
                            
    shadow:true,
                            
    modal:true,
                            
    items:new Ext.Panel({
                                 
                                           
    items: {
                                           
    xtype:'tabpanel',
                                           
    id:'tpfrm',
                                           
    activeTab0,
                                           
    defaults:{autoHeight:truebodyStyle:'padding:10px'}, 
                                           
    items:[{
                                               
    title:'form1',
                                               
    el:'form1',
                                               
    iconCls:'frrm'
                                           
    },
                                           {
                                               
    title:'form2',
                                               
    el:'form2',
                                               
    iconCls:'picon'
                                           
    },
                                           {
                                               
    title:'form3',
                                               
    el:'form3',
                                               
    iconCls:'aicon'
                                           
    },
                                           {
                                               
    id:'tabC',
                                               
    title:'C',
                                               
    el:'formC',
                                               
    iconCls:'xicon'
                                           
    }
                                           
                                           ]
                                             }
                                             

                                                                      
                            }),
                            
    buttons: [
                                      { 
    text:'<< Prev',
                                        
    id:'btnPrev',
                                        
    handler: function(){
                                              
    tab Ext.getCmp('tpfrm').items.indexOf(Ext.getCmp('tpfrm').getActiveTab());
                                              
    Ext.getCmp('tpfrm').setActiveTab(tab-1);
                                           }
                                      }
                                      ,
                                      { 
    text:'Next >>',
                                      
    id:'btnNext',
                                      
    handler: function(){
                                              
    tab Ext.getCmp('tpfrm').items.indexOf(Ext.getCmp('tpfrm').getActiveTab());
                                              
    Ext.getCmp('tpfrm').setActiveTab(tab+1);
                                           }                                  
                                      },
                                      
                                      {
                                              
    text'Save',
                                              
    handler: function(){
                                                    
                                                    
    //Build a Tiered call - saves form1 then form2 then form3
                                                    //need to think how to deal with failed transactions                                                
                                                    
    .......
                                              }
                                          },{
                                              
    text'Cancel',
                                              
    handler: function(){
                                                 
    frmDlg.hide();
                                           }
                                          }]
                            
                            
                    });
                    
                  } 
    PHP Code:
    cform = new Ext.form.FormPanel({
            
    labelWidth100,
            
    height:400,
            
    url:'data.jsp',
            
    bodyStyle:'padding:5px 5px 0',
            
    id:'fpOrder1',        
        
    reader: new Ext.data.JsonReader({
                           
    root'rows',
                           
    id'SN',
                           
    totalProperty'results'
                    
    },[                
                                       .......
                       ]),        
            
            
    items:[
                new 
    Ext.form.FieldSet({
                      
    title:'Form Data',
                      
    autoHeight:true,
                      
    labelWidth150,
                      
    defaults:{width:200},
                      
    items:[
                            {
                                           
    xtype:'textfield',
                                           
    fieldLabel'Form Number',
                                           
    name'TCKT_NMBR',
                                           
    maxLength 15,
                                           
    allowBlank:true
                            
    },
                                           
                            {
                                           
    xtype:'combo',
                                           
    fieldLabel'Form Client',
                                           
    name'CLNT_ID',
                                           
    storeformclientDS,
                                           
    displayField:'CLNT_NM',
                                           
    valueField:'CLNT_ID',
                                           
    hiddenName:'CLNT_ID',
                                            
    typeAheadtrue,
                                            
    mode'local',
                                            
    triggerAction'all',
                                            
    emptyText:'Pick One',
                                            
    selectOnFocus:true,
                                            
    forceSelection:true,
                                            
    allowBlank:false

                            
    },
                                    
                            {
                                           
    xtype:'combo',
                                           
    fieldLabel'Form Type',
                                           
    name'FRM_TYPE',
                                           
    storefrmTypeDS,
                                           
    displayField:'code',
                                           
    valueField:'code',
                                           
    hiddenName:'FRM_TYPE',
                                            
    typeAheadtrue,
                                            
    mode'local',
                                            
    triggerAction'all',
                                            
    emptyText:'Pick One',
                                            
    selectOnFocus:true,
                                            
    forceSelection:true,
                                            
    allowBlank:false                                       
                            
    },                                 

                            {
                                           
    xtype:'combo',
                                           
    fieldLabel'Status Code',
                                           
    name'STAT_CD',
                                           
    storeStatusDS,
                                           
    displayField:'desc',
                                           
    valueField:'code',
                                           
    hiddenName:'STAT_CD',
                                            
    typeAheadtrue,
                                            
    mode'local',
                                            
    triggerAction'all',
                                            
    emptyText:'',
                                            
    selectOnFocus:true,
                                            
    forceSelection:true,
                                            
    allowBlank:false                                       
                            
    }
                                  
                            ]
                })
                
                ]
            }); 

    PHP Code:
    form.render(Ext.get('form1'));
            
    form2 Form.Person("fpFrm2","form2");
            
    form3 Form.Person("fpFrm3","form3"); 
    PHP Code:
    Form.Person = function(pRender,....){
        var 
    form1=new Ext.form.FormPanel({
            
    id:2,
            
    url:'Person.htm',
            
    trackResetOnLoad:true,
            
    bodyStyle:'padding:5px 5px 0',
            
            
    reader: new Ext.data.JsonReader({
                
    root'rows',
                
    id'id',
                
    totalProperty'results'
                        
        
    },[
                {
    name'INTN_ID'mapping'INTN_ID'},
                .........
                .........
        ]),             
        
            
    items:[
                      new 
    Ext.form.FieldSet({
                      
    title:'Address Data',
                      
    labelAlign'top',
                      
    labelSeparator:'',                  
                      
    bodyStyle:'padding:5px 5px 0',
                      
    height:340,
                      
    width:460,
                      
    items:[
                             
    //New Line
                                
    {
                                  
    layout:'column',
                                  
    border:false,
                                  
    items:[
                                     {
                                     
    width:125,
                                     
    layout:'form',
                                     
    border:false,
                                     
    items:[
                                            new 
    Ext.form.TriggerField({
                                                
    fieldLabel'SSN',
                                                
    triggerClass :'x-form-search-trigger',
                                                
    name'SSN',
                                                
    allowBlank:true,
                                                
    width:100,
                                                
    labelSeparator:'',
                                                
    maxLength 20,
                                                
    ctCls :'x-form-item'
                                                
    onTriggerClick:function(){
                                                }                                    
                                            })
                                     ]},                                 
                                         
                                     {
                                     
    width:145,
                                     
    layout:'form',
                                     
    id:'relationship',
                                     
    border:false,
                                     
    items:[
                                           {
                                           
    xtype:'combo',                                       
                                           
    fieldLabel'Relationship To Ppt',
                                           
    name'RLTN_TO_PART',
                                           
    displayField:'RLTN_TO_PART_DSCR',
                                           
    valueField:'RLTN_TO_PART',
                                           
    hiddenName:'RLTN_TO_PART',                
                                           
    labelSeparator:'',                                              
                                            
    typeAheadtrue,
                                            
    mode'local',
                                            
    triggerAction'all',
                                            
    emptyText:'Pick One',
                                            
    allowBlank:false,
                                            
    selectOnFocus:true,
                                            
    forceSelection:true,   
                                            
    width:140,
                                            
    ctCls :'x-form-item'
                                           
    }
                                     ]},                                 
                                         
                                     {
                                     
    width:120,
                                     
    layout:'form',
                                     
    border:false,
                                     
    items:[
                                           {
                                           
    xtype:'checkbox',                                       
                                           
    boxLabel 'Confidential',
                                           
    labelSeparator:''
                                           
    name'CNFDTL',
                                           
    id:'cnfdtl',
                                           
    ctCls :'x-form-item'
                                           
    }
                                     ]}
                                     ]                                  
                                },                      
                        
                    
                             
    //New Line
                             
                                
    {
                                  
    id:"Name",
                                  
    layout:'column',
                                  
    border:false,
                                  
    items:[
                                     {
                                     
    width:50,
                                     
    layout:'form',
                                     
    border:false,
                                     
    items:[
                                           {
                                           
    xtype:'combo',                                       
                                            
    displayField:'title',
                                            
    typeAheadtrue,
                                            
    mode'local',
                                            
    triggerAction'all',
                                            
    emptyText:'',
                                            
    allowBlank:true,
                                            
    selectOnFocus:true,
                                            
    fieldLabel'Title',
                                            
    name'FRST_NM_PFX',
                                            
    labelSeparator:'',
                                            
    forceSelection:true,   
                                            
    width:45,
                                            
    ctCls :'x-form-item'
                                           
    }
                                     ]},                                 
                                         
                                     {
                                     
    width:75,
                                     
    layout:'form',
                                     
    border:false,
                                     
    items:[
                                           {
                                           
    xtype:'textfield',
                                           
    fieldLabel'First',
                                           
    allowBlank:true,
                                           
    name'FRST_NM',
                                           
    labelSeparator:'',  
                                           
    width:70,
                           
    maxLength 50,
                           
    ctCls :'x-form-item'
                                           
    }
                                     ]},                                 
                                     {
                                     
    width:75,
                                     
    layout:'form',
                                     
    border:false,
                                     
    items:[
                                           {
                                           
    xtype:'textfield',
                                           
    fieldLabel'Middle',
                                           
    name'MID_INIT',
                                            
    labelSeparator:'',  
                                           
    width:70,
                           
    maxLength 50,
                                            
    ctCls :'x-form-item'
                                           
    }
                                     ]},
                                     {
                                     
    width:110,
                                     
    layout:'form',
                                     
    border:false,
                                     
    items:[
                                           {
                                           
    xtype:'textfield',
                                           
    fieldLabel'Last',
                                           
    name'LAST_NM',
                                           
    allowBlank:true,
                                           
    labelSeparator:'',  
                                           
    width:105,
                           
    maxLength 50,
                                            
    ctCls :'x-form-item'
                                           
    }
                                     ]},
                                     {
                                     
    width:45,
                                     
    layout:'form',
                                     
    border:false,
                                     
    items:[
                                           {
                                            
    xtype:'combo',                                       
                                            
    displayField:'suffix',
                                            
    typeAheadtrue,
                                            
    mode'local',
                                            
    triggerAction'all',
                                            
    emptyText:'',
                                            
    selectOnFocus:true,
                                            
    fieldLabel'Suffix',
                                            
    name'LAST_NM_SFX',
                                            
    labelSeparator:'',
                                            
    forceSelection:true,   
                                            
    width:40 ,
                                            
    ctCls :'x-form-item'
                                           
    }
                                     ]}                                 
                                     ]
                                },
                                
                            
    //New Line
                                
    {
                                  
    id:"Agency",                              
                                  
    layout:'column',
                                  
    border:false,
                                  
    items:[
                                     {

                                     
    width:350,
                                     
    layout:'form',
                                     
    border:false,
                                     
    items:[
                                           {
                                           
    xtype:'textfield',
                                           
    fieldLabel'Agency',
                                           
    name'AGENCY',
                                           
    labelSeparator:'',  
                                           
    width:350,
                           
    maxLength 50,
                           
    ctCls :'x-form-item'
                                           
    }
                                     ]}                               
                                                                   
                                     ]
                                }                               
                                ,
                                
    //New Line
                                
    xtype:'textfield',                           
                                  
    fieldLabel'Address',
                                  
    name'ADDR_LINE_1',
                                  
    labelSeparator:'',
                                  
    width:265,
                      
    maxLength 50,
                                  
    ctCls :'x-form-item' //Overwrite the css to get the line higher up
                                
    },

                                
    //New Line
                                
    xtype:'textfield',                           
                                  
    hideLabeltrue,
                                  
    name'ADDR_LINE_2',
                                  
    labelSeparator:'',
                                  
    width:265,
                      
    maxLength 50,
                                  
    ctCls :'x-form-item' //Overwrite the css to get the line higher up
                                
    },
                                
                                
    //New Line
                                
    xtype:'textfield',                           
                                  
    hideLabeltrue,
                                  
    name'ADDR_LINE_3',
                                  
    labelSeparator:'',
                                  
    width:265,
                      
    maxLength 50,
                                  
    ctCls :'x-form-item' //Overwrite the css to get the line higher up
                                
    },
                                
                                
    //New Line
                                
    xtype:'textfield',                           
                                  
    hideLabeltrue,
                                  
    name'ADDR_LINE_4',
                                  
    labelSeparator:'',
                                  
    width:265,
                      
    maxLength 50,
                                  
    ctCls :'x-form-item' //Overwrite the css to get the line higher up
                                
    },
                                
                                
    //New Line
                                
    xtype:'textfield',                           
                                  
    hideLabeltrue,
                                  
    name'ADDR_LINE_5',
                                  
    labelSeparator:'',
                                  
    width:265,
                      
    maxLength 50,
                                  
    ctCls :'x-form-item' //Overwrite the css to get the line higher up
                                
    },                                 

                                
    //New Line
                                
    {
                                  
    layout:'column',
                                  
    border:false,
                                  
    items:[
                                     {
                                     
    width:105,
                                     
    layout:'form',
                                     
    border:false,
                                     
    items:[
                                           {
                                            
    xtype:'textfield',                                       
                                            
    fieldLabel'City',
                                            
    name'CITY_NM',
                                            
    labelSeparator:'',  
                                            
    width:100    ,
                        
    maxLength 50,
                                            
    ctCls :'x-form-item'
                                           
    }
                                     ]},                 
                                     {
                                     
    width:55,
                                     
    layout:'form',
                                     
    border:false,
                                     
    items:[
                                           {
                                            
    xtype:'combo',                                       
                                            
    displayField:'abbr',
                                            
    typeAheadtrue,
                                            
    mode'local',
                                            
    triggerAction'all',
                                            
    emptyText:'',
                                            
    selectOnFocus:true,
                                            
    fieldLabel'State',
                                            
    name'ST_CD',
                                            
    forceSelection:true,   
                                            
    labelSeparator:'',  
                                            
    width:50  ,
                                            
    ctCls :'x-form-item'
                                           
    }
                                     ]},
                                     {
                                     
    width:95,
                                     
    layout:'form',
                                     
    border:false,
                                     
    items:[
                                           {
                                            
    xtype:'textfield',                                       
                                            
    fieldLabel'Zip + 4',
                                            
    name'PSTL_CD',
                                            
    labelSeparator:'',  
                                            
    width:90   ,
                        
    maxLength 10,
                                            
    ctCls :'x-form-item'
                                           
    }
                                     ]},
                                     {
                                     
    width:55,
                                     
    layout:'form',
                                     
    border:false,
                                     
    items:[
                                           {
                                            
    xtype:'combo',                                       
                                            
    displayField:'abbr',
                                            
    typeAheadtrue,
                                            
    mode'local',
                                            
    triggerAction'all',
                                            
    emptyText:'',
                                            
    selectOnFocus:true,
                                            
    fieldLabel'Country',
                                            
    name'CTRY_CD',
                                            
    forceSelection:true,   
                                            
    labelSeparator:'',  
                                            
    width:50  ,
                                            
    ctCls :'x-form-item'
                                           
    }
                                     ]},
                                                 
                                     
                                     {
                                     
    width:35,
                                     
    layout:'form',
                                     
    border:false,
                                     
    items:[
                                           {
                                            
    xtype:'textfield',
                                            
    name'INTN_ID',
                                            
    fieldLabel'id',
                                            
    allowBlank:true,
                                            
    width:35,
                                            
    readOnly:true,
                                            
    style:"background-color:red",
                                            
    ctCls :'x-form-item'
                                           
    }                                     
                                     ]},
                                     {
                                     
    width:35,
                                     
    layout:'form',
                                     
    border:false,
                                     
    items:[
                                           {
                                            
    xtype:'textfield',
                                            
    name'ORDR_ID',
                                            
    fieldLabel'oid',
                                            
    allowBlank:true,
                                            
    width:35,
                                            
    readOnly:true,
                                            
    style:"background-color:yellow",
                                            
    ctCls :'x-form-item'
                                           
    }                                     
                                     ]},
                                     {
                                     
    width:35,
                                     
    layout:'form',
                                     
    border:false,
                                     
    items:[
                                           {
                                            
    xtype:'textfield',
                                            
    name'CLNT_ID',
                                            
    fieldLabel'clnt',
                                            
    allowBlank:true,
                                            
    width:35,
                                            
    readOnly:true,
                                            
    style:"background-color:green",
                                            
    ctCls :'x-form-item'
                                           
    }                                     
                                     ]}                                    
                                     
                                ]
                                },
                                
                                
    //New Line
                                
    {
                                  
    layout:'column',
                                  
    border:false,
                                  
    items:[
                                     {
                                     
    width:105,
                                     
    layout:'form',
                                     
    border:false,
                                     
    items:[
                                           {
                                            
    xtype:'textfield',                                       
                                            
    fieldLabel'Phone',
                                            
    name'PHN_NMBR',
                                            
    labelSeparator:'',  
                                            
    width:100     ,
                                            
    maxLength 25,
                                            
    ctCls :'x-form-item'
                                           
    }
                                     ]},                 
                                     
    /*{
                                     width:70,
                                     layout:'form',
                                     border:false,
                                     items:[
                                           {
                                            xtype:'radio',
                                            fieldLabel: 'Gender',
                                            boxLabel:'Female',
                                            name: 'GDR',
                                            id:'genderfemale',
                                            labelSeparator:'',
                                            inputValue: 'F',
                                            ctCls :'x-form-item'
                                            
                                           }                                     
                                     ]},                 
                                     {
                                     width:70,
                                     layout:'form',
                                     border:false,
                                     items:[
                                           {
                                            xtype:'radio',
                                            fieldLabel: ' ',
                                            boxLabel:'Male',
                                            fieldLabel: '&nbsp;',
                                            name: 'GDR',
                                            id:'gendermale',
                                            labelSeparator:'',
                                            inputValue: 'M',
                                            ctCls :'x-form-item'
                                           }                                     
                                     ]},*/

                                     
    {
                                     
    width:255,
                                     
    layout:'form',
                                     
    border:false,
                                     
    items:[
                                           {
                                            
    xtype:'textfield',                                       
                                            
    fieldLabel'Email',
                                            
    name'EMAL_ADDR',
                                            
    labelSeparator:'',  
                                            
    width:250 ,
                                            
    maxLength 100,
                                            
    ctCls :'x-form-item'
                                           
    }                                     
                                     ]}                                 
                                     
                                ]
                                }                         
                      ]                     
                })
                ]}
            )
            
    pform.render(Ext.get(pRender));
            };
            --------------------
             var 
    viewport = new Ext.Viewport({
                        
    layout:'border',
                        
    items:[
                            new 
    Ext.BoxComponent({ // raw
                                
    region:'north',
                                
    el'north',
                                
    height:32
                            
    }), {
                                
    region:'east',
                                
    title'Test',
                                
    collapsibletrue,
                                
    split:true,
                                
    width150,
                                
    minSize150,
                                
    maxSize400,
                                
    layout:'fit',
                                                            
    autoScroll:true,
                                                           
                        
    items: new Ext.DataView({
                                 
    id:'dvHist',
                                 
    storelrDS,
                                 
    tpllrTpl ,
                                 
    autoHeight:true,
                                 
    autoWidth:true,
                                 
    itemSelector:''                             
                            
    })                                                        
                             },
                             
                             new 
    Ext.grid.GridPanel({    
                                
    region:'west',
                                
    id:'gridSearch',
                                
    title:'Search',
                                
    split:true,
                                
    width250,
                                
    height:500,
                                
    minSize250,
                                
    maxSize400,
                                
    collapsibletrue,
                                
    margins:'0 0 0 5',
                                                            
    stripeRows:true,
                                                            
    sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
                                    
    multiSelectfalse,                                
                                    
    storesearchDS,
                                    
    columns: [
                                        {
    header"Name",width:150dataIndex'NAME'sortabletrue},    
                                        {
    header"Client",width:100dataIndex'CLNT_NM'sortabletrue}    
                                    ]    ,                        
                                    
                                
                                
    tbar: [
                                                                    new 
    Ext.form.ComboBox({
                                    
    id:"typSelect",
                                    
    storefrmTypeTypeDS,
                                    
    displayField:'code',
                                                                    
    valueField:'code',
                                    
    typeAheadtrue,
                                    
    mode'local',
                                    
    triggerAction'all',
                                    
    emptyText:'Type',
                                    
    selectOnFocus:true,
                                                                    
    typeAhead:true,
                                                                    
    forceSelection:true,                                                            
                                    
    width:60
                                    
    }),
                                    new 
    Ext.form.ComboBox({
                                    
    id:"cbClientSelect",
                                    
    storeclientDS,
                                    
    displayField:'CLNT_NM',
                                                                    
    valueField:'CLNT_ID',
                                    
    typeAheadtrue,
                                    
    mode'local',
                                    
    triggerAction'all',
                                    
    emptyText:'Client',
                                    
    selectOnFocus:true,
                                                                    
    typeAhead:true,
                                                                    
    forceSelection:true,                                                            
                                    
    width:100
                                    
    }),' ',
                                    new 
    Ext.app.SearchField({
                                                                            
    id:'searchfld',
                                        
    storesearchDS,
                                        
    width:90
                                    
    })
                                ] ,
                                
        
                            new 
    Ext.TabPanel({
                                
    region:'center',
                                
    deferredRender:false,
                                
    activeTab:0,
                                
    tabPosition:'bottom',
                                
    items:[{
                                    
    contentEl:'center1',
                                    
    title'Order',
                                    
    closable:false,
                                    
    autoScroll:true,
                                    
    layout:'anchor',
                                        
    defaults: {autosize:true},

                    
    items:[{
                        
    title:'Form',                    
                        
    anchor:'100% 30%',
                        
    id:'pnlForm',
                        
    bodyStyle :'background-color:#f1f1f1',
                        
    tbar:[ {
                            
    text:"New",
                            
    iconCls'newForm',
                            
    id:'btnNewFrom'
                             
    },' ',
                            {
    text:"Edit",
                            
    iconCls'editForm',
                            
    id:'btnEditForm',
                
    disabled:'true'
                             
    },' ',
                            {
    text:"IP",
                            
    iconCls'ticon',
                            
    id:'btnIParty',
                
    disabled:'true'
                             
    },' ',                                                  
                            {
    text:"Ordr",
                            
    iconCls'newoerd',
                            
    id:'btnNewordr',
                
    disabled:'true'            
                             
    },
                             {
                               
    xtype:'tbseparator',
                               
    id:'sptAdmin'
                             
    }
                             ,
                            
                            
    user_admin =="Y" ?
                            {
    text:"Admin",
                            
    iconCls'settings',
                            
    id:'btnClient'
                             
    } : ""
                             
                             
                         
    ],                          
                        
    items: new Ext.DataView({
                                 
    id:'dvOrder',
                                 
    storeorderDS,
                                 
    prepareData:this.prepareOrderData,
                                 
    tplorderTpl ,
                                 
    autoHeight:true,
                                 
    autoWidth:true,
                                 
    itemSelector:''                             
                            
    })
                    }
                    
                    
                    ,{
                        
    title:'AAa',
                        
    anchor:'100% 35%',
                        
    header:false,
                        
    frame:false,
                        
    bodyStyle :'background-color:#f1f1f1',
                        
    layout:'column',
                        
    height:'100%',
                        
    id:'layoutAAG',
                        
    defaults: {frame:true,autosize:true},
                          
    items:[{
                                                            
    iconCls:'picon',
                                
    title:'Form1',
                                                            
    id:'pnlfrm',
                                
    header:true,
                                
    columnWidth0.33,
                                                            
    items: new Ext.DataView({
                                                                     
    id:'dvPpt',
                                                                     
    storeorderDS,
                                                                     
    prepareData:this.prepareOrderData,
                                                                     
    tplpTpl ,
                                                                     
    height:'100%',
                                                                     
                                                                     
    itemSelector:''                             
                                                                
    })                                                        
                                                            
                                                            
                                                            
                            },{
                                                            
    iconCls:'aicon',
                                
    title:'Form2',
                                                            
    id:'pnlfrm2',
                                
    header:true,
                                
    columnWidth0.33 ,
                                                            
    items: new Ext.DataView({
                                                                     
    id:'dvAlt',
                                                                     
    storeorderDS,
                                                                     
    prepareData:this.prepareOrderData,
                                                                     
    tplaTpl ,
                                                                     
    height:'100%',
                                                                     
    itemSelector:''                             
                                                                
    })                                                        
                            },{
                                                            
    iconCls:'xicon',
                                
    title:'frm3',
                                
    header:true,
                                                            
    id:'pnlfrm3',
                                
    columnWidth0.34 ,
                                                            
    items: new Ext.DataView({
                                                                     
    id:'dv',
                                                                     
    storeDS,
                                                                     
    prepareData:this.preparehhData,
                                                                     
    tplqTpl ,
                                                                     
    height:'100%',
                                                                     
    itemSelector:''                             
                                                                
    })                                                        
                            }
                                                    
                                                    
                                                    
                                                    ]                    
                                            
                    },{
                        
    title:'Parties',
                        
    id:'pnlIParty',
                        
    bodyStyle :'background-color:#f1f1f1',
                        
    iconCls:'ticon',                    
                        
    frame:false,
                        
    anchor:'100% 35%',                    
                        
    header:true,
                        
    autoScroll:true,
                        
    items: new Ext.DataView({
                                 
    id:'dvTp',                             
                                 
    storeiPrtyDS,
                                 
    prepareData:this.prepareIPartyData,
                                 
    tpliPartyTpl ,
                                 
    autoHeight:true,
                                 
    autoWidth:true,
                                 
    itemSelector:''                             
                            
    })                         

                    }]
                                }
    /*,{
                                    contentEl:'center2',
                                    title: 'History',
                                    autoScroll:true
                                }*/
    ]
                                                            
                                                      
                                                            
                                                            
                            })
                         ]
                    }); 

  4. #4
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    change your code to NOT use el.

    el is NOT an acceptable configuration parameter. Please try it with that change and see if it fixes your issue.

  5. #5
    Sencha User
    Join Date
    Feb 2008
    Posts
    116
    Vote Rating
    0
    buntyindia is on a distinguished road

      0  

    Default


    Quote Originally Posted by jgarcia@tdg-i.com View Post
    change your code to NOT use el.

    el is NOT an acceptable configuration parameter. Please try it with that change and see if it fixes your issue.
    Can you please tell me what I use instead of el. As I am repairing an existing application....newbie for extjs.. Any example will be helpfull

    Will it effect lot of code?

    But then how it was earlier working with Viewport?

  6. #6
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    use renderTo. are you using custom css btw?

  7. #7
    Sencha User
    Join Date
    Feb 2008
    Posts
    116
    Vote Rating
    0
    buntyindia is on a distinguished road

      0  

    Default


    Quote Originally Posted by jgarcia@tdg-i.com View Post
    use renderTo. are you using custom css btw?
    If i am understanding it right You want to say render directly not in DIV?

    Where i insert renderTo: <div name> ? instead of el right

    inside
    Form.Person = function(pRender,....)
    already rendering pform.render(Ext.get(pRender));

    How to modify then ?



    Only using CSS for specifying the Icon Images.

Thread Participants: 1