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

 

 

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