How do i add label in Message.box using Extjs

Question

I want to add label that shows the character length which i write in text area. so, how can i add label in EXT.Message.Box Here is the code...

function UnLockRemarkWindow(a) {

    var c = Ext.MessageBox.show({
        title: "Version Remarks",
        inputType: "textarea",
        msg: "Please Enter Version Remarks:",
        width: 375,
        buttons: Ext.MessageBox.OKCANCEL,
        multiline: true,
        fn: b,
        icon: Ext.MessageBox.INFO,
        modal: true,
        closable: false,
        allowBlank: false

    });

    c.textField.inputEl.dom.type = "textarea";

and here is the image which i want like this

Answer 1

You need to specify textareafield and labelin the items config of message box to achieve this i.e. You need to define textarea and label as a child of the message box.

A working example:

Ext.application({
    launch : function() {
        var c = Ext.Msg.show({
        title: "Version Remarks",
        items:[
          {
            xtype:'textareafield',
           labelWrap:true,
             label: "Please Enter Version Remarks:",
            
        },
         {
            xtype:'label',
            html:'0 of 500',
            height:20,
            style:{
                textAlign:'right',
                background:'white'
            }
            },
            ],
       
        width: 375,
        buttons: Ext.MessageBox.OKCANCEL,
        multiline: true,
     
        icon: Ext.MessageBox.INFO,
        modal: true,
        closable: false,
        allowBlank: false

    });
    }
});

<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>

Ext 4 Solution: It cannot be achieved by MessageBox. We need to use Ext.window for achieving this & specifiying textareafield and label in the items config of window.

A working example:

Ext.application({
    name : 'Fiddle',

    launch : function() {
       Ext.create('Ext.window.Window', {
    title: "Version Remarks",
        items:[
          {
            xtype:'textareafield',
            width:'100%',
             fieldLabel: "Please Enter Version Remarks:",
            
        },
         {
            xtype:'label',
        text:'0 of 500',
            height:20,
             width:'100%',
            style:{
                textAlign:'right',
                display:'block'
            }
            },
            ],
       
        width: 375,
        buttonAlign : 'center',
        buttons:[ { 
            text:'OK'
        },
         {
            text:'Cancel'
        }],
        modal: true,
        closable: false,
}).show();
    }
});

<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>

Answer 2

i am using ExtJs version 4.1 and here is the screenshot