ExtJs 4.2

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

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

  1. 环境搭建

    Ext下载, (需要注册)使用版本为4.2.0,可使用现有项目已下载文件。

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

  2. 构建项目

    使用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模型带有usernamepassword字段,模型知道如何持久化自己的数据,并且可以和其他模型关联,通常都用在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'},
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值