其实分析全部JS代码无不充斥这2个东西,别看500多行代码的控件,其实大多数是json形式的配置式语法,逻辑代码屈指可数,这就是EXTJS的优势了,虽然代码量大缺不算复杂。
1、 EXTJS的HTML模板加载机制
很多CMS都为自己的标记模板引以为豪,事实上在EXTJS中可信手拈来:
getProgressTemplate: function()
{
var tpl = new Ext.Template('<table class="upload-progress-table"><tbody>',
……………….
');
tpl.compile();
return tpl;
},
这就定义了一个模板。值得注意的是模板中包含很多类似{timeLeft}的变量。
this.getProgressTemplate().overwrite(this.uploadInfoPanel.body, this.formatProgress(this.progressInfo));
加载了模板,this.uploadInfoPanel.body 是模板依附体,this.formatProgress(this.progressInfo)是模板中的变量,formatProgress是要加载的变量,可以看它的定义:
var r = {};
r.filesUploaded = String.leftPad(info.filesUploaded, 3, ' ');
r.filesTotal = info.filesTotal;
r.bytesUploaded = String.leftPad(Ext.util.Format.fileSize(info.bytesUploaded), 6, ' ');
r.bytesTotal = Ext.util.Format.fileSize(info.bytesTotal);
r.timeElapsed = this.formatTime(info.timeElapsed);
r.speedAverage = Ext.util.Format.fileSize(Math.ceil(1000 * info.bytesUploaded / info.timeElapsed)) + '/s';
r.timeLeft = this.formatTime((info.bytesUploaded === 0) ? 0 : info.timeElapsed
* (info.bytesTotal - info.bytesUploaded) / info.bytesUploaded);
var caleSpeed = 1000 * info.lastBytes / info.lastElapsed;
r.speedLast = Ext.util.Format.fileSize(caleSpeed < 0 ? 0 : caleSpeed) + '/s';
return r;
看到了所有的模板中的变量都在此定义之中。
2、 EXTJS与.NET的交互
Direct是ExtJs3.0推出的前后台操作和数据交互机制,它取代的Ext AJAX显式调用后台服务的操作方式,而以大家习惯的函数方式调用,同时可映射对象参数,功能超强,基本上可以不用去拼凑XML或JSON了,工作量大大降低了。它的更大好处在于前台和后台代码的无关性,无论是PHP、C#、Java,只要采用了Direct前台不变化后台随便采用哪种语言都可以。下面介绍后台为C#的Direct编程。
打开SwfHandler.ashx:
public class SwfHandler : DirectHandler
{
public override string ProviderName
{
get
{
return "Ext.app.REMOTING_API";
}
}
public override string Namespace
{
get
{
return "SwfUpload";
}
}
/// <summary>
/// 单个文档上传结束后保存相应客户端信息
/// </summary>
/// <param name="paramInt"></param>
/// <param name="paramStr"></param>
[DirectMethod]
public void FileInfoSave(Int64 paramInt,string paramStr )
{
int? x = (int) paramInt;
string y = paramStr;
}
Ext.app.REMOTING_API是direct映射标识,SwfUpload是命名空间,SwfHandler是类名,FileInfoSave是方法名,这些东西是服务器端的(SwfHandler.ashx)。
让我们看看在客户端(SwfUpload-Ext.js)如何调用FileInfoSave:
Ext.Direct.addProvider(Ext.app.REMOTING_API);
通过影射标识锁定服务器端类。
SwfUpload.SwfHandler.FileInfoSave(paramInt, paramStr);
直接调用服务器端函数。
够简单!够直接!没有了json字符拼凑。这就是direct的必杀技。
最后对控件的开发做些说明,本控件的图标、样式表来自网络拷贝,代码也学习了很多前人经验,感谢云南程序员群的董董(Q2806369)提供了部分图标制作,虽说也算是原创但不敢独享,特共享全部源代码。欢迎ExtJs和.NET程序员联系我,讨论技术问题蛮有乐趣的,我是毛勇(Q 32819362 网名齐林)。也欢迎大家加入云南程序员B群(37209147),我们有350名程序员希望与您交流。