Page 1 of 2 12 LastLast
Results 1 to 10 of 15

Thread: open panel in 'center' position in Layout Example

  1. #1
    Ext User Stripeman's Avatar
    Join Date
    Apr 2008
    Location
    Heidelberg Germany
    Posts
    275

    Question open panel in 'center' position in Layout Example

    hi...
    I am trying to open a panel in the center position in a Viewport.. most of this is from teh complext example. The below code does work... but not like I think its meant to... when someone click on a icon on the left of the layout.. it shoudl open up the "textfunction" formpanel in the 'center' of the layout, as well as destroy the content currently in it. see before and after images attached. I am not sure if thsi is the right way to do it:
    Code:
    Ext.getCmp('MyColumnLayout3').setVisible(false);
    then calling the function to display the desired panel.

    I have looked and looked through examples and webpages.. but literally i can find no examples that show opening links into the desired regions.

    I hope someone can assist... thanks..


    PHP Code:
    Ext.onReady(function(){
        
    //This is a MUST for ALL Ext scripts.  It is the basis on which everything within Ext is aligned
        
    Ext.BLANK_IMAGE_URL '../images/s.gif';
        
    // This allows you to have mouseover tooltips.  Be sure to include this at all times as well
        
    Ext.QuickTips.init();     
        
    PageInit();
                      
    }, 
    thistrue);

    function 
    PageInit(){
        
    document.body.focus();
        
    pageLayout = new pageLayout();
        
    pageLayout.init(); 
        
    pageLayout.createLayout();
        
     
    }

    // Get the params from the URL.  This allows you to GET any param using this manner:
    // var UrlArg = Ext.getUrlParam('int');
    Ext.getUrlParam = function(param){
       var 
    params Ext.urlDecode(location.search.substring(1));
       return 
    param params[param] : params;
    }

    Ext.namespace('pageLayout');

    var 
    pageLayout = function(){
        
        
    //var nav   = Ext.getUrlParam('nav');
        
    var page    Ext.getUrlParam('page');
        var 
    start   Ext.getUrlParam('start');
        var 
    limit   Ext.getUrlParam('limit');
        var 
    sortOn;
        var 
    sortDir;
        var 
    metadataForm;
        var 
    viewport;
        
        
        return {
            
    init: function(){
             
               var 
    createPageLayout = function(){
                   
                   if (!
    page)  page 'no content';
                   
                   if (!
    limit)     limit   100;         else limit    limit;
                   if (!
    start)     start   0;           else start    start;
                   if (!
    sortOn)    sortOn  "post_date"; else sortOn   sortOn;
                   if (!
    sortDir)   sortDir "DESC";      else sortDir  sortDir;
                   
                   
                   switch (
    page)
                   {
                       case (
    "new_requests"):
                           
    //New request function
                           
    break; 
                       case (
    "approved_requests"):
                           
    //Approved Requests function
                           
    break; 
                       case (
    "onhold_requests"):
                           
    //On Hold requests function
                           
    break; 
                       case (
    "denied_requests"):
                           
    //Denied requests
                           
    break; 
                       case (
    "user_admin"):
                           
    //user/group admin
                           
                           
    break;                    
                       default:
                           
    p_panelsMainPage.init();
                                  
                   }                 
                   
               }();
               
            },
            
    MyCallback : function(error){
                
    Ext.MessageBox.alert("Error"errornullthis); //title, msg, fn, scope 
            
    },
            
    defaultFailedCallback : function(erroruserContextmethodName){
                 
                
    Ext.MessageBox.alert("Error"error.get_message(), nullthis); //title, msg, fn, scope 
               
            
    },
            
    testfunction : function(){
                        
    Ext.msg.msg('Action''<div style="color:#6B7952;">You clicked on the New List.</div>');
                        
    //Ext.getCmp('navPanels').innerHTML= '';
                        
    metadataForm = new Ext.form.FormPanel({
                            
    renderTo'navPanels',
                            
    labelWidth75// label settings here cascade unless overridden
                            
    frame:true,
                            
    title'Pending Records',
                            
    bodyStyle:'padding:5px 5px 0',
                            
    width350,
                            
    autoHeighttrue,
                            
    defaults: {width230},
                            
    defaultType'textfield',
                            
    items: [{
                                    
    fieldLabel'Category',
                                    
    name'categoryType',
                                    
    allowBlank:false
                                
    },{
                                    
    fieldLabel'Type Id',
                                    
    name'typeId'
                                
    },{
                                    
    fieldLabel'Description',
                                    
    name'description'
                                
    }            
                            ],    
                            
    buttons: [{
                                
    text'Save'
                            
    },{
                                
    text'Cancel'
                            
    }],
                            
    bbar: [{ text'Button'}],
                            
    listeners: {
                                
    render: function(p) {
                                    
    p.footer.dom.appendChild(p.getBottomToolbar().el.dom);
                                }
                            }
                        }); 
                        
                    
    Ext.getCmp('MyColumnLayout3').setVisible(false);
                    
            },
            
    createLayout : function(){
                
                 
    viewport = new Ext.Viewport({
                     
    layout:'border',
                     
    autoDestroytrue,
                     
    id'mainViewPort',
                     
    items:[
                         new 
    Ext.BoxComponent({  
                             
    region:'north',
                             
    el'north',
                             
    height:32
                         
    }),{
                             
    region:'south',
                             
    contentEl'south',
                             
    split:true,
                             
    height100,
                             
    minSize100,
                             
    maxSize200,
                             
    collapsibletrue,
                             
    title:'South',
                             
    margins:'0 0 0 0'
                         
    },{
                             
    region:'west',
                             
    id:'west-panel',
                             
    title:'Navigation',
                             
    split:true,
                             
    width200,
                             
    minSize175,
                             
    maxSize400,
                             
    collapsibletrue,
                             
    margins:'0 0 0 5',
                             
    layout:'accordion',
                             
    layoutConfig:{
                                 
    animate:true
                             
    },
                             
    items: [{
                                 
    contentEl'west',
                                 
    title:'Main',
                                 
    border:false,
                                 
    iconCls:'nav'
                             
    },{
                                 
    title:'Settings',
                                 
    html:'<p>Some settings in here.</p>',
                                 
    border:false,
                                 
    iconCls:'settings'
                             
    }]
                         },
                         new 
    Ext.TabPanel({
                             
    region:'center',
                             
    id'center',
                             
    deferredRender:false,
                             
    activeTab:1,
                             
    items:[{
                                 
    contentEl:'center1',
                                 
    title'Close Me',
                                 
    closable:true,
                                 
    autoScroll:true
                             
    },{
                                 
    contentEl:'center2',
                                 
    title'Center Panel',
                                 
    autoScroll:true
                             
    }]
                         })
                      ]
                 });
                 
                 
    Ext.get("hideit").on('click', function() {
                     var 
    Ext.getCmp('west-panel');
                     
    w.collapsed w.expand() : w.collapse(); 
                  });
                
            }
        }
        
    }; 
    Attached Images Attached Images

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

    Default

    What's with renderTo?

    Why are yuo rendering stuff yourself, whe you know full well that that is the job of the Container's layout manager?

  3. #3
    Ext User Stripeman's Avatar
    Join Date
    Apr 2008
    Location
    Heidelberg Germany
    Posts
    275

    Default

    Animal,
    I dont know "full well".

    A while back i was posting quite often here.. and had taken a long, involuntary break from PHP/intoductory Ext developement and never once before even touched a viewport.

    I tried NOT using the renderTo.. but the grid would not display at all. In essence my post is saying something isnt right.

    This is my first stab at using a viewport and just need a bit of guidence. Thanks for any help.

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

    Default

    The info is absolutely there in the docs. It has been repeated here by me probably 10 or more times per week since Ext 2.0 was released.

    You absolutely MUST become familiar with the Container class

    http://extjs.com/deploy/ext-3.0-rc2/...=Ext.Container

    http://extjs.com/deploy/ext-3.0-rc2/...r&member=items

    http://extjs.com/deploy/ext-3.0-rc2/...&member=layout

    http://extjs.com/deploy/ext-3.0-rc2/...ner&member=add

    http://extjs.com/deploy/ext-3.0-rc2/...ember=renderTo

    So, how is this information obscured?

  5. #5
    Ext User Stripeman's Avatar
    Join Date
    Apr 2008
    Location
    Heidelberg Germany
    Posts
    275

    Default

    I will hit these links hard Animal and if i still have questions i will bump this thread agian.. thanks.

  6. #6
    Ext User Stripeman's Avatar
    Join Date
    Apr 2008
    Location
    Heidelberg Germany
    Posts
    275

    Default

    ok... after doing some reading, i see that if its a child of the container then yes it will open in a new tab with this:
    PHP Code:
        Ext.getCmp('center').add(addRecord);
        
    Ext.getCmp('center').setActiveTab(addRecord); 
    The result is attached. This is good stuff and thank you.

    However, if i want the content to show in the middle of the page so that the grid or form is sized appropirately and isnt the WHOLE tab, I assume that i build the desired grid in another container in that tab(?).

    also... REF http://extjs.com/deploy/ext-3.0-rc2/...ner&member=add
    When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's layout manager. If you expect child items to be sized in response to user interactions, you must specify a layout manager which creates and manages the type of layout you have in mind.
    I dont understand how this statement relates to this the example:
    PHP Code:
    new Ext.Window({
        
    width:300height300,
        
    layout'fit'// explicitly set layout manager: override the default (layout:'auto')
        
    items: [{
            
    title'Panel inside a Window'
        
    }]
    }).
    show(); 
    how is the layout manager specified? 'FIT' is a layout manager ? I would expect a name, ID or something.
    Attached Images Attached Images

  7. #7
    Ext User Stripeman's Avatar
    Join Date
    Apr 2008
    Location
    Heidelberg Germany
    Posts
    275

    Default

    also... why is it that when i click on the link a second time to open that tab the content is blank... but when i click on a different tab and back .. i see my form... .. did i miss something?

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

    Default

    layout: 'fit' uses an instace of Ext.layout.FitLayout to size a single child item exactly to fit the Container's available space.

    Click a second time?

    Show code.

    Two things to remember. Container.remove destroys the removed Component by default. As described here (and you must follow links when you peruse docs): http://extjs.com/deploy/ext-3.0-rc2/...&member=remove

    Component IDs must (of course) be unique.

  9. #9
    Ext User Stripeman's Avatar
    Join Date
    Apr 2008
    Location
    Heidelberg Germany
    Posts
    275

    Talking

    Should i use container.remove when i switch back and forth on tabs ?

    about the click on second time please see result (attached images). Iam not sure if am supposed to do a "doLayout" somehow on an element or what...

    code below:
    PHP Code:
    Ext.namespace('pageLayout');

    var 
    pageLayout = function(){
        
        
    //var nav   = Ext.getUrlParam('nav');
        
    var page    Ext.getUrlParam('page');
        var 
    start   Ext.getUrlParam('start');
        var 
    limit   Ext.getUrlParam('limit');
        var 
    sortOn;
        var 
    sortDir;
        var 
    addRecord;
        var 
    viewRecord;
        var 
    viewportMain;
        
        
        return {
            
    init: function(){
             
               var 
    createPageLayout = function(){
                   
                   if (!
    page)  page 'no content';
                   
                   if (!
    limit)     limit   100;         else limit    limit;
                   if (!
    start)     start   0;           else start    start;
                   if (!
    sortOn)    sortOn  "post_date"; else sortOn   sortOn;
                   if (!
    sortDir)   sortDir "DESC";      else sortDir  sortDir;
                   
                   
                   switch (
    page)
                   {
                       case (
    "new_requests"):
                           
    //New request function
                           
    break; 
                       case (
    "approved_requests"):
                           
    //Approved Requests function
                           
    break; 
                       case (
    "onhold_requests"):
                           
    //On Hold requests function
                           
    break; 
                       case (
    "denied_requests"):
                           
    //Denied requests
                           
    break; 
                       case (
    "user_admin"):
                           
    //user/group admin
                           
                           
    break;                    
                       default:
                           
    p_panelsMainPage.init();
                                  
                   }                 
                   
               }();
               
            },
            
    MyCallback : function(error){
                
    Ext.MessageBox.alert("Error"errornullthis); //title, msg, fn, scope 
            
    },
            
    defaultFailedCallback : function(erroruserContextmethodName){
                 
                
    Ext.MessageBox.alert("Error"error.get_message(), nullthis); //title, msg, fn, scope 
               
            
    },
            
    fn_addRecord : function(){
                        
    Ext.msg.msg('Action''<div style="color:#6B7952;">You clicked on the New List.</div>');
                        
    //Ext.getCmp('navPanels').innerHTML= '';
                        
    addRecord = new Ext.form.FormPanel({
                            
    //renderTo: 'navPanels',
                            ///autoEl: 'div',
                             
    id'id_pendingRecords',
                            
    labelWidth75// label settings here cascade unless overridden
                            
    frame:true,
                            
    title'Pending Records',
                            
    bodyStyle:'padding:5px 5px 0',
                            
    width350,
                            
    closabletrue,
                            
    autoHeighttrue,
                            
    defaults: {width230},
                            
    defaultType'textfield',
                            
    items: [{
                                    
    fieldLabel'Category',
                                    
    name'categoryType',
                                    
    allowBlank:false
                                
    },{
                                    
    fieldLabel'Type Id',
                                    
    name'typeId'
                                
    },{
                                    
    fieldLabel'Description',
                                    
    name'description'
                                
    }            
                            ],    
                            
    buttons: [{
                                
    text'Save'
                            
    },{
                                
    text'Cancel'
                            
    }],
                            
    bbar: [{ text'Button'}],
                            
    listeners: {
                                
    render: function(p) {
                                    
    p.footer.dom.appendChild(p.getBottomToolbar().el.dom);
                                }
                            }
                        });
                       
    //viewport.getComponent('MyColumnLayout3').setVisible(false);
                        //Ext.getCmp('MyColumnLayout3').setVisible(false);
                        //var region = pageLayout.viewport.center.metadataForm;
                       
    Ext.getCmp('center').add(addRecord);
                       
    Ext.getCmp('center').setActiveTab(addRecord);
                       
    //Ext.getCmp('center').render();
                    
            
    },
            
    fn_viewRecord: function (){
                
                
    viewRecord = new Ext.TabPanel({
                        
    labelWidth75// label settings here cascade unless overridden
                            
    id'id_viewRecord',
                        
    border:true,
                           
    frame:true,
                           
    closabletrue,
                           
    title'Record Details',
                           
    bodyStyle:'padding:5px 5px 0',                    
                        
    activeTab:1,
                        
    tabPosition:'top',
                        
    height:400,
                        
    width:600,
                        
    items:[{
                            
    html:'<p>A TabPanel component can be a region.</p>',
                            
    title'A Tab',
                            
    autoScroll:true
                        
    },
                        new 
    Ext.Panel({
                            
    id'id_viewRecord2',
                            
    border:true,
                            
    title'Viewing Record',    
                            
    iconCls'icon-pkg',
                               
    frame:true,
                               
    closabletrue,
                               
    items: [
                                new 
    Ext.grid.PropertyGrid({                                
                                    
    width:500,
                                    
    height550,                                
                                    
    title'Property Grid',
                                    
    source: {
                                        
    "(name)""Properties Grid",
                                        
    "grouping"false,
                                        
    "autoFitColumns"true,
                                        
    "productionQuality"false,
                                        
    "created": new Date(Date.parse('10/15/2006')),
                                        
    "tested"false,
                                        
    "version".01,
                                        
    "borderWidth"1
                                    
    }
                                })
                            ]
                        })
                        ]
                    });

                   
    Ext.getCmp('center').add(viewRecord);
                   
    Ext.getCmp('center').setActiveTab(viewRecord);
            },
            
    createLayout : function(){
                
                 
    viewportMain = new Ext.Viewport({
                     
    layout:'border',
                     
    autoDestroytrue,
                     
    id'mainViewPort',
                     
    items:[
                         new 
    Ext.BoxComponent({  
                             
    region:'north',
                             
    el'north',
                             
    height:32
                         
    }),{
                             
    region:'south',
                             
    contentEl'south',
                             
    split:true,
                             
    height100,
                             
    minSize100,
                             
    maxSize200,
                             
    collapsibletrue,
                             
    title:'South',
                             
    margins:'0 0 0 0'
                         
    },{
                             
    region:'west',
                             
    id:'west-panel',
                             
    title:'Navigation',
                             
    split:true,
                             
    width200,
                             
    minSize175,
                             
    maxSize400,
                             
    collapsibletrue,
                             
    margins:'0 0 0 5',
                             
    layout:'accordion',
                             
    layoutConfig:{
                                 
    animate:true
                             
    },
                             
    items: [{
                                 
    contentEl'west',
                                 
    title:'Main',
                                 
    border:false,
                                 
    iconCls:'nav'
                             
    },{
                                 
    title:'Settings',
                                 
    html:'<p>Some settings in here.</p>',
                                 
    border:false,
                                 
    iconCls:'settings'
                             
    }]
                         },
                         new 
    Ext.TabPanel({
                             
    region:'center',
                             
    id'center',
                             
    deferredRender:false,
                             
    activeTab:1,
                             
    items:[{
                                 
    contentEl:'center1',
                                 
    title'Close Me',
                                 
    closable:true,
                                 
    autoScroll:true
                             
    },{
                                 
    contentEl:'center2',
                                 
    title'Center Panel',
                                 
    autoScroll:true
                             
    }]
                         })
                      ]
                 });
                 
                 
    this.viewportMain viewportMain;
                 
                 
    Ext.get("hideit").on('click', function() {
                     var 
    Ext.getCmp('west-panel');
                     
    w.collapsed w.expand() : w.collapse(); 
                  });
                
            }
        }
        
    }; 
    Attached Images Attached Images

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

    Default

    Component IDs must (of course) be unique.

    What is this contentEl? Why did you decide to use it?

    http://extjs.com/deploy/ext-3.0-rc2/...mber=contentEl.

    STOP NOW.

    Go back.

    Start learning again.

    Build slowly.

    THE PRINCIPLE: CONTAINERS CONTAIN COMPONENTS. RENDERING AND SIZING THOSE COMPONENTS IS DONE BY THE CONTAINER'S LAYOUT.

    That's it. When you get that, everything works. If you don't, nothing will. Nobody will write that app for yo. You have to learn the principle and then apply it.

Page 1 of 2 12 LastLast

Posting Permissions

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