javascript - examples - artículos que no se cargan en sencha touch 2

sencha js

Question

Tengo una aplicación sencha táctil que utiliza un tabpanel, una versión beta de esta aplicación carga todos los elementos del tabpanel y lo muestra. con tantos elementos, el cambio entre pestañas se hizo más lento para la optimización. Mi idea es cargar elementos solo cuando se activa un determinado panel después de mostrar una máscara de carga.

Pude hacerlo funcionar con el primer clic, pero cuando cambio a la misma pestaña en otro momento no se está llenando o al menos no se muestran los elementos. no se arrojan excepciones.

Ext.application({
    name : ''Sencha'',
    launch : function() {
           var root = contents;
           var children = root._listOfContentChild;
           var mainPanel =  Ext.create(''components.NavigationPanel'',
                {
                iconCls : ''more'', 
                listeners: {

                   activate: function() {   
                             mainPanel .setMasked({ 
                                xtype: ''loadmask'',
                                message: ''Loading...''
                            });

                           setTimeout(function() {          
                              loadItems(root,children);  // returns my items
                              mainPanel .setItems(items);
                              mainPanel .setMasked(false);
                            }, 300);

    } } });

   var settingsPanel =  Ext.create(''components.NavigationPanel'', {
        title : ''Settings'',
        iconCls : ''settings'',
    });


  view=Ext.Viewport.add({
        xtype : ''tabpanel'',  
        deferredRender:true,

        tabBarPosition : ''bottom'',
        activeItem:settingsPanel,
        items : [mainPanel,settingsPanel ]
    }); 
    }
    });

descripción general: mi aplicación está funcionando correctamente si todos los elementos están llenos al principio antes de presionar en las pestañas, mi problema es cuando tengo una gran cantidad de artículos y presiono en su pestaña correspondiente. se cuelga durante 1,2 segundos una persona que use esta aplicación pensará que no presionó correctamente en la pestaña y se verá tan lento. Mi enfoque es cargar una máscara en la pestaña presionar solo durante 1 segundo, esto hará que mi pestaña responda automáticamente cuando lo presione, luego agregue mis elementos. esta idea solo funcionó para el primer clic, cuando cambio a otra pestaña y regreso al original no se muestra nada (excepto la máscara de carga) probé mainPanel.add lugar de mainPanel.setItems . Me enfrenté a otro problema, ahora en el siguiente toque en el panel, mis artículos se muestran pero sin la máscara de carga como si estuviera cargando los artículos al principio antes de presionar.

Answer 1

Descubrí la solución. Verifique el código a continuación.

Espero que te ayude!

Código:

Ext.Loader.setConfig({
    enabled: true
});

Ext.application({
    name: ''Sencha'',

    launch: function() {
        //var root = contents;
        //var children = root._listOfContentChild;
        var mainPanel =  Ext.create(''Ext.Panel'', {
                            iconCls : ''more'', 
                            id:''mpanel'',
                            styleHtmlContent:true,
                            listeners: {
                               painted: function() {  
                                 mainPanel.removeAll();
                                 mainPanel.add({
                                       masked:{
                                         xtype:''loadmask'',
                                         id:''lmask'',
                                       }
                                 });
                                 setTimeout(function() {    
                                       Ext.getCmp(''lmask'').hide();
                                       Ext.getCmp(''mpanel'').add({ xtype:''textfield'',label:''Name'',required:true });
                                   }, 300);

                                 }
                            } 
                          });

        var settingsPanel =  Ext.create(''Ext.Panel'', {
            title : ''Settings'',
            iconCls : ''settings'',
        });


        view=Ext.Viewport.add({
            xtype : ''tabpanel'',  
            deferredRender:true,

            tabBarPosition : ''bottom'',
            activeItem:settingsPanel,
            items : [mainPanel,settingsPanel ]
        }); 
    }
});

Muestra de salida: