jQuery MiniUI,快速开发WebUI界面

中文教程

移动web应用开发-Sencha Touch篇(5)

这次主要介绍Sencha Touch中的XTemplate组件,利用该组件可以方便的构造html代码,很实用。为了减少不必要的说解,让内容更加简洁清晰,这里直接给出对应代码和代码的相应注释,只要有JavaScript基础的同学就能轻易掌握。

一、利用XTemplate创建HTML代码


移动web应用开发-Sencha Touch篇(4)

Sencha Touch中提供了许多组件,这一次以轮播组件(carousel)为引子,介绍一下Sencha Touch组件的使用方法。
以下先给出轮播插件的具体实现方法:

这里使用default定义了在这个fieldset中的默认labelwidth属性值都为20&(有很多陌生的地方暂且不用管,以后会说到)
此外,轮播组件还有以下其他属性:
carousel.next();//显示之前一个
carousel.prev();//显示之后一个
carousel.setActiveItem(1);//指定显示任何一个
这里指的是轮播显示的界面

移动web应用开发-Sencha Touch篇(3)

第一个要接触的就是面板这个组件,它是构建一个页面最基础的组件,其他的内容都要显示在这个面板中。
在上一篇中,我们就已经拿面板为例,介绍了创建组件的方法。这里再把创建面板的代码重复一下:

var panel = Ext.create('Ext.Panel', {
            fullscreen: true,
            id: 'myPanel',
            style: 'color:red',
            html: '一个简单的示例面板'
        });

有问题的话可以参考之前的博客。

移动web应用开发-Sencha Touch篇(2)

了解了大致的Sencha Touch框架之后,我们就可以在其中进行代码的编写了。只要上一篇的内容都按部就班的做了,接下来要做的就是慢慢学这个框架,按照内容敲代码—看结果,基本没有什么过不去的地方。

首先跟上次一样,建立index.html文件和对应的app.js文件。用Sencha Touch搭建的移动web应用,app.js的内容框架大致如下:

移动web应用开发-Sencha Touch篇(1)

这里希望通过我自己的学习经历,给大家写出最通俗,最方便的HTML5框架使用指南。

2016年,更加关注移动web应用相关开发,重心也放到了基于HTML5的移动app开发。从今天开始将展开Sencha Touch的学习之旅。

Sencha Touch是一款移动web应用开发框架,界面美观,接近原生。

万事开头难,今天我们先来进行文件下载和开发环境的配置。

ExtJS 如何动态加载JavaScript创建窗体

JavaScript不需要编译即可运行,这让JavaScript构建的应用程序可以变得很灵活。我们可以根据需要动态从服务器加载JavaScript脚本来创建和控制UI来与用户交互。下面结合Ext JS来说明如何从服务器上动态加载JS脚本来动态创建窗体。

1 项目结构:

项目结构如下:其中GetJSUI一般处理程序用来从数据库表中抓取UI配置,并返回到客户端;Contents文件夹下用HTML文件和JS库等。


Sencha ExtJS 6 Widget Grid 入门

最近由于业务需要,研究了一下Sencha ExtJS 6 ,虽然UI和性能上据相关资料说都有提升,但是用起来确实不太顺手,而且用Sencha cmd工具进行测试和发布,很多内部细节都是隐藏的,出了问题不好跟踪。更奇葩的是明明在sencha app watch上运行很好,但是sencha app build后会出现异常。即使是这样,但Sencha ExtJS 6 在UI控件和编程模式上确实比较强大。下面介绍一个 Widget Grid 用法,可以在表格grid中进行列样式渲染,是一个比较强大的功能:


Sencha ExtJS 6 入门

Sencha Ext JS号称是目前世界上最先进和最强大的、支持多平台多设备的JavaScript应用程序开发框架。首先看一下Ext JS的发展简史。


ExtJS最新技巧

Grid水印

Ext JS的Grid是一个便于在布局中显示信息的伟大工具。有些用户可能会希望将这些信息打印为会议资料或宣传材料,而且会希望在打印的时候,能添加水印以便进行版权保护、保密或作为品牌的一种方式。

这个很容易实现,只要在Ext JS的Grid中为它指定一个样式就行了,而这只需要一些简单的CSS技巧。

实现这种效果的关键是修改单元格的样式,并在Grid中插入不透明且不会遮盖Grid内容的背景。

使用Sencha ExtJS创建炫丽的图形(1)

许多人可能对Ext JS中的图表包相当熟悉了。通过它可以快速创建相当强悍的可视化效果,如三维柱形图和三维饼图。通常情况下,对于应用程序来说,单单图表是不足够的,例如,想在应用程序中创建流程图、座位图、原理图,又或许是一些交互的动画等等。


ExtJS最新技巧

Kevin Cassidy:全宽度的字段错误信息

有考虑过让验证信息显示在表单字段的下面(msgTarget:‘under’),但最后发现验证信息被压缩显示了吗?这是因为该方式显示的信息只会显示在输入自动的下面。还好,这里有一个简单的方式来解决这个问题,以便使用字段与标签合起来的整个宽度。

要实现该视觉效果,重写错误信息的样式就行了。要将这个应用到字段的单一实例,只需要将以下cls值添加到字段就行了:

在ExtJS 6通用应用程序中使用既共享又特定于某视图的代码

在本文,在展示如何编写Ext JS 6通用应用程序代码以使控制器和视图模型能适用于特定视图又是共享的。

想了解更多有关Ext JS 6的信息吗?请报名参加培训班吧。

本文的重点是通用应用程序,而不是只能用于纯classic或纯Modern的应用程序。特别是,app文件夹在通用应用程序中具有独特的用途。

背景

你可能已经听说过这个令人激动的消息,Ext JS已经将Sencha Touch组件合并到库里了。这将允许你使用传统的桌面Ext JS和移动Touch用户界面创建通用应用程序以运行在桌面、平板和智能手机上。


如何在ExtJS 6中使用Fashion美化应用程序

在Ext JS 6,一个最大的改变就是框架合并,使用一个单一的代码库,就可以为每一种设备开发各具有良好体验的最好应用程序。它还带来了一种美化应用程序的新方式。

在本文,重点是Sencha Fashion。这是什么?该如何使用它呢?在未来陆续的教程中,将为你展示如何去创建一个极好的暗黑主题。

编译主题

Ext JS应用程序的主题使用的是SASS,它是一种动态编写CSS代码的方法。例如,可以在样式表中使用变量和运算。浏览器并不了解SASS,它只知道CSS,隐藏,这些SASS主题需要被编译为浏览器能理解的,生产用的CSS代码。在Ext JS应用程序中可以通过在Sencha Cmd运行以下命令来编译主题:

使用Sencha ExtJS 6开发通用应用程序

在Sencha和整个Ext JS团队的支持下,我很高兴能跟大家分享一下有关Sencha Ext JS 6的更多细节。该版本向前迈出了一大步,支持使用一个单一的代码库来开发基于桌面、平板和智能手机的通用应用程序。我们成功的将Ext JS和Sencha Touch框架合并在一起。我想对在建立统一框架的这个旅程中,为我们提供了宝贵的反馈的Sencha社区和我们的客户说声感谢。我们一起创造了这世界上最先进和最强大的支持多平台、多设备Web应用程序开发的javascript框架。


在Ext JS应用程序中构建可维护的控制器

在eMortgage Logic公司,2011年底开始使用Ext JS 4。当时,还不知道如何正确编写Ext JS应用程序,但最后还是掌握了如何让应用程序实现所需的方法。不过,这并不意味着能很好的去实现他们。最终结果是,应用程序是由十几个大规模控制器实现处理的,而同时,视图使用的是一组简单的配置。控制器掌控着一切,但随着时间的推移,控制器变得越来越难于维护,这就让人开始怀疑当初的代码是否妥当了。

最后,我们试图让视图变得聪明一点,沿着这个思路,我们有点开窍了。最终,终于知道如何在控制器和视图之间划清界线了。为了说明我们团队新发现的这个知识,我撰写了以下这个指南。该指南使用了一个简单的方式来说明如何拆卸大的控制器并替换他们的的逻辑代码,以便于维护。这不仅有利于短期内使用Ext JS 4的团队,也有利于近期升级到Ext JS 5视图控制器的团队。

在这篇文章,将创建一个小型的控制和有几个需求的简单视图,然后通过几个步骤来分离他们。

本文最终的目标是创建一个实现以下要求的控制器和视图:

  • 提供一个表单让用户输入喜好
  • 保持喜好到用户的记录
  • 更新用户的名字和喜好等信息
[/code]

Sencha Cmd中脚本压缩方法之比较

概述

这么多年来,Web开发人员都被告知应优化他们生产环境的代码。传统的方法是将应用程序的所有脚步进行压缩以减少应用程序的大小,以便让应用程序加载更快。而Sencha Cmd这么多年以来已经将这个过程自动化了。

然而,许多客户,还不知道可通过调整Sencha Cmd的压缩代码来进行一些额外的处理。尽管Sencha Cmd默认是适应YUI压缩来进行压缩的,但还可以通过配置使用Google Closure或UglifyJS来进行压缩。下面将会介绍这些,并去测试哪一个压缩工具提供了最大的压缩效果。

要注意的是,本文的本意并不是让你使用某个特定的工具,至于选择哪一种,不选择哪一种,是有许多的因素决定的,本文只是尝试提供一些参考意见。

Sencha Touch 视频 - Sencha Touch 介紹

来自台湾陳慧鴻老师的作品,介绍得很详细;

普通话版, 很适合我这样英文不好的同学观看;

ComboBox 和 DateField 在IE下消失的解决方法

前言

作为Ext JS 的基本的Form 的组件, 这两个没有什么难的地方。
但是开发过程中却遇到了在 IE 浏览器中, 放大, 缩小窗口大小, 会导致 这两个组件消失不见。 点击某些地方又能显示出来。 不报任何错误。 在其他浏览器正常。

问题发生的状况

因为是在原项目的基础上导入Ext js , 所以页面中的form 并不是通过标准的 先创建form 组件, 再add form field 的方式进行的。
这里使用的 是纯html的form 和 input, 再使用Ext js 把 input render 成 Combobox 和 DateField.

在 ExtJS 中使用 Font Awesome

Font Awesome 是目前最流行的图标方案之一,是一套优质的图标字体库以及 CSS 图标框架。相对于传统的图片作为图标,字体图标支持自适应调节大小、可以使用字体的一些特性调整风格(颜色、大小、字体阴影)、更小的文件体积。

下载 Font Awesome

根据你或者项目的编程习惯,你可以通过以下几种方式获取最新版的 Font Awesome:

  1. 到 Font Awesome 项目主页, 点击 Download 按钮下载最新版本。
  2. 到 Font Awesome Github 主页, 下载最新版本或者 git clone 下来。
  3. 如果项目组有使用 bower 来管理第三方包,那么可以通过 bower install fontawesome 来获取 Font Awesome。

Font Awesome 的目录结构是这样,css 是 Font Awesome 提供的 CSS 类, fonts 内就是图标的字体文件,不同的格式是为了兼容不同的浏览器,并且新版本开始支持 SVG 的形式。less 和 scss 是用来管理 css 的。

升级到 ExtJS 5的过程记录

最近为公司的一个项目创建了一个 ExtJS 5 的分支,顺便记录一下升级到 ExtJS 5 所遇到的问题以及填掉的坑。由于 Sencha Cmd 的 sencha app upgrade 命令无法正常地讲项目升级至 ExtJS 5 (或许是方式不对) ,所以我的做法是新建一个 ExtJS 5 的项目,然后把 app 包拷贝过去,然后慢慢修复报错的东西,直到项目可以正常跑起。

说在前面:

升级的项目目前是一个十分初级的版本,代码量很少,只有导出报表和 dashboard 功能,主要是 Charts 的东西,并 涉及到 Grid 和 Tree 的使用,所以本文更多的是讲 ExtJS 5 Charts 部分的东西(变化的)。