[019]Sencha Ext JS 6.0使用教程1

来源:互联网 发布:怎么在淘宝上买小说 编辑:程序博客网 时间:2024/05/22 04:58

为什么使用sencha Ext JS 6.0

sencha对原先的模块与Ext进行了融合,新版本可以一次开发多平台使用,Web版、HD版、App应用程序(包括Android和IOS)跨平台使用,方便开发使用,是个不错的选择。

1, 参考网址

官方说明文档:
1, Sencha Products:http://docs.sencha.com/
2, Sencha Ext Js 6.0:http://docs.sencha.com/extjs/6.0/
Cmd下载地址:http://www.sencha.com/products/sencha-cmd/
Sdk下载地址:http://www.sencha.com/products/extjs/evaluate/

官方开发文档界面:
这里写图片描述

Sencha Ext JS 6.0开发文档界面:
8大块内容对Sencha Ext JS 6.0从介绍到应用开发进行了详细说明:
这里写图片描述

2,安装部署

Cmd安装:
SenchaCmd-6.0.1.76-windows-64bit.exe
文件直接双击安装就行,安装好配置一下环境变量,这样命令行里什么位置都可以使用sencha命令了

下载最新sdk后解压,里面有例子:

3,基本命令

生产新项目:sencha –sdk {sdk的路径名} generate app {应用名称} {应用路径(如果是当前路径就是”.”)}
重新加载项目:sencha app build
刷新项目:sencha app refresh
查看项目:sencha app watch
出现Waiting for changes…提示表示就可以访问了,

4,案例展示

1,运行

在sdk目录下新建一个项目:sencha –sdk . generate app MyApp MyApp

这里写图片描述

Sdk目录下sencha app watch命令,访问:http://localhost:1841/

这里写图片描述

2,控件代码

各类所需的控件代码及演示:http://localhost:1841/build/examples/index.html
也可采用官方案例网址:http://examples.sencha.com/extjs/6.0.1/examples/
内容一样
案例首界面:

这里写图片描述

例如:折线图:左侧为实例展示,右侧有需要的代码片段

这里写图片描述

这为我们开发提供巨大的方便,只要引入即可

3,模板演示

不错的模板展示:http://localhost:1841/build/examples/admin-dashboard/#dashboard

登录界面:

这里写图片描述

酷炫的场景设计:

这里写图片描述

组件布局:

这里写图片描述

各类chart

这里写图片描述

由此可以看出Sencha Ext JS6.0开发应用程序还是非常方便的,强大的控件代码已能够满足我们的需求,更可以自己扩展,主要是其跨设备、跨平台行为我们省去了极大的人力、物力。极强的页面表现力,更能赢得用户的喜爱。

0 0
原创粉丝点击