Sencha Touch 2导航视图响应非常缓慢

时间:2012-06-18 07:18:46

标签: sencha-touch extjs sencha-touch-2 sencha-architect

我是Sencha Touch 2的新手。我正在为Android 2.3.4构建PhoneGap + Sencha Touch 2应用程序。我完成了应用程序的开发。在测试应用程序时,我发现我使用的导航视图在显示项目时响应非常慢。 我正在使用列表容器视图,列表视图和编辑器视图。它们的代码如下。 下面的代码工作得很好但是在公开项目的点击上,事件编辑器视图在10秒后显示,我有时甚至不知道它是否被点击。

所以我需要帮助两件事: 1.)当我点击披露项目时,我应该显示屏蔽,知道我至少点击它 2.)或加快事件编辑器视图的显示

ListContainer视图:

Ext.define('Sample.view.ListContainer', {
    extend: 'Ext.NavigationView',
    xtype:'listContainer',
    id: 'idListContainer',
    config: {
        id:'idIncidentListContainer',
        items:[

               {
                   xtype:"incidentsList",
                   cls: "clsHeader"
               }

           ]
    }
});

列表视图:

Ext.define("Sample.view.IncidentsList", {
    extend: "Ext.Panel",
    xtype: 'incidentsList',
    id: 'idIncidentList',
    requires:[
              'Ext.dataview.List',
              'Ext.data.proxy.Memory',
              'Ext.data.Store',
          ],
    alias:'widget.incidentslist',
    config: {
        id: 'idIncidentList',
        layout:'fit',
        items: [
        {
            xtype: "toolbar",
            docked: "top",
            ui:'light',
            id:"idHeaderTwo",
            cls:"clsHeaderTwo" ,
                items: [
                        {   xtype: 'title' ,
                            cls: 'clsLeftTitle',
                            title: "My Incidents",
                        },
                        { xtype: 'spacer'},
                        {   xtype: 'title' ,
                            cls: 'clsRightTitle',
                            id: 'idIncidentsListTitle',
                            title:"Welcome",
                        },
                        ]
        }, 
        {
            xtype: "list",
            store: "IncidentStore",
            itemId:"incidentsList",
            id:"inclist",
            loadingText: "Loading Incidents...",
            emptyText: "<div class=\"empty-text\">No incidents found.</div>",
            onItemDisclosure: true,
            itemTpl: Ext.create('Ext.XTemplate',
                    '<tpl if="TKT_STATUS_NAME == \'CLOSED\'">',
                    '<div class="vm_statusRed">',
                    '</tpl>',
                    '<tpl if="TKT_STATUS_NAME == \'OPENED\'">',
                    '<div class="vm_statusYellow">',
                    '</tpl>',
                    '<tpl if="TKT_STATUS_NAME == \'ASSIGNED\'">',
                    '<div class="vm_statusOrange">',
                    '</tpl>',
                    '<tpl if="TKT_STATUS_NAME == \'PENDING\'">',
                    '<div class="vm_statusRed">',
                    '</tpl>',
                    '<tpl if="TKT_STATUS_NAME == \'RESOLVED\'">',
                    '<div class="vm_statusOrange">',
                    '</tpl>',
                    '<tpl if="TKT_STATUS_NAME == \'REOPEN\'">',
                    '<div class="vm_statusYellow">',
                    '</tpl>',
                    '<div class="vm_dvList"><h4 class="vm_txtName"><span class="vm_listHeader"><label>Inci.#{TKT_ID} by </label><label class="vm_txtFirstName"><i>{FIRST_NAME:ellipsis(15, true)}</i></label></span><div class="date vm_clsDate">{CREATED_ON:date("d-M-y H:i")}</div></h4>',
                    '<div class="vm_title">{TKT_SUBJECT}</div>',
                    '<div class="vm_subDesc">{TKT_DESC}</div></div></div>'
                )       
        }],
        listeners: [
        {
            delegate: "#incidentsList",
            event: "disclose",
            fn: "onIncidentsListDisclose",
            loadingText: "Loading ...",
        },
        ]
    }, 
    initialize: function() {
        this.callParent(arguments);
        var getLoginData = localStorage.getItem('userData');
        var parseData = JSON.parse(getLoginData);
        var fname = parseData[0].FIRST_NAME;
        var getIncidentData = localStorage.getItem('userIncidentData');
        var parseIncidentData = JSON.parse(getIncidentData);
        Ext.getCmp("idIncidentsListTitle").setTitle("Welcome, " + fname);
        Ext.getStore("IncidentStore").setData(localStorage.userIncidentData).load();
    },
    onIncidentsListDisclose: function (list, record, target, index, evt, options) {
        console.log("editIncidentCommand");
        /*var list = Ext.getCmp('idIncidentList');
        list.setMasked({
            xtype:'loadmask',
            message:'Loading...'
        });*/
        this.fireEvent('editIncidentCommand', this, record);
    }
});

编辑观点:

Ext.define("Sample.view.IncidentEditor", {
    extend: 'Ext.form.Panel',
    xtype: 'incidentsEditor',
    id:'incidentsEditorView',
    alias: "widget.incidenteditorview",

    config: {
        scrollable: 'vertical',
        id:'idIncidentEditor',
        layout:'vbox',
        items: [
            {
                xtype: "toolbar",
                docked: "top",
                ui:'light',
                id:"idHeaderTwo",
                cls:"clsHeaderTwo",
                items: [
                        {   xtype: 'title' ,
                            cls: 'clsLeftTitle',
                            title: "Incident Details",
                        },
                        {xtype: 'spacer'},
                        {   xtype: 'title' ,
                            cls: 'clsRightTitle',
                            id: 'idIncidentEditorTitle',
                            title:"Welcome",
                        },
                        ]
            }, 
            { xtype: "fieldset",

                items: [
                    {
                        xtype: 'textfield',
                        name: 'TKT_SUBJECT',
                        label: 'Subject',
                        labelAlign: 'top',
                        cls:'vm_fieldFont',
                        clearIcon:false,
                        disabled:true
                    },
                    {
                        xtype: 'textareafield',
                        name: 'TKT_DESC',
                        label: 'Description',
                        labelAlign: 'top',
                        cls:'vm_fieldFont',
                        clearIcon:false,
                        disabled:true
                    },
                    {
                        xtype: 'textfield',
                        name: 'SEV_DESC',
                        label: 'Impact',
                        labelWidth:'45%',
                        cls:'vm_fieldFont',
                        clearIcon:false,
                        disabled:true
                    },
                    {
                        xtype: 'textfield',
                        name: 'SERVICE_NAME',
                        id:'displayIncident',
                        cls:'vm_fieldFont',
                        label: 'IncidentType',
                        disabled: true,
                        labelWidth:'45%',
                    },
                    {
                        xtype: 'textfield',
                        label: 'Category',
                        name: 'CATEGORY_NAME',
                        cls:'vm_fieldFont',
                        id:'getCategory',
                        labelWidth:'45%',
                        disabled: true,
                    },
            ]
            },
        ],            
    },    

    initialize: function() {
        var getLoginData = localStorage.getItem('userData');
        var parseData = JSON.parse(getLoginData);
        var fname = parseData[0].FIRST_NAME;
        Ext.getCmp("idIncidentEditorTitle").setTitle("Welcome, " + fname);
        //var list = Ext.getCmp('idIncidentList');
        //list.unmask();
     },
     onIncidentsListDisclose: function (list, record, target, index, evt, options) {
         console.log("editIncidentCommand");
         this.fireEvent('editIncidentCommand', this, record);
     }
});

控制器:

Ext.define("Sample.controller.Incidents", {        
    extend: "Ext.app.Controller",
    config: {
        refs: {
            //lookup for views by xtype
            incidentsListView:'incidentslist',
            incidentEditorView: 'incidenteditorview', 
            incidentsList: 'incidentsList',
            listContainer:'listContainer'
        },
        control: {
            incidentsListView: {
                //commands fired by the Incidents list container.
                editIncidentCommand: "onEditIncidentCommand",
            },
        }
    },
    //Transitions
    slideLeftTransition: { type: 'slide', direction: 'left' },
    slideRightTransition: { type: 'slide', direction: 'right' },

    //Helper function(generates random integer)
    getRandomInt: function (min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    },

    //Function to get incident details and set them to incidentview
    activateIncidentEditor: function (record) {
        var incidentContainer = this.getListContainer();
        var incidentEditorView = Ext.create("Sample.view.IncidentEditor");
        incidentEditorView.setRecord(record); // load() is deprecated.
        incidentContainer.push(incidentEditorView);            
    },

    //on edit incident command
    onEditIncidentCommand: function (list, record) {
        this.activateIncidentEditor(record);
    }
});

请帮助我们......先谢谢你们...... !!!

2 个答案:

答案 0 :(得分:0)

我遇到了同样的问题。以MVC格式编码Sencha Touch 2使得应用程序在“旧”硬件上的响应速度超慢。特别是Android。这是HTML5 vs Native的缺点。然而,他们声称在手动构建lib时性能会提高,我几乎没有任何改进。

在Android上,大多数基于效果的问题都与动画有关。尝试将show / hide动画设置为none,看看它是否有所改进。 您也可以尝试在控制器上设置onBackButtonTap和其他事件。这应该改善页面渲染分配。

答案 1 :(得分:0)