1. #1
    Sencha User
    Join Date
    Oct 2012
    Posts
    29
    Answers
    2
    Vote Rating
    0
    jerrysolomon is on a distinguished road

      0  

    Default Answered: DataView inside of other containers

    Answered: DataView inside of other containers


    Hi. Noob here. Trying to create a tab panel app, with each panel containing a dataview. I've got the dataview working, grabbing json data from a .ashx handler and can render the dataview to the viewport. I've got the dataview in a separate js file in the view folder. However, I can't seem to find the right syntax to incorporate the dataview as an item in the tab panel (defined in a separate view js file). I've tried every combo I can think up as Ext. create and xtype. Any help would be greatly appreciated!
    Thanks.

  2. Code:
    Ext.define("Sencha.view.Main", {
        extend: 'Ext.tab.Panel',
        xtype: 'main',
     requires: 'Sencha.view.DView1',
        config: {
            tabBarPosition: 'bottom',
       items: [  
       //Ext.create('Sencha.view.DView2'),     
               {
                    title: 'Welcome',
                    iconCls: 'home',
        xtype: 'dview1' 
               },
                     {
                    title: 'Get Started',
                    iconCls: 'action',
                    html: 'another tab'
                }
            ]   
        }
    });

  3. #2
    bricemason's Avatar
    Join Date
    Jan 2008
    Location
    Upstate NY
    Posts
    280
    Answers
    49
    Vote Rating
    44
    bricemason has a spectacular aura about bricemason has a spectacular aura about bricemason has a spectacular aura about

      0  

    Default


    It sounds like you're on your way. Here's an example, beginning with the dataview:

    Code:
    Ext.define('MyApp.view.People', {
        extend: 'Ext.dataview.DataView',
        xtype: 'people',
        config: {
            store: 'people',
            itemTpl: '<div>{name} is {age} years old</div>'
        }
    });
    and then the tab panel:

    Code:
    Ext.define('MyApp.view.Main', {
        extend: 'Ext.tab.Panel',
        xtype: 'main',
        config: {
            tabBarPosition: 'bottom',
    
    
            items: [
                {
                    title: 'Welcome',
                    iconCls: 'home',
                    xtype: 'people'
                },
                {
                    title: 'Get Started',
                    iconCls: 'action',
                    html: 'another tab'
                }
            ]
        }
    });
    The dataview is the first item in the tab panel and is configured by its xtype 'people'. If this doesn't help, please post the code that you tried and any relevant details.

    Brice
    Brice Mason
    Front End Developer
    Modus Create

    @bricemason
    bricemason.com

    Sencha Touch Screencasts
    Vimeo - Sencha Touch Channel

    Github Projects:
    Sencha Cordova Builder enables the automatic creation, building, and running of PhoneGap (Cordova) projects with Sencha Touch.

    Am I Sencha Touch Ready? checks your system to determine what you need to do to start Sencha Touch development. If you're having trouble getting up and running, try this out.

    Sencha Tools Bridge allows Sencha SDK Tools to co-exist with Sencha Cmd on the same system.

  4. #3
    Sencha User
    Join Date
    Oct 2012
    Posts
    29
    Answers
    2
    Vote Rating
    0
    jerrysolomon is on a distinguished road

      0  

    Default Here's the non-working code

    Here's the non-working code


    Thanks for the reply, Brice. Here's the code I'm working with. I've tried to simplify the dataview to make sure that it's not specifically my problem:
    Code:
    Ext.define('senchaPlay.view.DView2', {
        extend: 'Ext.dataview.DataView',
        xtype: 'dview2',  
        config: {
                       store: {
                        fields: ['name', 'age'],
                        data: [
                            {name: 'Django', age: 35},
                            {name: 'Rob', age: 45},
                            {name: 'Toshiro', age: 30},
                            {name: 'Jacky', age: 55},
                            {name: 'Ed', age: 60},
                        ]
                    },
                    itemTpl: '<div>{name} is {age} years old</div>'
                }
    });
    And here's the Main view:
    Code:
    Ext.define("senchaPlay.view.Main", {
        extend: 'Ext.tab.Panel',
        xtype: 'main',
        config: {
            tabBarPosition: 'bottom',
       items: [       
               {
                    title: 'Welcome',
                    iconCls: 'home',
        xtype: 'dview2'
        
               },
                     {
                    title: 'Get Started',
                    iconCls: 'action',
                    html: 'another tab'
                }
            ]   
        }
    });
    If I comment out the xtype:'dview2' line from Main, the app runs. But when I add it back, the app hangs and I get a blank, blue screen. (I'm using Sencha Touch 2.0.1.1)
    Jerry

  5. #4
    Sencha User
    Join Date
    Oct 2012
    Posts
    29
    Answers
    2
    Vote Rating
    0
    jerrysolomon is on a distinguished road

      0  

    Default This is interesting...

    This is interesting...


    I thought that xtype was supposed to instantiate a class. However, it doesn't seem to do that for the dataview inside of another container. When I instantiate the dataview in the definition file for the tab panel container, everything works (different app from above but everything else the same):
    Code:
    var dv = Ext.create('Sencha.view.DView1');
    Ext.define("Sencha.view.Main", {
        extend: 'Ext.tab.Panel',
        xtype: 'main',
        config: {
            tabBarPosition: 'bottom',
    		 items: [	      
               {
                    title: 'Welcome',
                    iconCls: 'home',
    				xtype: 'dview1'	
               },
    		               {
                    title: 'Get Started',
                    iconCls: 'action',
                    html: 'another tab'
                }
            ]   
        }
    });

  6. #5
    Sencha User
    Join Date
    Oct 2012
    Posts
    29
    Answers
    2
    Vote Rating
    0
    jerrysolomon is on a distinguished road

      0  

    Default Also works with a requires: option!

    Also works with a requires: option!


    Code:
    Ext.define("Sencha.view.Main", {
        extend: 'Ext.tab.Panel',
        xtype: 'main',
     requires: 'Sencha.view.DView1',
        config: {
            tabBarPosition: 'bottom',
       items: [  
       //Ext.create('Sencha.view.DView2'),     
               {
                    title: 'Welcome',
                    iconCls: 'home',
        xtype: 'dview1' 
               },
                     {
                    title: 'Get Started',
                    iconCls: 'action',
                    html: 'another tab'
                }
            ]   
        }
    });

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi