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(); } }]