没有合适的资源?快使用搜索试试~ 我知道了~
首页ExtJS6入门与中文翻译:严谨的前端框架
"ExtJS6示例中文版是一份深入浅出的学习资料,由一位开发者翻译自国外的《ExtJS6ByExample》。原书是针对ExtJS6的高级教程,售价较高,但内容详细且包含易于理解的实例。作者计划通过翻译这本书,不仅提升自己的理解和技能,也分享给更多人,尤其是在中文资料匮乏的背景下。 该文档强调了学习ExtJS6的重要性,因为它能提供与传统的JavaScript相比更为严谨、面向对象的编程体验,有助于代码的可维护性和团队协作。然而,它也有一定的学习曲线,因为作为前端重量级库,新用户可能会遇到一定的挑战。 章节内容涵盖了一系列关键主题,包括: 1. ExtJS的优势:阐述了ExtJS在大型Web应用中的优势,如提高代码质量和团队协作效率。 2. ExtJS简介:对ExtJS的基本概念和设计哲学进行介绍,突出其面向对象的特点。 3. 安装和配置:指导读者如何安装和配置SenchaCmd(官方提供的工具),它是构建和管理ExtJS项目的必备组件。 4. 搭建ExtJS应用:详细解释如何使用SenchaCmd创建和初始化一个新的ExtJS项目。 5. 应用架构:讨论了ExtJS应用的结构,包括其组件化和模块化的组织方式。 6. 探索核心概念:可能包括组件、视图、模型(ViewModel)、控制器(ViewController)等核心概念的介绍。 阅读者在学习过程中,需要注意作者可能会根据自己的理解和经验添加见解,所以建议结合原文和其他资源,形成自己的理解。此外,引用出处务必标明,以便尊重作者版权。这份中文版资源对于想要深入学习ExtJS6的开发者来说,是一份宝贵的参考资料。"
资源详情
资源推荐
Touch 为一个框架。这两个框架合并后共用一个核心,剩下的代码则分为两部分
classic
和
modern
。传统的
Ext JS
代码移动到
classic
工具包,而
modern
的
代码支持触摸和 HTML5 在 modern 工具包。所以这里需要两个工具包,程序会
根据访问设备自动使用对应的工具包里的
UI
类
(view)
。
应用分两个工具包并共享核心资源和逻辑,这称为通用应用。
现在我们看一下在
modern
下的
Main.js
文件:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
Ext.define('MyApp.view.main.Main', {
extend : 'Ext.tab.Panel',
xtype : 'app-main',
requires : [
'Ext.MessageBox',
'MyApp.view.main.MainController',
'MyApp.view.main.MainModel',
'MyApp.view.main.List'
],
controller : 'main',
viewModel : 'main',
defaults : {
styleHtmlContent : true
},
tabBarPosition : 'bottom',
items : [{
title : 'Home',
iconCls : 'fa-home',
layout : 'fit',
items : [ {
xtype : 'mainlist'
} ]
}, {
title : 'Users',
iconCls : 'fa-user',
bind : {
html : '{loremIpsum}'
}
}, {
title : 'Groups',
iconCls : 'fa-users',
bind : {
html : '{loremIpsum}'
}
}, {
36
37
38
39
40
41
42
title : 'Settings',
iconCls : 'fa-cog',
bind : {
html : '{loremIpsum}'
}
}]
});
这个
Main
视图是一个
tab panel
,因为它继承了
Ext.tab.Panel
。这个类有属
性 controller, viewmodel,requires 配置了需要依赖的类。创建了四个 tab 页
(items
属性
)
,并且绑定了数据
ViewModel
里的
loremIpsum
属性。你将会在后续
章节中了解关于此更多的详细信息。
接着看一下在 \classic\src\view\main\ 下的 Main.js 文件内容:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
Ext.define('NewApp.view.main.Main', {
extend : 'Ext.tab.Panel',
xtype : 'app-main',
requires : [
'Ext.plugin.Viewport',
'Ext.window.MessageBox',
'NewApp.view.main.MainController',
'NewApp.view.main.MainModel',
'NewApp.view.main.List'
],
controller : 'main',
viewModel : 'main',
ui : 'navigation',
tabBarHeaderPosition : 1,
titleRotation : 0,
tabRotation : 0,
header : {
layout : {
align : 'stretchmax'
},
title : {
bind : {
text : '{name}'
},
flex : 0
},
iconCls : 'fa-th-list'
},
tabBar : {
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
flex : 1,
layout : {
align : 'stretch',
overflowHandler : 'none'
}
},
responsiveConfig : {
tall : {
headerPosition : 'top'
},
wide : {
headerPosition : 'left'
}
},
defaults : {
bodyPadding : 20,
tabConfig : {
plugins : 'responsive',
responsiveConfig : {
wide : {
iconAlign : 'left',
textAlign : 'left'
},
tall : {
iconAlign : 'top',
textAlign : 'center',
width : 120
}
}
}
},
items : [ {
title : 'Home',
iconCls : 'fa-home',
items : [ {
xtype : 'mainlist'
} ]
}, {
title : 'Users',
iconCls : 'fa-user',
bind : {
html : '{loremIpsum}'
}
}, {
74
75
76
77
78
79
80
81
82
83
84
85
86
title : 'Groups',
iconCls : 'fa-users',
bind : {
html : '{loremIpsum}'
}
}, {
title : 'Settings',
iconCls : 'fa-cog',
bind : {
html : '{loremIpsum}'
}
} ]
});
上面代码中,
items
中的代码几乎和
modern
工具包中的是一样的。此外,这个文
件有些配置是专用于支持响应设计的。下列代码告诉框架使用的 ui 组件
为
navigation
:
ui: ‘navigation’
在第
8
章
(
主题和响应设计
)
中会介绍关于这个
UI
配置和响应设计的内容。
同样的,如果你打开 classic 或 modern 下的 List.js ,你会发现他们只有很细微
的区别。
探索
Sencha Cmd
命令
现在让我们学习
Sencha Cmd
的一些非常有用的命令。
Sencha 命令格式
Sencha
命令采取以下格式:
sencha [category] [command] [options…] [arguments…]
在 Sencha Cmd 中许多命令和可选项。我们看一下都有哪些比较重要的命令。
Help
键入以下命令,你将获取一个 categories(类别)列表,一个顶层的 commands(命令)
列表,一个可用的
options(
选项
)
列表:
1
sencha help
剩余196页未读,继续阅读
老五~
- 粉丝: 8
- 资源: 35
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- JDK 17 Linux版本压缩包解压与安装指南
- C++/Qt飞行模拟器教员控制台系统源码发布
- TensorFlow深度学习实践:CNN在MNIST数据集上的应用
- 鸿蒙驱动HCIA资料整理-培训教材与开发者指南
- 凯撒Java版SaaS OA协同办公软件v2.0特性解析
- AutoCAD二次开发中文指南下载 - C#编程深入解析
- C语言冒泡排序算法实现详解
- Pointofix截屏:轻松实现高效截图体验
- Matlab实现SVM数据分类与预测教程
- 基于JSP+SQL的网站流量统计管理系统设计与实现
- C语言实现删除字符中重复项的方法与技巧
- e-sqlcipher.dll动态链接库的作用与应用
- 浙江工业大学自考网站开发与继续教育官网模板设计
- STM32 103C8T6 OLED 显示程序实现指南
- 高效压缩技术:删除重复字符压缩包
- JSP+SQL智能交通管理系统:违章处理与交通效率提升
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功