Results 1 to 5 of 5

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

  1. #1
    Sencha User
    Join Date
    Aug 2011
    Location
    Brescia - Italy
    Posts
    102
    Vote Rating
    4
      1  

    Default 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 User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,050
    Vote Rating
    1381
      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 @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Location
    Brescia - Italy
    Posts
    102
    Vote Rating
    4
      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
      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 User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,050
    Vote Rating
    1381
      -1  

    Default

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

    Code:
    {
        xtype : 'touchgridpanel'
    }
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

Posting Permissions

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