自己动手写UI库——引入ExtJs（布局）
浏览数：38 /
时间：2015年06月09日
第一：
来看一下最终的效果
第二：
来看一下使用方法：
第三：
|
Component类代码如下所示：
|
|
public class Component
{
public Component()
{
}
private string id;
public string Id
{
get
{
return id;
}
internal set
{
id = value;
}
}
private string region;
public string Region
{
get
{
return region;
}
set
{
var str = string.Format("Ext.getCmp(‘{0}‘).setRegion(‘{1}‘); ", this.Id, value);
RenderContext.ExecScript(str);
region = value;
}
}
private int width;
public int Width
{
get
{
return width;
}
set
{
var str = string.Format("Ext.getCmp(‘{0}‘).setWidth({1}); ", this.Id, value);
RenderContext.ExecScript(str);
width = value;
}
}
private int height;
public int Height
{
get
{
return height;
}
set
{
var str = string.Format("Ext.getCmp(‘{0}‘).setHeight({1}); ", this.Id, value);
RenderContext.ExecScript(str);
height = value;
}
}
}
|
|
第一：
这是ExtJs里的一个基类，Ext里所有的界面元素都继承自这个基类
第二：
Id，Width，Region，Height都是这个基类的属性，在ExtJs中Component类也包含这些属性，当然还有很多其他的属性，这里我们就没有一一例举了。
第三：
设置Width，Region，Height这三个属性的时候我们都让浏览器执行了一段脚本，这段脚本让ExtJs设置控件的相应属性
|
|
Panel类的代码
|
|
|
|
第一：
我们再这个控件类的构造函数里执行了JS代码，并通过JS代码创建了这个控件
第二：
创建完控件之后，就马上获取了这个控件的ID，这个ID是EXTJS自动生成的ID，与页面上的其他控件是不会重复的
第三：
控件在界面上的ID获取到之后，我们就赋给这个控件的基类的属性
|
第五：
|
Viewport类的代码
|
|
|
|
第一：
这个类的代码的执行逻辑和panel代码类的逻辑相似
第二：
这个类和Panel类都继承自Container类
|
|
Container类的代码
|
|
|
|
第一：
与Extjs相同Container类继承自Compent类，也就是我们前面提到的控件的基类
第二：
我们再这个类中添加了Add方法，在这个方法里也是执行了一段JS函数，把一个控件添加到另一个控件中
|
第七：
|
工程的目录结构：
|
|
|
|
第一：
名称空间我们都加了NS后缀，这是为了使用方便
|
|
ExecScript方法的代码：
|
|
|
|
第一：
这里的代码和我们前面文章讲到的不一样，我这里改正用这种方式执行JS代码了，只有这种方式，才能顺利的得到JS的返回值
第二：
C#代码让浏览器执行了一个Exec的JS函数
|
|
Exec的JS方法的代码
|
|
|
|
第一：
传入参数就是我们想要执行的JS语句
第二：
用eval的方法执行这个JS语句，然后把返回值还给C#
|
好，本文大概就是这样，喜欢我的文章，请帮忙点推荐------------------->
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
