博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
自己动手写UI库——引入ExtJs(布局)
阅读量:7197 次
发布时间:2019-06-29

本文共 1595 字,大约阅读时间需要 5 分钟。

第一:

来看一下最终的效果
第二:
来看一下使用方法:
第三:
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#
 
 
好,本文大概就是这样,喜欢我的文章,请帮忙点推荐------------------->

转载地址:http://uvkum.baihongyu.com/

你可能感兴趣的文章
Python学习笔记 - 02: 用Python Client连接ElasticSearch操作数据
查看>>
2018年前端开发回顾
查看>>
微信小程序访问webService(Java)
查看>>
QT从QObject实现多重继承
查看>>
Hystrix的配置属性优先级和详解
查看>>
PyCharm入门教程——用字符串文字拆分行
查看>>
量化交易系统平台开发:量化交易的门类区分
查看>>
高级开发不得不懂的Redis Cluster数据分片机制
查看>>
突然,form表单参数提交,但是java接收不到
查看>>
开发Yii2过滤器并通过behaviors()行为调用
查看>>
白话SpringCloud | 第零章:前言
查看>>
XMind中的“任务信息”视图
查看>>
OSChina 双十一乱弹 ——来自单身狗的哀鸣
查看>>
OSChina 周三乱弹 ——我们职业更好的名字:爱码士
查看>>
左边的项目管理器不见了
查看>>
android 获取唯一标识
查看>>
HTML5 - Server-Sent Events
查看>>
为MySQL授权
查看>>
用 Octave 对音频文件进行基本数学的信号处理
查看>>
看视频是好的学习方法
查看>>