solarissf
solarissf

Reputation: 1277

extjs labelwidth in form of textfield not sizing to get bigger

the label of my textfield in ExtJS will not get bigger no matter what I try. It seems to be moving to 2 rows to accommodate size. Can anyone see what I am doing wrong?

I have a form, inside a fieldset, inside a panel.

screenshot

Ext.define('ExtApplication4.view.admin.Admin', {
extend: 'Ext.panel.Panel',
xtype: 'app-admin',
controller: 'admin',

itemId: 'adminItemId',

requires: [
    'ExtApplication4.view.admin.AdminController',   
    'ExtApplication4.util.GlobalVar'
],

title: 'Admin',
//html: 'This is my Admin Panel',

items: [{

    xtype: 'fieldset',
    title: 'database values',
    width: 400,
    items: [{

        xtype: 'form',
        //labelWidth: 200,
        monitorValid: true,
        formBind: true,
        items: [{
            //xtype: 'fieldset',
            //title: 'database values',
            //width: '100%',
            defaultType: 'textfield',
            margin: '10px,0,10px,0',
            fieldDefaults: {
                labelWidth: 200
            },
            items: [
                {
                    allowBlank: false,
                    fieldLabel: 'Accrued',
                    itemId: 'itemIdAccrued',
                    name: 'nameAccrued',
                    emptyText: 'Accrued'
                },
                {
                    allowBlank: false,
                    fieldLabel: 'YTD End Val',
                    name: 'YTDEndVal',
                    emptyText: 'YTDEndVal',
                    itemId: 'itemIdYTDEndVal'
                },
                {
                    allowBlank: false,
                    fieldLabel: 'Margin Req',
                    name: 'MarginReq',
                    emptyText: 'MarginReq',
                    itemId: 'itemIdMarginReq'
                },
                {
                    allowBlank: false,
                    fieldLabel: 'MarginExc',
                    name: 'MarginExc',
                    emptyText: 'MarginExc',
                    itemId: 'itemIdMarginExc'
                },
                {
                    xtype: 'displayfield',
                    hideEmptyLabel: false,
                    value: 'All fields must be filled out',
                    style: 'text-align:left'
                }
            ],
            buttons: [{
                text: 'Submit',
                formBind: true,
                listeners: {
                    click: 'onButtonSubmitPTValues'
                }
            }]

Upvotes: 1

Views: 1864

Answers (1)

Ankit Chaudhary
Ankit Chaudhary

Reputation: 4089

Instead of fieldDefaults use defaults as config property.

Ext.application({
    name: 'Fiddle',
    launch: function () {
            
            Ext.create('Ext.panel.Panel', {
                renderTo: Ext.getBody(),
             
itemId: 'adminItemId',


title: 'Admin',
//html: 'This is my Admin Panel',

items: [{

    xtype: 'fieldset',
    title: 'database values',
    width: 400,
    items: [{

        xtype: 'form',
        //labelWidth: 200,
        monitorValid: true,
        formBind: true,
        items: [{
            //xtype: 'fieldset',
            //title: 'database values',
            //width: '100%',
            defaultType: 'textfield',
            margin: '10px,0,10px,0',
           defaults: {
                labelWidth: 200
            },
            items: [
                {
                    allowBlank: false,
                    fieldLabel: 'Accrued',
                    itemId: 'itemIdAccrued',
                    name: 'nameAccrued',
                    emptyText: 'Accrued'
                },
                {
                    allowBlank: false,
                    fieldLabel: 'YTD End Val',
                    name: 'YTDEndVal',
                    emptyText: 'YTDEndVal',
                    itemId: 'itemIdYTDEndVal'
                },
                {
                    allowBlank: false,
                    fieldLabel: 'Margin Req',
                    name: 'MarginReq',
                    emptyText: 'MarginReq',
                    itemId: 'itemIdMarginReq'
                },
                {
                    allowBlank: false,
                    fieldLabel: 'MarginExc',
                    name: 'MarginExc',
                    emptyText: 'MarginExc',
                    itemId: 'itemIdMarginExc'
                },
                {
                    xtype: 'displayfield',
                    hideEmptyLabel: false,
                    value: 'All fields must be filled out',
                    style: 'text-align:left'
                }
            ],
            buttons: [{
                text: 'Submit',
                formBind: true,
            }]
        }]
    }]
}]
         
       
    
});
}
});
<link rel="stylesheet" href="https://cdn.sencha.com/ext/gpl/4.1.1/resources/css/ext-all.css">
<script type="text/javascript" src="https://cdn.sencha.com/ext/gpl/4.1.1/ext-all-debug.js"></script>

Upvotes: 2

Related Questions