2

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

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

列表容器视图:

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

请帮帮我......提前谢谢......!!!

4

2 回答 2

0

我遇到同样的问题。以 MVC 格式编码 Sencha Touch 2 使应用程序在“旧”硬件上的响应超慢。尤其是安卓。这是 HTML5 vs Native 的缺点。但是他们声称手动构建库时性能会提高,我几乎没有任何改进。

在 Android 上,大多数基于性能的问题都与动画有关。尝试将显示/隐藏动画设置为无,看看它是否有所改善。您也可以尝试在控制器上设置 onBackButtonTap 和其他事件。这应该会改善页面渲染分配。

于 2012-06-18T07:23:26.487 回答
0

我有一个类似的问题,在我的情况下,解决方案是这样的:

http://www.sencha.com/forum/showthread.php?184341-Best-practice-to-prevent-App-peformance-from-Slowly-degrading-after-drilling-around&p=900511&posted=1#post900511

于 2012-10-17T07:25:29.360 回答