CODEWITHSUNDEEP
extjssencha-touchsencha-touch-2
Manoj j
Manoj j

Reputation: 152

ext js code to add number field dynamically is not showing any errors nor rendering any UI

It is not showing any errors nor rendering any UI. I want to add number field dynamically.

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
         }]
    });

Upvotes: 0

Views: 554

Answers (1)

Ankit Chaudhary
Ankit Chaudhary

Reputation: 4089

In sencha touch, Ext.form.Panel is a scrollable item, so it will not be shown untill you specify a height or make scrollable property as null.

To show the number field on the entire screen, you can give fullscreen:true property in Ext.form.Panel. Like this: 

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

To add it to an existing component call add() from existing component and give numberField as its parameter mainPanel.add(numberField);. In numberField either give height property or scrollable:null property to the Ext.form.Panel. Like this: 

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>

Upvotes: 1

Related Questions