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

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

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

第三:

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#

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏java 成神之路

Spring bean 标签加载、解析过程分析

3077
来自专栏前端说吧

JS-DOM 综合练习-动态添加删除班级成绩表

3848
来自专栏雪地二货笔记库

vue学习笔记10-组件

之后就可以在html中<tagName></tagName>来使用它。 自定义组件也分为全局和局部两种,全局可以在任何实例中使用,而局部只有注册后才能使用。 全...

1361
来自专栏用户2442861的专栏

在 PyQt4 中的菜单和工具栏¶

QtGui.QMainWindow 类提供了一个应用的主窗口。这使得我们可以创建典型的应用框架,包括状态栏,工具栏和菜单。

941
来自专栏葡萄城控件技术团队

如何将第三方控件嵌入ToolStrip控件,并提供Design-Time支持

最近研究了一下如何将第三方控件嵌入到ToolStrip控件中,并能提供Design-Time下的支持. 下面将详细讲解如何把系统的MonthCalendar控件...

2138
来自专栏日常学python

python爬虫常用库之BeautifulSoup详解

这是日常学python的第16篇原创文章 经过了前面几篇文章的学习,估计你已经会爬不少中小型网站了。但是有人说,前面的正则很难唉,学不好。正则的确很难,有人说...

2937
来自专栏河湾欢儿的专栏

第三节 json数据绑定以及dom回流重绘、映射

1552
来自专栏LeoXu的博客

Flex笔记_MX DataGrid、列表和树

columnCount、columnWidth、dataProvider、iconField、iconFunction、labelField、labelFun...

1172
来自专栏别先生

Javascript函数的简单学习

第九课 函数的定义与调用 1:函数的定义     语法格式     function 函数名(数据类型 参数1){//function是定义函数的关键字    ...

1908
来自专栏专业duilib使用+业余界面开发

duilib创建自定义控件

3395

扫码关注云+社区

领取腾讯云代金券