Extjs的标签和方法

1.加载

Ext.onReady(function(){ 
});

2.控件
a.警告
Ext.Msg.alert('Hello', 'World');
b.自定义对话框
Ext.Msg.show({ title: 'Milton', msg: 'Have you seen my stapler?',
    buttons: {
     yes: true,
     no: true,
     cancel: true
    }
  });
c.提示
Ext.Msg.prompt('Milton', 'Where is it?');
d.进度
Ext.Msg.wait('Saving tables to disk...','File Copy');

3.方法
a.根据id取值
Ext.get(id).dom.value；

4.form表单
a.new Ext.formPanel()；

var movie_form = new Ext.FormPanel({ 
   
url: 'movie‐form‐submit.php', 
   
renderTo: document.body, //插入的位置
   
frame: true, 
    title: 'Movie Information Form', //表格的名称
    width: 250, //大小
    items: [{ 
     
xtype: 'textfield', 
     
fieldLabel: 'Title', 
     
name: 'title',
allowBlank: false //校验是否为空
    },{ 
     
xtype: 'textfield', //类型
     
fieldLabel: 'Director', //显示的名称
     
name: 'director' //传到后台变量的名称
    },{ 
     
xtype: 'datefield', 
     
fieldLabel: 'Released', 
     
name: 'released' 
    }] 
  });  
}); 

b.验证
显示提示信息:Ext.QuickTips.init();
自定义
• xxxVal:这是用来匹配的正则表达式;
• xxxMask:这是用来约束用户输入的掩码;
• xxxText:这是用来显示的错误信息。

Ext.form.VTypes['nameVal'] = /^[A‐Z][A‐Za‐z\‐]+[A‐Z][A‐Za‐z\‐]+$/; 
Ext.form.VTypes['nameMask'] = /[A‐Za‐z\‐ ]/; 
Ext.form.VTypes['nameText'] = 'In‐valid Director Name.'; 
Ext.form.VTypes['name'] = function(v){ 
   return Ext.form.VTypes['nameVal'].test(v); 
} 

c.复选框

{ 
  xtype: 'checkbox', 
  fieldLabel: 'Bad Movie', 
  name: 'bad_movie' 
} 

d.单选按钮
items

{ 
  xtype: 'radio', 
  fieldLabel: 'Filmed In', 
  name: 'filmed_in', 
  boxLabel: 'Color' 
},{ 
  xtype: 'radio', 
  hideLabel: false, 
  labelSeparator: '', 
  name: 'filmed_in', 
  boxLabel: 'Black & White' 
}

e.下拉框

1.var genres = new Ext.data.SimpleStore({ 
  fields: ['id', 'genre'], 
  data : [['1','Comedy'],['2','Drama'],['3','Action']] 
}); 
2.{ 
  xtype: 'combo', 
  name: 'genre', 
  fieldLabel: 'Genre', 
  mode: 'local', //当地的,数据一般不发生变动的.
  store: genres, //名称一致
  displayField:'genre', 
  width: 120 
}

f.文本框
与html中一般的textarea标签一致

{ 
  xtype: 'textarea', 
  name: 'description', 
  hideLabel: true, 
  labelSeparator: '', //清除了标签分隔符
  height: 100, 
  anchor: '100%' 
} 

包含丰富的内置按钮.先初始化 QuickTips

{ 
  xtype: 'htmleditor', 
  name: 'description', 
  hideLabel: true, 
  labelSeparator: '', 
  height: 100, 
  anchor: '100%' 
} 

g.触发事件

{ 
  xtype: 'textfield', 
  fieldLabel: 'Title', 
  name: 'title', 
  allowBlank: false, 
  listeners: { 
   
    specialkey: function(f,e){ 
      if (e.getKey() == e.ENTER) { 
       
      } 
     }    }  
    movie_form.getForm().submit(); 
} 

h.按钮触发事件
handler:提供了对一个函数的引用

buttons: [{ 
  text: 'Save', 
  handler: function(){ 
    movie_form.getForm().submit({ 
success: function(f,a){ 
    Ext.Msg.alert('Success', 'It worked'); 
}, 
     
failure: function(f,a){ 
       Ext.Msg.alert('Warning', 'Error'); 
} 
    }); 
  }  

}, { 
  text: 'Reset', 
  handler: function(){ 
   movie_form.getForm().reset(); 
  } 
}]