Sencha touch 2 Sencha：如何在以编程方式删除面板上的组件后刷新Android屏幕

我正在Android上开发sencha应用程序（sencha touch 2.3.1）。 在屏幕上，用户可以将设备节点“添加”到列表中或“删除”新创建的设备节点。 用户按下“完成”按钮后，我将从列表中收集所有设备信息 它可以平滑地添加新的设备节点。 但是当我将设备节点删除到最后一个节点时，虽然它实际上从DOM中删除了所有设备节点，但我仍然可以在屏幕上看到它们的图像。 只有当我旋转屏幕时，这些虚拟图像才会被删除。 因此，我认为问题是我的手机屏幕没有刷新。 我在几个小时内搜索了这个主题，有些人谈论doLayout（），但在sencha 2.3.1中没有这样的API可供使用。 那么，如何使用sencha touch 2.3.1刷新屏幕？或者，如何完全删除设备节点的虚拟图片

视图容器中的我的代码：newSettingView.js

var itemNum = 1;
Ext.define('MyApp.view.newSettingView', {
    extend: 'Ext.Container',
    xtype: 'settingViewType',     //define xtype='settingView'
    requires: [
        'Ext.Toolbar',
        'Ext.Button'
    ],
    config: {
        layout: 'fit'
    },
    initialize: function() {                //called everytime class is instanced
        this.callParent(arguments);         //must be there for sencha to work
    },
    show: function(){
        var backBtn = {xtype:'button', text:'Back', 
                                       ui:'back',handler:this.onBackBtnTap,scope:this};
        var topToolbar = {xtype:'toolbar', docked:'top', items:[backBtn]};   
        var infoContainer = {xtype:'panel',id:'devList'}; 

        var addBtn = {xtype:'button', text:'Add',width:'30%', 
                                  ui:'action',handler:this.onAddBtnTap,scope:this};  
        var doneBtn = {xtype:'button', text:'Done', width:'30%',
                                  ui:'action',handler:this.onDoneBtnTap,scope:this};     
        var cancelBtn = {xtype:'button', text:'Cancel', width:'30%', 
                                 ui:'action',handler:this.onCancelBtnTap,scope:this}; 
        var bottomToolbar = {xtype:'toolbar', docked:'bottom', 
                items:[doneBtn,{xtype:'spacer'},cancelBtn,{xtype:'spacer'},addBtn]}; 

        var containerView = {xtype:'panel', items:[topToolbar,
                                  {xtype:'label',padding:10,html:'Device list:'},
                                  {layout:'vbox',scrollable:'vertical',height:'100%', 
                                    width:'100%',xtype:'panel',border:4,
                                    style: 'border-color: blue; border-style: solid;',
                                    items:[infoContainer]},
                                  bottomToolbar ]};
        this.add([containerView]);              
    },
    onDelBtn: function(btn) {   //'btn' = button oject
        var delField = Ext.getCmp(btn.getItemId()).up('fieldset');
        delField.removeAll(true, true);
        var temp = delField.up('panel');
        temp.remove(delField, true);
        itemNum--;

    },
    onBackBtnTap: function(){
        Ext.Viewport.setActiveItem({xtype:'main'});   //back to main screen
        itemNum = 1;
    },
    onAddBtnTap: function(){
        var newfieldSet = {xtype:'fieldset', defaultType:'textfield',id:'field'+itemNum,
                        items:[{xtype:'button',iconCls:'delete',docked:'left', 
                              width:'15%',height:'10%', 
                              handler:this.onDelBtn,scope:this, id: 'btn'+itemNum},
                              {labelWrap:true,label:'DevInfo', name:'field1', 
                                                       placeHolder:'0126xxxxxx'},
                               {labelWrap:true,label:'Name', name:'field2'}]};
        itemNum++;
        var temp = Ext.getCmp('devList');
        temp.add(newfieldSet);

    },
    onDoneBtnTap: function(btn){
    },
    onCancelBtnTap: function() {
    }
});

---

我尝试了你的示例代码。我可以在列表中添加一些设备。但我也能够删除所有设备项目。看不出有什么问题。你能详细解释一下这个问题吗？嗨，马丁，你想用哪种设备？当我在FireFox、chrome上运行它时，它工作得很好（删除所有设备节点后没有留下虚拟图片），但是当我用Zenphone4安装并运行它时，设备节点的一些虚拟图片仍然会出现在屏幕上，直到我旋转手机屏幕为止。我只在chrome上运行你的代码。因此，您的zenphone4的网络视图似乎是您出现问题的原因。由于您无法强制sencha重新绘制视图，您可以尝试隐藏要先删除的字段集，然后再删除它。嗨，Martin，我尝试过，但不起作用@@onDelBtn:function（btn）{/'btn'=按钮对象警报（“Del”+btn.getItemId（））；var delField=Ext.getCmp（btn.getItemId（））.up（'fieldset'））；delField.hide（）；delField.removeAll（true，true）；var temp=delField.up（'panel'）；temp.remove（delField，true）；itemNum--；}，那么delField.setHidden（true）？