1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    17
    Answers
    1
    Vote Rating
    0
    micsencha is on a distinguished road

      0  

    Default Answered: NavigationView with List:onItemDisclosure => second view transparent over the first

    Answered: NavigationView with List:onItemDisclosure => second view transparent over the first


    I have a tabpanel. In this tabpanel I have 3 tab. In the second tab I habe an Ext.NavigationView called view. Inside view I have an Ext.Panel called listpanel.
    In listpanel I have 2 titlebar and one list called list.
    So in my list I have anonItemDisclosure() event where I change the NavigationView with a panel that show record data.

    If I click on record the app show me the second view but this has transparent background so I see text over the second view...Why?

    What I am doing wrong?
    Thank you so much.


    This is my code:
    Code:
    var list= {                          
     xtype: 'list',
                               itemTpl: 'Data:{id} - C:{consumption}'+'km/l',
                               store: myStore,
                                onItemDisclosure: function (record, btn, index) {
                                        view.push({
                                            xtype: 'panel',
                                            layout:'fit',
                                            title: 'Dati riepilogativi',
                                            html: template.apply(record.data),
                                            styleHtmlContent: true
                                        });
                                     
                               }
                           };
    So this is my template:
    Code:
             <textarea id="detail-template" style="display:none">            <div>
                      Date: {id} <br/>
                      Consumption: {consumption} <br/>
                      xxxxx: {xxxxx} <br/>
                      ccccc: {ccccc} l <br/> <!-- TODO make data more consistent -->
                      wwwww: {wwwww} <br/>
                </div>    
              </textarea>

  2. This is working for me:

    Code:
    Ext.application({
        name : 'Test',
    
        launch : function () {
    
            var html = '<p>{me}</p><p>{you}</p>';
            var template = new Ext.Template(html);
    
            var myView = Ext.create("Ext.NavigationView", {
                title  : 'navviewTitle',
                id     : 'myView',
                items  : [
                    {title : 'title', html : '<div id="myDiv" class="ygrid-mso"></div>'}
                ]
            });
    
            var edit = function () {
                myView.push({
                    xtype            : 'panel',
                    bodyStyle        : {"background-color" : "red"},
                    renderTo         : document.body,
                    layout           : 'fit',
                    title            : 'Dati riepilogativi',
                    html             : 'modifica i dati',
                    styleHtmlContent : true
                });
    
            };
            myView.getNavigationBar().add([
                {
                    xtype    : 'button',
                    id       : 'addButton',
                    align    : 'right',
                    ui       : 'action',
                    iconCls  : 'compose',
                    iconMask : true,
                    handler  : edit
                }
            ]);
    
            Ext.Viewport.add({
                xtype          : 'tabpanel',
                fullscreen     : true,
                tabBarPosition : 'bottom',
                defaults       : {
                    styleHtmlContent : true
                },
                items          : [
                    {
                        title   : '1-tab',
                        layout  : 'fit',
                        iconCls : 'home',
                        items   : [
                            {title : 'example', html : 'example'},
                            myView
                        ]
                    },
                    {
                        title   : '3-tabs',
                        iconCls : 'user',
                        html    : 'tab panel2'
                    }
                ]
            });
    
            template.compile();
            template.append('myDiv', { me : 'bla bla bla bla bla bla bla bla bla bla bla bla', you : 'aaaaaaaaaaaaaaaaaaa'});
    
        }
    });
    Had to change 2 things, move the html and template within the launch method and remove the layout config from the navigation view as you shouldn't change it.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,754
    Answers
    3462
    Vote Rating
    827
    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

      0  

    Default


    The list should be hidden when you push another view into the navigation view. What happens when you specify some simple html instead of the template?
    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.

  4. #3
    Sencha User
    Join Date
    Apr 2012
    Posts
    17
    Answers
    1
    Vote Rating
    0
    micsencha is on a distinguished road

      0  

    Default


    With another example I have the some problem...here I push only html:
    before push:
    1.jpg

    after pushing the second view appear over the first that is also visible but disabled...
    2.jpg
    Code:
    var html='<p>{me}</p><p>{you}</p>';var template= new Ext.Template(html);
    
    
    var config={
            glossOnIcon: false,
            autoMaximize: false,
            icon: {
                57: 'lib/sencha-touch/resources/icons/icon.png',
                72: 'lib/sencha-touch/resources/icons/icon@72.png',
                114: 'lib/sencha-touch/resources/icons/icon@2x.png',
                144: 'lib/sencha-touch/resources/icons/icon@114.png'
            },
            phoneStartupScreen: 'lib/sencha-touch/resources/loading/Homescreen.jpg',
            tabletStartupScreen: 'lib/sencha-touch/resources/loading/Homescreen~ipad.jpg',
    
    
            requires: [
                       'Ext.tab.Panel',
                       'Ext.form.*',
                       'Ext.field.*',
                       'Ext.Button',
                       'Ext.data.Store'
                       ],
                       launch: function() {            
                        var myView = Ext.create("Ext.NavigationView", {
                               layout:'fit',
                               title:'navviewTitle',
                               id:'myView',
                               items: [{title:'title',html:'<div id="myDiv" class="ygrid-mso"></div>'}]
                           });
    
    
                        var edit=function(){
                         myView.push({
                                           xtype: 'panel',
                                           bodyStyle:{"background-color":"red"}, 
                                           renderTo: document.body,
                                           layout:'fit',
                                           title: 'Dati riepilogativi',
                                           html: 'modifica i dati',
                                           styleHtmlContent: true
                            });
    
    
                        }                   
                           myView.getNavigationBar().add([
                            {
                                xtype: 'button',
                                id: 'addButton',
                                align: 'right',
                                ui: 'action',                
                                iconCls: 'compose',
                                iconMask: true,
                                handler: edit
                            }
                        ]);
    
    
                           Ext.Viewport.add({
                               xtype: 'tabpanel',
                               fullscreen: true,
                               tabBarPosition: 'bottom',
                               defaults: {
                                   styleHtmlContent: true
                               },
                               items: [
                                       {
                                           title: '1-tab',
                                           layout:'fit',
                                           iconCls: 'home',
                                           items: [{title:'example',html:'example'},myView],
                                       },
                                       {
                                           title: '3-tabs',
                                           iconCls: 'user',
                                           html: 'tab panel2',
                                       }
                                       ]
                           });
    
    
    
    
            template.compile();
            template.append('myDiv', { me: 'bla bla bla bla bla bla bla bla bla bla bla bla',you:'aaaaaaaaaaaaaaaaaaa'});
            }
    };
    Ext.application(config);

  5. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,754
    Answers
    3462
    Vote Rating
    827
    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

      0  

    Default


    This is working for me:

    Code:
    Ext.application({
        name : 'Test',
    
        launch : function () {
    
            var html = '<p>{me}</p><p>{you}</p>';
            var template = new Ext.Template(html);
    
            var myView = Ext.create("Ext.NavigationView", {
                title  : 'navviewTitle',
                id     : 'myView',
                items  : [
                    {title : 'title', html : '<div id="myDiv" class="ygrid-mso"></div>'}
                ]
            });
    
            var edit = function () {
                myView.push({
                    xtype            : 'panel',
                    bodyStyle        : {"background-color" : "red"},
                    renderTo         : document.body,
                    layout           : 'fit',
                    title            : 'Dati riepilogativi',
                    html             : 'modifica i dati',
                    styleHtmlContent : true
                });
    
            };
            myView.getNavigationBar().add([
                {
                    xtype    : 'button',
                    id       : 'addButton',
                    align    : 'right',
                    ui       : 'action',
                    iconCls  : 'compose',
                    iconMask : true,
                    handler  : edit
                }
            ]);
    
            Ext.Viewport.add({
                xtype          : 'tabpanel',
                fullscreen     : true,
                tabBarPosition : 'bottom',
                defaults       : {
                    styleHtmlContent : true
                },
                items          : [
                    {
                        title   : '1-tab',
                        layout  : 'fit',
                        iconCls : 'home',
                        items   : [
                            {title : 'example', html : 'example'},
                            myView
                        ]
                    },
                    {
                        title   : '3-tabs',
                        iconCls : 'user',
                        html    : 'tab panel2'
                    }
                ]
            });
    
            template.compile();
            template.append('myDiv', { me : 'bla bla bla bla bla bla bla bla bla bla bla bla', you : 'aaaaaaaaaaaaaaaaaaa'});
    
        }
    });
    Had to change 2 things, move the html and template within the launch method and remove the layout config from the navigation view as you shouldn't change it.
    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.

  6. #5
    Sencha User
    Join Date
    Apr 2012
    Posts
    17
    Answers
    1
    Vote Rating
    0
    micsencha is on a distinguished road

      0  

    Default


    Thanks for you suggestion!
    I have only removed layout:fit from

    Code:
    		var myView = Ext.create("Ext.NavigationView", {		        		   title:'navviewTitle',
    		        		   id:'myView',
    		        		   items: [{title:'title',html:'<div id="myDiv" class="ygrid-mso"></div>'}]
    		        	   });
    and it works perfect.

    Thanks!

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..."