代码之家 › 专栏 › 技术社区 › Malay Dave

如何在邮件中添加标签。使用Extjs的box

sencha-touch extjs

Malay Dave · 技术社区 · 9 年前

我想添加一个标签,显示我在文本区域中写入的字符长度。那么,如何在EXT.Message.Box中添加标签这是代码。。。

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

这是我想要的图像,像这样

2 回复 | 直到 9 年前

Ankit Chaudhary 9 年前

您需要指定 textareafield 和 label 在 items 要实现这一点,您需要将textarea和label定义为消息框的子项。

工作示例:

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解决方案: 这不能通过以下方式实现:


   MessageBox

.我们需要使用


   Ext.window

为了实现这一点;指定


   文本区域字段

和


   标签

在


   项目

窗口的配置。

工作示例:

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>

Malay Dave 9 年前

我使用的是ExtJs版本4.1,下面是截图