ExtJs 4.2

原创

于 2018-07-25 09:10:35 发布 · 500 阅读

CC 4.0 BY-SA版权

本文介绍了如何搭建ExtJS 4.2的开发环境，包括Ext和Sencha Cmd的下载与安装。通过sencha cmd生成并构建应用程序，详细讲解了MVC模式下Model、View、Controller的结构。此外，文章还涵盖了ExtJS 4.2的主要组件类型，如容器、表单、菜单等，并展示了组件的创建、查询方法以及生命周期。最后，讨论了服务端通信，包括Store中的Ajax请求和JsonP的跨域实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

环境搭建

Ext下载，（需要注册）使用版本为4.2.0，可使用现有项目已下载文件。

Sencha Cmd下载，根据系统下载，可能依赖ruby(版本193)，ruby下载,用于编译的sass文件。

构建项目

使用sencha cmd 生成Ext应用 ,运行构建应用

sencha -sdk /path/to/sdk generate app MyApp /path/to/myapp   //初始化应用

1. sencha app watch // 运行默认1841端口

2. sencha web -port XXXX start // xxxx 为端口名，在xxxx端口运行

3. sencha app build 构建项目

修改主题： .sencha/app/sencha.cfg在文件内查找app.theme ,找到

app.theme = ext-theme-classic // 修改成目标主题，现用主题ext-theme-neptune

3、MVC模式代码结构：

Model模型 是字段和它们的数据的集合，例如User模型带有username和password字段，模型知道如何持久化自己的数据，并且可以和其他模型关联，通常都用在Store中去展示grid和其他组件的数据（Store类似于一个本地仓库(即数据存储器)

View视图 是组件的一种，专注于界面展示 – grid, tree, panel 都是view

Controllers控制器 一个安放所有使你的app正确工作的代码的位置，具体一点应该是所有动作，例如如何渲染view，如何初始化model，和app的其他逻辑

每个Extjs 4 都是从Application类实例开始，这个实例包含应用的全局配置（例如应用的名字），这个实例也负责维护对全部模型、视图、控制器的引用的维护，还有一个launch函数，会在所有加载项加载完成之后调用。所以每次新增的view 需要在Application里引用，ext的文件查找是通过文件路径的方式搜索。
 
//定义一个model
Ext.define('App.model.Users',{
  
  
    extend: 'Ext.data.Model',
    fields:[
        {"name":"itemTypeName" },
        {"name":"itemTypeCode"},
        {"name":"parentItemTypeCode"}
    ]
})
//定义Store
Ext.define('App.store.Users', {
  
  
    extend: 'Ext.data.Store',
    //model: 'App.model.Users', // 关联相应的model
    fields: ['name', 'email'],
    data: [
        {name: 'Ed',    email: 'ed@sencha.com'},