用于动态添加数字字段的ext js代码不会显示任何错误，也不会呈现任何UI

Question

它没有显示任何错误，也没有呈现任何UI。我想动态添加数字字段。

var numberField= Ext.create('Ext.form.Panel', {
        cls: 'questionRows',
        hidden: show,
        itemId: item.HealthNeedsDetailsGuid,
        id: item.HealthNeedsDetailsGuid,
        items: [{
            xtype: 'field',
            html: item_index + ') ' + item.HealthNeedsQuestion
        }, {
            xtype: 'numberfield',
            anchor: '100%',
            name: 'bottles',
            clearIcon: false,
            width: 400,
            value: 99,
            maxValue: 99,
            minValue: 0
         }]
    });

Answer 1

在sencha touch中，Ext.form.Panel是一个可滚动项，因此在您指定高度或将scrollable属性设为null时，它不会显示。

要在整个屏幕上显示数字字段，您可以在fullscreen:true中提供Ext.form.Panel属性。像这样：

Ext.application({
    launch : function() {
        var numberField= Ext.create('Ext.form.Panel', {
        cls: 'questionRows',
        fullscreen:true,
        items: [{
            xtype: 'field',
           html: 'Field Html here'
        }, {
            xtype: 'numberfield',
            anchor: '100%',
            name: 'bottles',
            clearIcon: false,
            width: 400,
            value: 99,
            maxValue: 99,
            minValue: 0
         }]
    });
    }
});

<link rel="stylesheet" href="https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css">
<script type="text/javascript" src="https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all-debug.js"></script>

或

要将其添加到现有组件，请从现有组件调用add()，并将numberField作为其参数mainPanel.add(numberField);。 在numberField中，height属性或scrollable:null属性为Ext.form.Panel。像这样：

Ext.application({
    launch : function() {
        var numberField= Ext.create('Ext.form.Panel', {
        cls: 'questionRows',
        height:344,
        items: [{
            xtype: 'field',
            html: 'Field Html here'
        }, {
            xtype: 'numberfield',
            anchor: '100%',
            name: 'bottles',
            clearIcon: false,
            width: 400,
            value: 99,
            maxValue: 99,
            minValue: 0
         }]
    });
//this is the Panel we'll be adding to
var mainPanel = Ext.create('Ext.Panel', {
fullscreen: true,
items: {
    html: 'Main Panel'
}
});
//now we add the numberField inside the main panel
mainPanel.add(numberField);
    }
});

<link rel="stylesheet" href="https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css">
<script type="text/javascript" src="https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all-debug.js">
</script>