第一:来看一下最终的效果
第二:来看一下使用方法:
第三:
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# |
好,本文大概就是这样,喜欢我的文章,请帮忙点推荐------------------->