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

Posted 2023-02-25

【中文标题】动态添加数字字段的 ext js 代码不显示任何错误，也不呈现任何 UI

【英文标题】：ext js code to add number field dynamically is not showing any errors nor rendering any UI

【发布时间】：2017-10-05 14:10:39

【问题描述】：

它没有显示任何错误，也没有呈现任何 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
         ]
    );

【问题讨论】：

hidden: show，如果“show”是一个变量，那么它必须是“false”。您不应使用 id，而应仅使用 itemId。不需要 xtype 'field' 的项目，因为您可以在 numberfield 上使用标签（可能使用 labelAlign: 'top'）

【参考方案1】：

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

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

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>

【讨论】：

您使用的是哪个版本？需要更多代码来理解问题。

我正在处理一些旧代码，版本是2.4.2，没关系，我会试着弄清楚。

你在用 Sencha Touch 吗？？

哦，对不起，我给了你 ext js 解决方案。我已经根据 sencha touch 更新了我的答案

谢谢，现在可以了。但是上下箭头不见了。