1. #1
    Sencha User
    Join Date
    Aug 2011
    Location
    Brescia - Italy
    Posts
    102
    Vote Rating
    4
    tino7_03 is on a distinguished road

      1  

    Default Ext.ux.touch.grid.View under Ext.Panel

    Ext.ux.touch.grid.View under Ext.Panel


    I have an Ext.ux.touch.grid.View under a Ext.Panel like this

    PHP Code:
    Ext.create('Ext.Panel',  {            
    config:{                
           
    items:[                            
                 
    Ext.create('Ext.ux.touch.grid.View', {
                                     
    fullscreen true,

    .
    .
    .

    and it works fine.

    But if I use "fullscreen:true" under the panel like this:

    PHP Code:
    Ext.create('Ext.Panel',  {
                
    config:{
                    
    fullscreen true,
                        
    items:[
                                
    Ext.create('Ext.ux.touch.grid.View', {
    .
    .
    .

    the screen is empty...
    I don't understand how I must use the grid in the panel in a MVC app, where I must have a fullscreen panel in the viewport...

    Thanks in advance.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,548
    Vote Rating
    872
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      1  

    Default


    If you put fullscreen to true on a component, that component will be removed from it's parent and added to the Ext.Viewport. So the reason why you saw it in the first time is because Ext.Viewport is using card layout which will manage the size of the Ext.ux.touch.grid.View. So if you want to wrap the grid within an Ext.Panel then the Ext.Panel needs to use a layout manager like fit.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Location
    Brescia - Italy
    Posts
    102
    Vote Rating
    4
    tino7_03 is on a distinguished road

      1  

    Default


    thanks for your reply,
    I have tryed with this code:

    PHP Code:
    Ext.define('GpMobile.view.Customers', {
        
    extend'Ext.Panel',
        
    alias 'widget.customers',
        
    config:{
            
    fullscreen:true,
            
    items:[
                   new 
    Ext.create('Ext.Panel',{
                     
                           
                           
    layout:'fit',
                           
    items:[
                                  
                                  
    Ext.create('Ext.ux.touch.grid.View', {
                                      
    id:'gv_customers',
                                      
    name:'gv_customers',
                                      
    store      Ext.create('GpMobile.store.Customers'),
                                      
    features   : [
                                          {
                                              
    ftype    'Ext.ux.touch.grid.feature.HeaderMenu',
                                              
    launchFn 'initialize'
                                          
    },
                                          {
                                              
    ftype    'Ext.ux.touch.grid.feature.Paging',
                                              
    launchFn 'initialize'
                                          
    },
                                          {
                                              
    ftype    'Ext.ux.touch.grid.feature.Sorter',
                                              
    launchFn 'initialize'
                                          
    },
                                          {
                                              
    ftype    'Ext.ux.touch.grid.feature.FilterRow',
                                              
    launchFn 'initialize',
                                              
    filtersDisabled:true
                                          
    }
                                      ],
                                      
    columns   : [
                                          {
                                              
    header    'Ragione sociale',
                                              
    dataIndex 'an_descr1',
                                              
    width     '100%',
                                              
    sortable  true
                                          
    }
                                      ]
                                  })
                                
                                ]
                   
                   
                   
                           
                       
                   })
                   
             ]
            
            
        }
    }); 
    but the screen is always empty. If I try with "vbox" layout the grid is visible, but the data are not visible (and the store is full)....

  4. #4
    Sencha User
    Join Date
    Aug 2011
    Location
    Brescia - Italy
    Posts
    102
    Vote Rating
    4
    tino7_03 is on a distinguished road

      1  

    Default


    Solved!!!!

    PHP Code:
    Ext.define('GpMobile.view.Customers', {
        
    extend'Ext.Panel',
        
    alias 'widget.customers',
        
    config:{
            
    fullscreen:true,
            
    layout:'fit',
            
    items:[
                   
                        
    Ext.create('Ext.ux.touch.grid.View', {
                            
    id:'gv_customers',
                            
    name:'gv_customers',
                            
    store      Ext.create('GpMobile.store.Customers'),
                            
    features   : [
                                {
                                    
    ftype    'Ext.ux.touch.grid.feature.HeaderMenu',
                                    
    launchFn 'initialize'
                                
    },
                                {
                                    
    ftype    'Ext.ux.touch.grid.feature.Paging',
                                    
    launchFn 'initialize'
                                
    },
                                {
                                    
    ftype    'Ext.ux.touch.grid.feature.Sorter',
                                    
    launchFn 'initialize'
                                
    },
                                {
                                    
    ftype    'Ext.ux.touch.grid.feature.FilterRow',
                                    
    launchFn 'initialize',
                                    
    filtersDisabled:true
                                
    }
                            ],
                            
    columns   : [
                                {
                                    
    header    'Ragione sociale',
                                    
    dataIndex 'an_descr1',
                                    
    width     '100%',
                                    
    sortable  true
                                
    }
                            ]
                        })
                  ]
                   
                   
              }  
            
            
            
      
    }); 
    Thanks for your help mitchellsimoens

  5. #5
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,548
    Vote Rating
    872
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      -1  

    Default


    You shouldn't use Ext.create within the config object like that. Use the xtype way:

    Code:
    {
        xtype : 'touchgridpanel'
    }
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1