自己动手写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 条评论
登录 后参与评论

相关文章

来自专栏河湾欢儿的专栏

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

1272
来自专栏LeoXu的博客

Flex笔记_MX DataGrid、列表和树

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

1092
来自专栏用户2442861的专栏

在 PyQt4 中的菜单和工具栏¶

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

861
来自专栏技术小讲堂

ASP.NET AJAX(13)__利用Microsoft AJAX Library开发客户端组件Sys.Component成员Sys.IDisposable成员Sys.INotifyDisposin

Microsoft AJAX Library定义了一个客户端组件的模型,它的基类是Sys.Component,它实现了三个接口Sys.IDisposable,S...

3355
来自专栏从零开始学 Web 前端

从零开始学 Web 之 jQuery(八)each,多库共存,包装集,插件

each 方法用来遍历 jQuery 对象的,它的参数是一个事件处理函数,这个事件处理函数有两个参数,第一个参数是索引,第二个参数时索引对应的 DOM 对象,使...

1224
来自专栏日常学python

python爬虫常用库之BeautifulSoup详解

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

2837
来自专栏Danny的专栏

【POI框架实战】——POI导出Excel时设置单元格类型为数值类型

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/...

1443
来自专栏java 成神之路

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

2967
来自专栏前端说吧

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

3668
来自专栏用户2442861的专栏

在 PyQt4 中的菜单和工具栏¶

http://www.cppblog.com/mirguest/archive/2012/02/05/164982.html

942

扫码关注云+社区