5

タブパネルを使用するsenchatouchアプリケーションがあります。このアプリケーションのベータ版は、タブパネルのすべてのアイテムをロードして表示します。アイテムが非常に多いため、最適化のためにタブの切り替えが遅くなりました。私の考えは、ロードマスクを表示した後、特定のパネルがアクティブ化されたときにのみアイテムをロードすることです。

最初のクリックで機能させることができましたが、同じタブにもう一度切り替えると、それが埋められていないか、少なくともアイテムが表示されていません。例外はスローされません。

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 ]
    }); 
    }
    });

概要： タブを押す前に最初にすべてのアイテムが入力されている場合、アプリケーションは正しく機能しています。問題は、アイテムの数が非常に多く、対応するタブを押す場合です。1.2秒間ハングします。このアプリケーションを使用している人は、タブを正しく押さなかったと思い、非常に遅く見えます。私のアプローチは、タブを押すだけで1秒間マスクをロードすることです。これにより、押したときにタブが自動的に応答し、アイテムを追加します。mainPanel.addこのアイデアは最初のクリックでのみ機能しました。別のタブに切り替えて元のタブに戻ると、何も表示されません（ロードマスクを除く） 。mainPanel.setItems。別の問題に直面しました。パネルの次のタップで、アイテムが表示されますが、を押す前に最初にアイテムをロードしているかのように、ロードマスクがありません。

4

1 に答える 1

3

私は解決策を考え出しました。以下のコードを確認してください。

それがあなたを助けることを願っています!

コード :

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 ]
        }); 
    }
});

サンプル出力:

ローディングマスク

ここに画像の説明を入力

于 2012-04-27T11:35:25.820 に答える