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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Vote Rating
    1272
      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
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Vote Rating
    1272
      -1  

    Default

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

    Code:
    {
        xtype : 'touchgridpanel'
    }
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    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
  •