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
    35,704
    Answers
    3356
    Vote Rating
    750
    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
    35,704
    Answers
    3356
    Vote Rating
    750
    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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar