自己动手写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#

 

 

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

时间: 2024-09-20 05:31:37

自己动手写UI库——引入ExtJs(布局)的相关文章

ui库编程-请问下 WIN上取得内核API

问题描述 请问下 WIN上取得内核API 请问下 在写UI库,但是win保护下无法直接对显存操作, 请问下win下取得内核的API? 或者是取得显存地址的API? 谢谢

代码手写UI,xib和StoryBoard间的博弈,以及Interface Builder的一些小技巧

最近接触了几个刚入门的iOS学习者,他们之中存在一个普遍和困惑和疑问,就是应该如何制作UI界面.iOS应用是非常重视用户体验的,可以说绝大多数的应用成功与否与交互设计以及UI是否漂亮易用有着非常大的关系.而随着iOS开发发展至今,可以说在UI制作上大家逐渐分化为了三种主要流派:使用代码手写UI及布局:使用单个xib文件组织viewController或者view:使用StoryBoard来通过单个或很少的几个(关于这点稍后会进行展开)文件构建全部UI.应该使用哪种方式来制作UI已经是iOS开发中

Webix JavaScript UI 库可以帮你构建跨平台的HTML5 和 CSS3 程序

XB 软件公司最近发布了JavaScript UI 库Webix ,其中包含的组件超过45个,用这些组件可以构建跟HTML5 和 CSS3 兼容的程序,这些程序不仅能在个人电脑上运行,还能用在iOS. Android 和 Blackberry 设备上运行.它能访问离线web存储.地理位置( geolocation) API.能在画布上绘图,并集成了jQuery 和 Backbone.js. Webix提供了简单的服务端集成控件,PHP. ASP.NET.Java和 Ruby等各种技术都可以跟客户

《自己动手写Docker》书摘之三: Linux UnionFS

UnionFS UnionFS是一种为Linux,FreeBSD和NetBSD操作系统设计的把其他文件系统联合到一个联合挂载点的文件系统服务.它使用branch把不同文件系统的文件和目录"透明地"覆盖,形成一个单一一致的文件系统.这些branches或者是read-only或者是read-write的,所以当对这个虚拟后的联合文件系统进行写操作的时候,系统是真正写到了一个新的文件中.看起来这个虚拟后的联合文件系统是可以对任何文件进行操作的,但是其实它并没有改变原来的文件,这是因为uni

动手写个数字输入框2:起手式——拦截非法字符

前言  最近在用Polymer封装纯数字的输入框,开发过程中发现不是坑,也有不少值得研究的地方.本系列打算分4篇来叙述这段可歌可泣的踩坑经历: 1. <动手写个数字输入框1:input[type=number]的遗憾> 2. <动手写个数字输入框2:起手式--拦截非法字符> 3. <动手写个数字输入框3:痛点--输入法是个魔鬼> 4. <动手写个数字输入框4:魔鬼在细节--打磨光标位置> 从源头抓起--拦截非法字符  从<动手写个数字输入框1:inpu

使用jQuery UI库开发Web界面的简单入门指引_jquery

一.jQuery UIjQuery UI 是以jQuery 为基础的开源JavaScript 网页用户界面代码库.包 含底层用户交互.动画.特效和可更换主题的可视控件.我们可以直接用它来构建具有很 好交互性的web 应用程序. jQuery UI 的官网网站为:http://jqueryui.com/ jquery-ui-x.xx.x.custom.zip .里面目录结构如下: 1.css,包含与jQuery UI 相关的CSS 文件: 2.js,包含jQuery UI 相关的JavaScrip

Android平台中一些免费的UI库及组件资源

短短数年时间 Android 平台就已经形成了一个庞大而活跃的开发者社区.许多社区开发的项目业已进入成熟阶段,甚至可以用于商业的软件生产中,且不用担心质量问题.本文编译自 androiduipatterns,意在分享一些免费.开源的 Android UI 库及组件资源.    1. GreenDroid         该项目可以实现下列的 UI 设计: 动作栏(Action Bar) 快捷动作(Quick Action) 工作区(Workspace) 动态列表(Dynamic List) 以及

extjs 布局中添加了collapseMode:&amp;#039;mini&amp;#039;,就能出现小箭头折叠west 请问小箭头的click事件是什么?

问题描述 extjs 布局中添加了collapseMode:'mini',就能出现小箭头折叠west 请问小箭头的click事件是什么?我想手动调用让他折叠! 问题补充:柴秉承 写道 解决方案 Ext.onReady(function() {var nodeData = [{text:'node',leaf:false,children:[{text:'childNode',leaf:false,children:[{text:'hello',leaf:true}]}]}]var panel =

动手写缓存

目前市面上已经有很多开源的缓存框架,比如Redis.Memcached.Ehcache等,那为什么还要自己动手写缓存?本章将带领大家从0到1写一个简单的缓存框架,目的是让大家对缓存的类型.缓存的标准.缓存的实现以及原理方面有一个系统的了解,做到知其然,知其所以然. 缓存定义的规范 JSR是Java Specification Requests的缩写,意思是Java规范提案,它已成为Java界的一个重要标准.在2012年10月26日JSR规范委员会发布了JSR 107(JCache API)的首个