前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >自己动手写UI库——引入ExtJs(布局)

自己动手写UI库——引入ExtJs(布局)

作者头像
liulun
发布2018-01-12 14:30:31
9690
发布2018-01-12 14:30:31
举报
文章被收录于专栏:liulunliulun

第一:来看一下最终的效果

第二:来看一下使用方法:

第三:

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#

好,本文大概就是这样,喜欢我的文章,请帮忙点推荐------------------->

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2015-02-11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档