`
shaohan126448
  • 浏览: 118456 次
  • 来自: 北京
社区版块
存档分类
最新评论

第 8 章 哭泣吧!现在才开始讲基础问题。

阅读更多

8.1. Ext.get

 

ext里用来获得Element的一个函数,用途还算比较广,可以通过不少途径获得咱们需要的Element,而这个Element包括很多有趣的功能。

Element跟document.getElementById("myDiv")得到的dom对象是不一样的,虽然你还可以使用老方式获得指定id的元素,但那样就失去了ext提供的各种常用操作,动画啦,定位啦,css啦,事件啦,拖拽啦。其实也不用担心,即便使用了Ext.get()获得了myDiv,还是可以直接访问document.getElementById()应该得到的部分,而且挺简单的,Ext.get().dom就可以了。

下面让偶们来看看这些基本的功能会是咋样呢?

  1. 先获得一个Element

    var myDiv = Ext.get('myDiv');

    这里我们传入的是一个id,你可以在html里看到<div id="myDiv"></div>,然后我们用Ext.get('myDiv')从html里取得这个div,然后封装成Element对象,现在这个对象就已经放到缓存中了,以后再用的时候就更快撒。

  2. 最吸引眼球的是动画效果,所以我们先动两下。

    myDiv.hightlight();

    红色高亮,然后渐退。

    myDiv.addClass('red');

    添加自定义CSS类,css里有.red {background: red;}的定义,这样myDiv的背景直接变成了红色。

    myDiv.center();

    myDiv移动的窗口中间,包括垂直和竖直居中。

    myDiv.setOpacity(.25);

    使myDiv半透明

  3. 再看看怎么才好渐变动画

    myDiv.setWidth(100);

    这样可以直接设置myDiv的宽度,是没有渐变动画的。

    myDiv.setWidth(100, true);

    这样就打开了动画开关,如此简单就可以看到myDiv在动咯。

    咱们还可以控制动画的动作,如下

    myDiv.setWidth(100, {
        duration: 2,
        callback: this.highlight,
        scope: this
    });

    duration是间隔,数字越大移动越慢,callback说是动画完成后执行,但我没饰演出来,scope是callback执行的范围。

动画没法截图,还是看看lingo-sample/1.1.1/08-01.html,lingo-sample/2.0/08-01.html吧,四个按钮可以让myDiv在窗口里乱动,哈哈。

8.2. 要是我们想一下子获得一堆元素咋办?

 

现在像css那样的批量选择方式真的很流行,ext里也没有落伍,一定会赶这个潮流。

  1. 选择所有<P>元素

    现在我们要获得所有<P>元素,然后让他们都闪一下。

    Ext.select("p").highlight();
  2. 按照css的class选择

    首先我们有几个div,都使用class="red",然后我们让他们都闪一下,嘿嘿嘿~因为highlight()调用比较简单嘛。

    Ext.select("div.red").highlight();

这种方式在prototype和jquery里已经发扬光大,而且还光大得很呢,你只需要按照css的选择方式,就可以得到你需要的集合。这方面其实jquery颇为神奇,把select用的真是出神入化,可叹,它对js封装太狠,你用jquery的时候完全感觉不到自己是在用javascript,这样接触原生方法的机会很少,等于把自己绑定到jquery上,最后权衡利弊,只好忍痛割爱了。

批量选择,见lingo-sample/1.1.1/08-02.html和lingo-sample/2.0/08-02.html。

8.3. DomHelper和Template动态生成html

 

用dom生成html元素一直是头疼的事情,以前都是听springside的教导,使用jsTemplate和Scriptaculous的组合。现在到了ext里面,我们就来看看它自己的实现。

8.3.1. DomHelper用来生成小片段

 

使用DomHelper非常灵活,超简单就可以生成各种html片段,遇到复杂情况也要求助于它。

大概就是这么用

var list = Ext.DomHelper.append('parent', {tag: 'div', cls: 'red'});

它就是向id=parent这个元素里,添加一个div元素。

按照文档里讲的,第二个参数{}里,除了四个特殊属性以外都会复制给新生成元素的属性,这四个特殊属性是

  1. tag,告诉我们要生成一个什么标签,div啦,span啦,诸如此类。

    千万别告诉我到现在你还不知道这些html标签,中间告诉你多少次先去学学html和css啦?你飞过来的不成?

  2. cls,指的是<div class="red"></div>这种标签中的class属性,因为class是关键字,正常情况下应该写成className,可jack说className太长了,最后就变成cls了。-_-。

    他就喜欢玩这个,把dataStore写成ds,DomHelper写成dh,Element写成el,ColumnModel写成cm,SelectionModel是sm。唉,发明的专业名词缩写好多呀。

  3. children,用来指定子节点,它的值是一个数组,里边包含了更多节点。

  4. html,对应innerHTML,觉得用children描述太烦琐,直接告诉节点里边的html内容也是一样。

DomHelper除了append还有几个方法,指定将新节点添加到什么位置。

为了比对效果,先放一个初始页面。

原始的html是这样的。一个div下有4个节点,其中第三个子节点下还有自己的子节点。

<div id="parent" style="border: 1px solid black;padding: 5px;margin: 5px;background: lightgray;">
  <p id="child1">child1</p>
  <p id="child2">child2</p>
  <div id="child3">
    <p id="child5">inner child</p>
  </div>
  <p id="child3">child4</p>
</div>
  1. append是将新节点放到指定节点的最后。

    Ext.DomHelper.append('parent', {tag: 'p', cls: 'red', html: 'append child'});
  2. insertBefore,新节点插入到指定节点前面。

    Ext.DomHelper.insertBefore('parent', {tag: 'p', cls: 'red', html: 'insert before child'})
  3. insertAfter,新节点插入到指定节点后面。

    Ext.DomHelper.insertAfter('parent', {tag: 'p', cls: 'red', html: 'insert before child'})
  4. overwrite,会替换指定节点的innerHTML内容。

    Ext.DomHelper.overwrite('child3', {tag: 'p', cls: 'red', html: 'overwrite child'})

闲来无聊,也看一看children这个属性的用法。

Ext.DomHelper.append('parent', {
    tag: 'ul',
    style: 'background: white;list-style-type: disc;padding: 20px;',
    children: [
        {tag: 'li', html: 'li1'},
        {tag: 'li', html: 'li2'},
        {tag: 'li', html: 'li3'}
    ]
});

这样就在parent里添加了一个ul标签,ul里包含三个li。呵呵~炫啊。

代码见lingo-sample/1.1.1/08-03.html和lingo-sample/2.0/08-03.html。

8.3.2. 批量生成还是需要Template模板

 

场景模拟:目前有三男两女的json数据,要输出成html显示出来。

var data = [
    ['1','male','name1','descn1'],
    ['2','female','name2','descn2'],
    ['3','male','name3','descn3'],
    ['4','female','name4','descn4'],
    ['5','male','name5','descn5']
];

照搬grid时的测试数据呢,嘿嘿。只不过这次我们用的不再是ds,cm,grid的方式解析输出,而是用模板自己定义输出的格式。

首先要定义一个模板

var t = new Ext.Template(
    '<tr>',
        '<td>{0}</td>',
        '<td>{1}</td>',
        '<td>{2}</td>',
        '<td>{3}</td>',
    '</tr>'
);
t.compile();

索引从0开始,一共4个元素。然后在用的时候,这样子。

for (var i = 0; i < data.length; i++) {
    t.append('some-element', data[]);
}

这段代码对应html中的一个表格,id="some-element"是tbody的id,我们使用模板为table增添了四行。

<table border="1">
    <tbody id="some-element">
        <tr>
            <td>id</td>
            <td>sex</td>
            <td>name</td>
            <td>descn</td>
        </tr>
    </tbody>
</table>

最终的显示结果就是包含五行数据的表格:

定义模板的时候,可以使用Ext.util.Format里的工具方法,对数据进行格式化。常用的就是trim去掉收尾空格和ellipsis(10),ellipsis判断,当字符长度超过10时,自动截断字符串并在末尾添加省略号,很常用的功能哩。

在模板里使用这些函数的话也很简单,不过我不说,你还是不知道,嘿嘿

var t = new Ext.Template(
    '<tr>',
        '<td>{0}</td>',
        '<td>{1:trim}</td>',
        '<td>{2:trim}</td>',
        '<td>{3:ellipsis(10)}</td>',
    '</tr>'
);
t.compile();

如此这般,冒号加函数名称就可以实现我们的愿望了。

可惜人算终不如天算,jack再神奇,也不可能考虑到所有的可能性,比如现在我们就想根据性别不同显示图片,jack怕是想破了脑袋,也想不出这种可能来,所以呢,他干脆不想了,而是给咱们留了一个自定义函数的接口。

var t = new Ext.Template(
    '<tr>',
        '<td>{0}</td>',
        '<td>{1:this.renderSex}</td>',
        '<td>{2:trim}</td>',
        '<td>{3:ellipsis(10)}</td>',
    '</tr>'
);
t.renderSex = function(value) {
    if (value == 'male') {
        return "<span style='color:red;font-weight:bold;'>红男</span><img src='user_male.png' />";
    } else {
        return "<span style='color:green;font-weight:bold;'>绿女</span><img src='user_female.png' />";
    }
};
t.compile();

显示的红男绿女,就像我们预想的那样呈现在我们眼前了。

你可以从lingo-sample/1.1.1/08-05.html和lingo-sample/2.0/08-05.html看到这些例子,实际上,这两个文件的内容是完全相同的

分享到:
评论

相关推荐

    EXT2.0 简明教程!(chm)

    哪里都没有找到下载,就自己弄了下,方便随时查看 &lt;br&gt;第 1 章 闪烁吧!...现在才开始讲基础问题。 第 9 章 沉寂吧!我们要自己的控件 说在前头的 附录 A. 常见问题乱弹 附录 C. 后记

    EXT 教程

    EXT 教程 第 1 章 闪烁吧!看看extjs那些美丽的例子。_files 第 2 章 震撼吧!让你知道ext表格控件的厉害。_files 第 3 章 歌颂吧!只为了树也要学ext。...现在才开始讲基础问题。.htm

    电力系统中基于MATLAB的价格型需求响应与电价弹性矩阵优化

    内容概要:本文详细介绍了如何利用MATLAB进行价格型需求响应的研究,特别是电价弹性矩阵的构建与优化。文章首先解释了电价弹性矩阵的概念及其重要性,接着展示了如何通过MATLAB代码实现弹性矩阵的初始化、负荷变化量的计算以及优化方法。文中还讨论了如何通过非线性约束和目标函数最小化峰谷差,确保用户用电舒适度的同时实现负荷的有效调节。此外,文章提供了具体的代码实例,包括原始负荷曲线与优化后负荷曲线的对比图,以及基于历史数据的参数优化方法。 适合人群:从事电力系统优化、能源管理及相关领域的研究人员和技术人员。 使用场景及目标:适用于希望深入了解并掌握价格型需求响应机制的专业人士,旨在帮助他们更好地理解和应用电价弹性矩阵,优化电力系统的负荷分布,提高能源利用效率。 其他说明:文章强调了实际应用中的注意事项,如弹性矩阵的动态校准和用户价格敏感度的滞后效应,提供了实用的技术细节和实践经验。

    一级医院医疗信息管理系统安装调试技术服务合同20240801.pdf

    一级医院医疗信息管理系统安装调试技术服务合同20240801.pdf

    表5 文献综述.doc

    表5 文献综述.doc

    36W低压输入正激电源, 正激变压器设计方法步骤及谐振电感的设计方法,主要讲诉了正激电源变压器测的输入输出参数,按输入的条件设计相关的变压器的参数,同时将输出电感的设计方法一并例出,详细的设计步骤

    36W低压输入正激电源 变压器电感设计

    基于YOLOv8的深度学习课堂行为检测系统源码(含检测图片和视频)

    基于YOLOv8的深度学习课堂行为检测系统源码,软件开发环境python3.9,系统界面开发pyqt5。在使用前安装python3.9,并安装软件所需的依赖库,直接运行MainProgram.py文件即可打开程序。模型训练时,将train,val数据集的绝对路径改为自己项目数据集的绝对路径,运行train.py文件即可开始进行模型训练,内含项目文件说明,以及检测图片和视频。

    odbc-oracle zabbix模版原版

    odbc_oracle zabbix模版原版

    基于纳什谈判理论的风光氢多主体能源系统合作运行方法——综合能源交易与优化模型

    内容概要:本文探讨了利用纳什谈判理论来优化风光氢多主体能源系统的合作运行方法。通过MATLAB代码实现了一个复杂的优化模型,解决了风电、光伏和氢能之间的合作问题。文中详细介绍了ADMM(交替方向乘子法)框架的应用,包括联盟效益最大化和收益分配谈判两个子任务。此外,还涉及了加权残差计算、目标函数构造、可视化工具以及多种博弈模式的对比等功能模块。实验结果显示,合作模式下系统总成本显著降低,氢能利用率大幅提升。 适合人群:从事能源系统研究的专业人士、对博弈论及其应用感兴趣的学者和技术人员。 使用场景及目标:适用于需要优化多主体能源系统合作运行的场合,如工业园区、电网公司等。主要目标是提高能源利用效率,降低成本,增强系统的灵活性和稳定性。 其他说明:代码中包含了丰富的可视化工具,能够帮助研究人员更好地理解和展示谈判过程及结果。同时,提供了多种博弈模式的对比功能,便于进行性能评估和方案选择。

    C#与Halcon联合编程实现高效视觉几何定位与测量框架

    内容概要:本文详细介绍了如何利用C#与Halcon联合编程构建高效的视觉几何定位与测量框架。主要内容涵盖模板创建与匹配、圆测量、数据持久化以及图像采集等方面的技术细节。首先,通过创建形状模板并进行匹配,实现了工件的精确定位。接着,针对圆形物体的测量,提出了动态ROI绘制、亚像素边缘提取和稳健圆拟合的方法。此外,还讨论了模板管理和图像采集的最佳实践,确保系统的稳定性和高效性。最后,强调了Halcon对象的内存管理和错误处理机制,提供了实用的优化建议。 适合人群:具备一定编程基础,尤其是对C#和Halcon有一定了解的研发人员和技术爱好者。 使用场景及目标:适用于工业生产线上的自动化检测设备开发,旨在提高工件定位和尺寸测量的精度与效率。主要目标是帮助开发者掌握C#与Halcon联合编程的具体实现方法,从而构建稳定可靠的视觉检测系统。 其他说明:文中提供了大量实战代码片段和调试技巧,有助于读者快速理解和应用相关技术。同时,作者分享了许多实际项目中的经验和教训,使读者能够避开常见陷阱,提升开发效率。

    QT6 C++视频播放器实现(基于QGraphicsVideo)

    QT视频播放器实现(基于QGraphicsView)

    评估管线钢环焊缝质量及其对氢脆的敏感性.pptx

    评估管线钢环焊缝质量及其对氢脆的敏感性.pptx

    机器学习(预测模型):专注于 2024 年出现的漏洞(CVE)信息数据集

    该是一个在 Kaggle 上发布的数据集,专注于 2024 年出现的漏洞(CVE)信息。以下是关于该数据集的详细介绍:该数据集收集了 2024 年记录在案的各类漏洞信息,涵盖了漏洞的利用方式(Exploits)、通用漏洞评分系统(CVSS)评分以及受影响的操作系统(OS)。通过整合这些信息,研究人员和安全专家可以全面了解每个漏洞的潜在威胁、影响范围以及可能的攻击途径。数据主要来源于权威的漏洞信息平台,如美国国家漏洞数据库(NVD)等。这些数据经过整理和筛选后被纳入数据集,确保了信息的准确性和可靠性。数据集特点:全面性:涵盖了多种操作系统(如 Windows、Linux、Android 等)的漏洞信息,反映了不同平台的安全状况。实用性:CVSS 评分提供了漏洞严重程度的量化指标,帮助用户快速评估漏洞的优先级。同时,漏洞利用信息(Exploits)为安全研究人员提供了攻击者可能的攻击手段,有助于提前制定防御策略。时效性:专注于 2024 年的漏洞数据,反映了当前网络安全领域面临的新挑战和新趋势。该数据集可用于多种研究和实践场景: 安全研究:研究人员可以利用该数据集分析漏洞的分布规律、攻击趋势以及不同操作系统之间的安全差异,为网络安全防护提供理论支持。 机器学习与数据分析:数据集中的结构化信息适合用于机器学习模型的训练,例如预测漏洞的 CVSS 评分、识别潜在的高危漏洞等。 企业安全评估:企业安全团队可以参考该数据集中的漏洞信息,结合自身系统的实际情况,进行安全评估和漏洞修复计划的制定。

    QML Combobox 自动过滤,输入字符串后自动匹配

    博客主页:https://blog.csdn.net/luoyayun361 QML ComboBox控件,输入关键字后自动过滤包含关键字的列表,方便快速查找列表项

    【人工智能领域】人工智能技术发展历程、核心原理及应用指南:涵盖机器学习、深度学习、NLP和计算机视觉的全面介绍

    内容概要:本文全面介绍了人工智能技术的发展历程、核心技术原理、应用方法及其未来趋势。首先阐述了人工智能的定义和核心目标,随后按时间顺序回顾了其从萌芽到爆发的五个发展阶段。接着详细讲解了机器学习、深度学习、自然语言处理和计算机视觉等核心技术原理,并介绍了使用现成AI服务和开发自定义AI模型的应用方法。此外,还展示了智能客服系统、图像分类应用和智能推荐系统的具体实现案例。针对普通用户,提供了使用大模型的指南和提问技巧,强调了隐私保护、信息验证等注意事项。最后展望了多模态AI、可解释AI等未来发展方向,并推荐了相关学习资源。; 适合人群:对人工智能感兴趣的初学者、技术人员以及希望了解AI技术应用的普通大众。; 使用场景及目标:①帮助初学者快速了解AI的基本概念和发展脉络;②为技术人员提供核心技术原理和应用方法的参考;③指导普通用户如何有效地使用大模型进行日常查询和任务处理。; 其他说明:本文不仅涵盖了AI技术的基础知识,还提供了丰富的实际应用案例和实用技巧,旨在帮助读者全面理解人工智能技术,并能在实际工作中加以应用。同时提醒读者关注AI伦理和版权问题,确保安全合法地使用AI工具。

    本学习由 Matrix 工作室制作并开发,包括算法与数据结构的学习路线和各种题解

    本学习由 Matrix 工作室制作并开发,包括算法与数据结构的学习路线和各种题解。

    基于智慧图书馆基础业务流程Axure11高保真原型设计

    本项目致力于构建基于微服务架构的智慧图书馆管理平台,重点突破多校区图书馆异构系统间的数据壁垒。通过建立统一数据治理规范、部署智能分析模块、重构业务流程引擎,系统性实现以下建设目标:构建跨馆业务数据的标准化整合通道,实施容器化部署的弹性资源管理体系,开发具备机器学习能力的业务辅助决策系统,打造可量化评估的管理效能提升模型,最终形成支持PB级数据处理的分布式存储体系与全维度数据资产图谱。

    mysql中慢sql分析

    根据processlist查询出慢sql 1.修改配置文件中的mysql链接 2.目前是15秒执行一次获取执行时间在5秒上的sql,可以在配置中修改 3.执行后查出的慢sql会记录到log文件夹中以日期命名的txt文件中,可自行查验

    全域通航 低空经济服务平台建设实施方案.pptx

    全域通航 低空经济服务平台建设实施方案.pptx

    全国联合交通查询手册,涵盖各大城市

    全国交通一卡通互联互通服务手册,支持在线查询

Global site tag (gtag.js) - Google Analytics