如何在Ext 中textfield后面显示提示信息

Question

在Ext 的Formpanel中的textfield，能否根据输入内容的不同在后面动态显示不同的提示信息？ExtJSfromPaneltextfield

Answer 1

在textfield后面加个label，然后在keyup事件里自己写判断过程可以啊。extjs又不是万能的。如果做的那么细致了还要程序员干嘛。

Answer 2

textfield后面怎么加label，能贴上代码吗？

Answer 3

items : [{
    xtype: 'container',
    layout: 'column',
    margin: '这个自己调整',
    items: [{这里是textfield},{这里放label}]
},{....}]
这样如果都看不懂就回去查api吧

Answer 4

我代码：
var formPanel = new Ext.FormPanel( {
xtype : 'fieldset',
id : "addFormPanel",
collapsible : true,
       labelWidth : 70,
       autoHeight : true,
       frame : true,
       bodyStyle : 'padding:5px 5px 0',
        width : 260,
       defaults : {
        width : 230
       },
        defaultType : 'textfield',
         items : [ 
           {
         xtype : 'container',
         layout : 'column',
         items :[
         {
         layout : 'form',
         fieldLabel : '测试数据',
         cloumnWidth : 0.60,
           id : 'cs',
           xtype: 'textfield',
           listeners : {
          change : changeLabel
           }
         },{
         html : '<font color=red>修改前</font>',
         cloumnWidth : 0.40,
           id : 'myLab',
           xtype: 'label'
         }
         ]
       },
       {
         fieldLabel : '身份证号',
        name : 'xtglYh.sfzh'
       }]
    
      });
这样了

Answer 5

function show_addPanel(){
//验证账号方法
var check_account = function(){
var account = Ext.getCmp("account").getValue().trim();
if(account==""){
checkImg("account_lab","账号不能为空",2);
}else if(account.length > 20){
checkImg("account_lab","长度不能大于20字符",2);
}else{
//发送ajax验证账号是否重复
checkImg("account_lab","正在验证",3);
Ext.Ajax.request({
    url : "usermanger!checkAccount.action",
    params : 
    {
"account":account
    },
    callback : function(options, success, response){
     var data=Ext.util.JSON.decode(response.responseText);
     if(myMask){
     myMask.hide();
     }
     if(data.success == "yes"){
     if(data.hasUsed == "yes"){
     checkImg("account_lab","账号已使用",2);
     }else{
     checkImg("account_lab","验证通过",1);
     }
     }else{
     checkImg("account_lab","验证出错",2);
     }
    
    }
});
}
}
//验证密码方法
var check_password = function(){
var password = Ext.getCmp("password").getValue().trim();
var reg = /^[0-9a-zA-Z]{1,20}$/;
if(!reg.test(password)){
checkImg("password_lab","请使用1~20位数字、字母",2);
}else{
checkImg("password_lab","验证通过",1);
}
}
//验证角色方法
var check_roleNames = function(){
var roleNames = Ext.getCmp("roleNames").getValue();
if(roleNames==""){
checkImg("roleNames_lab","最少选择一个角色",2);
}else{
checkImg("roleNames_lab","验证通过",1);
}
}

var addPanel = new Ext.FormPanel({
        labelAlign:'center',
        buttonAlign:'center',
        autoHeight : true,
        layout : 'form',
        bodyStyle:'padding:5px;',
        frame:true,
        labelWidth:45,
        monitorValid:true,
        items:[
            {
             layout:'column',
             border:false,
             labelSeparator:':',
             defaults:{
             layout: 'form',
             border:false,
             columnWidth: 1
         },
            items:[
                {
                 columnWidth: .9,
                 items: [
                 {
                 xtype:'textfield',
                 fieldLabel: '账号',
                 name: 'account',
                 id: 'account',
                 emptyText : '请输入账号',
                 anchor:'95%',
                 listeners : {
                 'blur': check_account
                 }
                 }
                 ]
                },{
                 columnWidth: .1,
                 items: [
                 {
                 xtype:'label',
                 id: 'account_lab',
                 html : '',
                 anchor:'100%'
                 }
                 ]
                },{
                 columnWidth: .9,
                 items: [
                 {
                 xtype:'textfield',
                 fieldLabel: '密码',
                 name: 'password',
                 id: 'password',
                 emptyText : '请输入密码',
                 anchor:'95%',
                 listeners : {
                 'blur': check_password
                 }
                 }
                 ]
                },{
                 columnWidth: .1,
                 items: [
                 {
                 xtype:'label',
                 id: 'password_lab',
                 html : '',
                 anchor:'100%'
                 }
                 ]
                },{
                 columnWidth: .9,
                 items: [
                 {
                 xtype:'textfield',
                 fieldLabel: '角色',
                 name: 'roleNames',
                 id: 'roleNames',
                 readOnly :true,
                 emptyText : '点击选择角色',
                 anchor:'95%',
                 listeners : {
                 'focus':function(){
                 showRoleTree("roleNames",check_roleNames);
                 },
                 'blur': check_roleNames
                 }
                 }
                 ]
                },{
                 columnWidth: .1,
                 items: [
                 {
                 xtype:'label',
                 id: 'roleNames_lab',
                 html : '',
                 anchor:'100%'
                 }
                 ]
                },{
                 columnWidth: .9,
                 items: [
                 {
                 xtype:'hidden',
                 fieldLabel: '角色id',
                 name: 'roleIds',
                 id: 'roleIds'
                 }
                 ]
                }
                ]
            }
        ]
    });
var addwin = new Ext.Window( {
 title : '添加用户',
 layout : 'fit',
 id : 'addwin',
 width :300,
 autoheight: true,
 bodyStyle :{
  'padding': '5 5'
 },//使girdPanel 与window之间有间距，有层次感
 closeAction : 'close',
 closable : true,
 plain : true,
 modal : true,//遮罩层
 items : [addPanel],
 buttons : [ 
  {
  text : '确定',
  handler : function() {
   if(Ext.getCmp("account_lab").el.dom.innerHTML.indexOf("right.gif")==-1 ||
   Ext.getCmp("password_lab").el.dom.innerHTML.indexOf("right.gif")==-1||
   Ext.getCmp("roleNames_lab").el.dom.innerHTML.indexOf("right.gif")==-1){
   Ext.Msg.alert("提示","请填写有效信息");
   }else{
   //发送ajax保存信息
   var account = Ext.getCmp("account").getValue().trim();
   var password = Ext.getCmp("password").getValue().trim();
   var roleIds = Ext.getCmp("roleIds").getValue().trim();
   addjdt("正在保存...");
   Ext.Ajax.request({
    url : "usermanger!saveOrUpd.action",
    params : 
    {
"user.account":account,
"user.password":password,
"user.roleIds":roleIds
    },
    callback : function(options, success, response){
     var data=Ext.util.JSON.decode(response.responseText);
     if(myMask){
     myMask.hide();
     }
     if(data.success == "yes"){
     Ext.Msg.alert("提示","保存成功");
     Ext.getCmp('grid_user').getStore().reload();
     addwin.close();
     }else{
     Ext.Msg.alert("提示","保存出错");
     }
    
    }
});
   }
  }
  }, {
  text : '取消',
  handler : function() {
   addwin.close();
  }
  }
  ]
});
 addwin.show();
}
//修改对应标签内容
function checkImg(id,msg,b){
var htmStr;
if(Ext.getCmp(id)){
if(b == 1){
if(msg!=null && msg!=""){
htmStr = "<span><img src = '../images/right.gif' alt= '"+msg+"'/></span>"; 
}else{
htmStr = "<span><img src = '../images/right.gif' /></span>"; 
}

}else if(b == 2){
if(msg!=null && msg!=""){
htmStr = "<span><img src = '../images/wrong.gif' alt= '"+msg+"'/></span>"; 
}else{
htmStr = "<span><img src = '../images/wrong.gif' /></span>"; 
}
}else if(b == 3){
if(msg!=null && msg!=""){
htmStr = "<span><img src = '../images/yanzheng.gif' alt= '"+msg+"'/></span>"; 
}else{
htmStr = "<span><img src = '../images/yanzheng.gif' /></span>"; 
}
}
Ext.getCmp(id).el.dom.innerHTML = htmStr;
}
}