Je suis très nouveau à ext js, quelqu'un peut-il dire ce qui ne va pas avec mon code

Question

Il ne montre pas d'erreurs ni de rendu aucune interface utilisateur. Je veux ajouter un champ numérique dynamiquement.

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

En contact sencha, Ext.form.Panel est un scrollable article, il ne sera pas affiché jusqu'à ce que vous spécifiez une hauteur ou faites scrollable propriété comme null.

Pour afficher le champ numérique sur l'écran entier, vous pouvez attribuer la propriété fullscreen:true au Ext.form.Panel. Comme ceci:

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>

OU

Pour l'ajouter à un appel de composant existant add() du composant existant et donner numberField comme paramètre mainPanel.add(numberField);. Dans numberField, vous pouvez attribuer la propriété height ou la propriété scrollable:null au Ext.form.Panel. Comme ceci:

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>