私はext jsに非常に新しいです、誰でも自分のコードで何が間違っているのかを教えてください

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

、Ext.form.Panelはスクロールアイテムですので、あなたが、高さを指定するかnullとしてscrollable財産を作るそれまでは表示されません。

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>

OR

既存のコンポーネントから既存のコンポーネント呼び出しadd()に追加し、そのパラメータmainPanel.add(numberField);として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>