【ExtJS4】ExtJS4 组件化编程,动态加载,面向对象,Direct-组件化

欢迎您访问我爱IT技术网，今天小编为你分享的javascript教程：【ExtJS4 组件化编程，动态加载，面向对象，Direct】，下面是详细的讲解！

ExtJS4 组件化编程，动态加载，面向对象，Direct

//指定远程调用的Provider，注意不能在initComponent中指定，因为config属性设置是在initComponent之前，会报api找不到错误
Ext.direct.Manager.addProvider(Ext.app.REMOTING_API);
//loginForm类，继承Ext.form.FormPanel，使用alias注册至ComponentMgr，上层对象使用xtype:LoginFormPanel动态实例化。
//form的submit()方法使用Direct提交，上层对象实例化本类的时候使用config中的api属性指定服务器端方法。
//很奇怪的是不能在Ext.define或者Ext.apply中指定api属性，指定了实例化之后也会丢失，然后报url参数没有的错误，只能在上层对象实例化本类得时候使用config中的api属性指定api
//如果在这里使用原始的new方法指定api也可以，是ext4中的问题？有谁知道的发mail告诉我，万分感谢~~
//使用Ext.define定义本类，定义中使用initComponent指定实例化之前需要执行的操作。
//按面向对象编程思想，本类不调用任何上层对象，方法中不指定scope: this
Ext.define('Ext.app.LoginFormPanel',{
extend:'Ext.form.FormPanel',
initComponent: function(){
//初始化部分需要完成的功能
//alert("Ext.form.FormPanel 开始加载……");
//貌似Ext.apply得来的属性和在Ext.define中定义的没什么区别，为什么要用这个呢？谁来教教我？
Ext.apply(this, {
//labelAlign: 'left'
});
this.callParent();
},
alias:'widget.LoginFormPanel',
labelAlign: 'left',
buttonAlign: 'center',
bodyStyle: 'padding:5px',
frame: true, labelWidth: 80,
items: [
{ xtype: 'textfield', name: 'txt1', fieldLabel: '用户名称',
allowBlank: false, anchor: '90%', enableKeyEvents: true,
listeners: {
keypress: function (field, e) {
if (e.getKey()==13) {
this.nextSibling().focus();
}
} //keypress
}
},
{ xtype: 'textfield', inputType: 'password', name: 'txt2', fieldLabel: '用户密码',
allowBlank: false, anchor: '90%', enableKeyEvents: true,
listeners: {
keypress: function (field, e) {
if (e.getKey()==13) {
this.nextSibling().focus();
}
} //keypress
}
},
{ xtype: 'textfield', name: 'txt3', fieldLabel: '验证码',
allowBlank: false, anchor: '90%', mixLength: 6, maxLength: 6, enableKeyEvents: true,
listeners: {
keypress: function (field, e) {
if (e.getKey()==13) {
this.ownerCt.submit();
}
} //keypress
}
},
{ xtype: 'panel', height: 100, html: '<div style="margin:5px 0px 0px 84px"><a href="http://www.jb51.net/article/27128.htm#"><img alt="如果看不清楚请单击图片更换图片。" onclick="this.src=http://www.jb51.net/article/\'vcode.ashx?d=\'+new Date();" id="code" height="82" width="242" src="http://www.jb51.net/article/vcode.ashx" border="0"></a></div>', border: false },
{ xtype: 'panel', height: 30, html: '<div style="margin:5px 0px 0px 84px;color:red">*如果图片不清晰请单击图片更换图片</div>', border: false }
], //items
buttons: [
{ text: '确定', handler: function () { this.findParentByType('LoginFormPanel').submit(); }},
//面向本对象编程，这里不要加入 scope: this，否则function会指定到window上面
{ text: '重置', handler: function () { this.findParentByType('LoginFormPanel').form.reset(); } }
],
submit: function () {
if (this.getForm().isValid()) {
this.getForm().submit({
success: function (form, action) {
window.location="main.htm";
},
failure: function (form, action) {
//使用form参数访问原submit的form
form.reset();
//使用action.result访问结果集
Ext.MessageBox.alert('登陆失败', action.result.data);
}
})
}
}
});

关于ExtJS4 组件化编程，动态加载，面向对象，Direct的用户互动如下：

　　相关问题：COM/COM+/DCOM详细的解释，都是什么功能？

　　答：Direct Play、Direct Sound、Direct Show、Direct ...),它实际上象结构化编程及面向对象编程方法那样,...应用程序的一个规范,说明了如何可动态交替更新组件。... >>详细

　　相关问题：本人extjs入门，现在正在学习用Extjs4,我想问一下e...

　　答：JSON可以理解为JavaScript的对象序列化的字符串, 你看下JSON的内容, 会发现和代码中写的对象字面量基本一样, 所以使用eval方法即可将JSON转换为对象. Ext仅仅是简单的封装eval方法, 以适应不同标准的JSON 源代码: Ext.util.JSON.decode = functi... >>详细

　　相关问题：打开游戏提示无法定位程序输入法Directsdcreate8与...

　　答：比较大的应用程序都由很多模块组成，这些模块分别完成相对独立的功能，它们彼此协作来完成整个软件系统的工作。可能存在一些模块的功能较为通用，在构造其它软件系统时仍会被使用。在构造软件系统时，如果将所有模块的源代码都静态编译到整个应... >>详细