ExtJS (4.1)创建静态数据存储

ExtJS是一种基于JavaScript的前端开发框架，它提供了丰富的UI组件和工具，用于构建交互性强、功能丰富的Web应用程序。在ExtJS 4.1版本中，可以通过创建静态数据存储来管理和展示数据。

静态数据存储是一个用于存储数据的容器，它可以在应用程序中定义和使用。通过静态数据存储，开发人员可以将数据加载到内存中，并在应用程序中进行操作和展示，而无需与后端服务器进行交互。

静态数据存储在ExtJS中的主要作用有：

数据管理：静态数据存储可以方便地管理和操作数据，包括增加、删除、修改和查询等操作。
数据展示：通过静态数据存储，可以将数据以表格、树形结构、列表等形式展示在前端页面上，提供给用户进行查看和操作。
数据筛选和排序：静态数据存储提供了丰富的筛选和排序功能，可以根据特定条件对数据进行筛选和排序，以满足不同的需求。
数据绑定：静态数据存储可以与前端组件进行数据绑定，实现数据的自动更新和同步。

在ExtJS中，可以使用Ext.data.Store类来创建静态数据存储。以下是一个示例代码：

// 创建静态数据存储
var store = Ext.create('Ext.data.Store', {
    fields: ['name', 'age', 'email'], // 定义数据字段
    data: [ // 定义数据
        { name: 'John', age: 30, email: 'john@example.com' },
        { name: 'Jane', age: 25, email: 'jane@example.com' },
        { name: 'Bob', age: 35, email: 'bob@example.com' }
    ]
});

// 使用静态数据存储展示数据
Ext.create('Ext.grid.Panel', {
    store: store, // 绑定数据存储
    columns: [
        { text: 'Name', dataIndex: 'name' },
        { text: 'Age', dataIndex: 'age' },
        { text: 'Email', dataIndex: 'email' }
    ],
    renderTo: Ext.getBody()
});

在上述示例中，通过Ext.data.Store类创建了一个静态数据存储，定义了数据字段和数据内容。然后，使用Ext.grid.Panel组件将数据存储与表格进行绑定，展示数据。

对于ExtJS开发中的静态数据存储，腾讯云提供了云开发平台（CloudBase）和云数据库（TencentDB）等相关产品，用于支持前端应用程序的开发和数据存储。您可以通过以下链接了解更多关于腾讯云相关产品的信息：

请注意，本回答仅提供了一个示例，实际应用中可能需要根据具体需求进行适当调整和扩展。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

[翻译]Ext JS 教程-类系统原

类系统

ExtJS 史上第一次进行了重整新的类系统的大重构。新的架构以ExtJS 4.X所编写的每一个类作为后盾，因此在你编写代码以前理解它是非常重要的。

这个手册主要面向任何想在ExtJS 4.x中新建或者扩展类的开发人员。它分成四个部分：

Ø 部分一：“综观”解释了稳定的类系统的需求

Ø 部分二：“命名规则”讨论给类、方法、属性、变量和文件命名的最佳实践

Ø 部分三：“动手实践”提供详细的一步步编码的例子

Ø 部分四：“错误处理&调试”提供如何处理一场的小建议和小计谋

一综观

ExtJS 4 靠超过300 多个类驱动。我们拥有一个超过20万来自世界各地，具备各种编程背景的开发人员组成的巨大社区。在一个框架的范围内，我们面对提供一个通用的编码结构的那些大挑战：

Ø 简单易上手

Ø 开发快速、调试简单、部署无忧

Ø 结构良好，可扩展可维护

JavaScript 是 classless 的面向原型的语言。天性使然，灵活是这个语言最强大的特性。使用不同的方式，不同的编码形式和技术，都可以让工作有效。然而就是那个特性，带来了不可预知的代价。没有一个统一的形式，JavaScript代码可能很难去理解、维护和重用。

从另一方面来看，基于类的编程仍然是面向对象编程领域最受欢迎的模式。基于类的语言常常需要强类型，提供封装和标准的编码规范。一般而言要让开发人员遵守一大堆规则，而编码就会变得一直可预知、可扩展和规规矩矩。然而，他们不会有在JavaScript这样的语言中发现的同样的动态能力。

每种方法都有其利弊，但是我们是否可以利用两者好处的同时避免他们的坏处呢？答案是肯定的，我们在ExtJS 4中实现了这个解决方案。

二命名规范

至始至终为你编码的类、命名空间和文件名使用一致的命名规则有助于保持你代码的组织性、结构性和可读性。

1）类

类名应该只包含字母和数字字符。数字在大多数情况下是不鼓励使用的，除非他们属于一种技术手段。不要使用下划线，连字符或者其它任何非字母非数字的字符。举个例子：

Ø MyCompany.useful_util.Debug_Toolbar 不鼓励这样命名

Ø MyCompany.util.Base64 是可以被接受的

类名应该被组成成为包，在包中合适恰当的使用对象属性点记号（.）分出命名空间。至少，应该只有唯一的顶层命名空间后面跟类名。举个例子：

MyCompany.data.CoolProxy

MyCompany.Application

顶层命名空间和真实类的命名应该采用Camel形式（单词的首字母都大写），其它所有事物都应该是小写的。举个例子：

MyCompany.form.action.AutoLoad

不是Sencha发行的类永远不应该使用Ext作为顶层命名空间的名字。

首字母缩略词也应该遵守上面列出的Camel形似命名规则。示例如下：

Ext.data.JsonProxy 而不是Ext.data.JSONProxy

MyCompany.util.HtmlParser 而不是 MyCompary.parser.HTMLParser

MyCompany.server.Http 而不是MyCompany.server.HTTP

2）源代码

类地址的名字应该直接指向文件被存储的路径。基于此，每个文件中只能有一个类，示例如下：

Ext.util.Observable 被存储在路径 /to/src/Ext/util/Observable.js 中

Ext.form.action.Submit 被存储在路径 /to/src/Ext/form/action/Submit.js中

MyCompany.chart.axis.Numeric 被存储在路径 /to/src/MyCompany/chart/axis/Numeric.js中

Path/to/src 是你的应用程序类所在的路径。所有的类都应该在这个公共的根下面，并且为了获得最好的开发、维护和部署体验，适当的赋予命名空间。

2）方法和变量

跟类名类似，方法和变量的名字应该只包含数字和字母字符。数字被允许的，但在大多数情况下是不被鼓励的

基于QT的webkit与ExtJs开发CB/S结构的企业应用管理系统

一：源起 1.何为CB/S的应用程序 C/S结构的应用程序，是客户端/服务端形式的应用程序，这种应用程序要在客户电脑上安装一个程序，客户使用这个程序与服务端通信，完成一定的操作。 B/S结构的应用程序，是浏览器/服务端形式的应用程序，这种应用程序不用在客户端部署任何东西，客户只需要通过浏览器与服务端通信，来完成一定的操作。两种类型的程序优缺点对比：对比内容 C/S结构的应用程序 B/S结构的应用程序部署较困难方便升级

Ext JS 4预览：更快、更简单、更稳定

Ext JS 4预览版：更快、更简单、更稳定上周在SanFrancisco看，在哪里，我们很激动来自全球的500多Sencha开发者（放到以前应该叫ExtJs开发者）。这个会议对于每个人都是个巨大的成功，但是对于我来说更大的精彩是下面我花一个小时为你介绍ExtJs4。当我们正处理会议的视频，我想向你介绍我们的旗舰产品ExtJS4.0下一个阶段的发展方向的最激动忍心的一些特性。令人激动的新特性让我们从一些正在添加到ExtJS4.0中令人激动的新特性开始，这虽然不是一个详尽的清单，但却包含即将到来的

[翻译]Ext JS 教程-开始使用 ExtJS 4

入门

1. 需求

1.1 网页浏览器

ExtJS 4 支持所有主流的浏览器，从IE 6 到最新的谷歌Chrome。在开发期间，我们建议你使用下面这些浏览器，以获得更好的调试体验。

Ø Google Chrome 10+

Ø Apple Safari 5+

Ø Mozilla Firefox 4+ 带Firebug Web 开发插件

本教程假设你正在使用最新的谷歌 Chrome 浏览器。如果你还没有 Chrome，花点时间去下载它吧，然后去熟悉熟悉 Chrome 的开发者工具。

1.2 Web 服务器

尽管使用 ExtJS 4 并不一定需要一个本地的web 服务器，仍然强烈建议你在开发的时候能有一个，因为 XHR 在大多数浏览器上有针对本地 file:// 的cross origin 限制。如果你还没有本地的web 服务器，建议你下载并安装 Apache HTTP Server。

Ø 了解在 Windows 上面安装 Apache

Ø 了解在 Linux 上面安装 Apache

Ø Mac OS X 已经内置了apache，你可以在 System Preference > Sharing 下面的 Web Sharing 旁找到

一旦你安装好了 Apache ，你可以通过在浏览器地址栏输入 localhost 验证它是否在运行。你会看到一个表示 Apache HTTP 服务器已经成功安装并且正常运行的开始页面。

1.3 Ext JS 4 SDK

下载 Ext JS 4 SDK，把压缩包解压到一个在你的web 根路径下新建的extjs文件夹。如果你不知道web根目录在哪儿，查阅你web服务器的相关文档。Web 根路径的位置根据你操作系统的不同而有所不同，但是如果你使用的是 Apache，你一般会在：

Ø Windows - "C:\Program Files\Apache Software Foundation\Apache2.2\htdocs"

Ø Linux - "/var/www/"

Ø Mac OS X - "/Library/WebServer/Documents/"

一旦你已经完成安装，将浏览器导航至 http://localhost/extjs/index.html 。如果一个 ExtJS 4 的欢迎页面出现了，代表你已经一切就绪了。

2. 应用程序结构

2.1 基本结构

如下所列的建议尽管不是强制的，但是可以作为最佳实践指南考虑，以保持你的应用的结构条理性、可扩展性和可维护性。下面是推荐的Ext JS 应用程序结构：

- appname

- app

- namespace

- Class1.js

- Class2.js

- ...

- extjs

- resources

- css

- images

- ...

- app.js
04

一、前端为什么要做组件化在大型软件系统中，web应用的前后端已经实现了分离，而随着REST软件架构的发展，后端服务逐步倾向于微服务，简单来说就是将一个大型后端服务，拆分成多个小服务，它们分别部署，降低了开发的复杂性，而且提高了系统的可伸缩性。而前端方面，随着技术的发展，开发的复杂度也越来越高，传统开发模式总是存在着开发效率低，维护成本高等的弊端。传统开发方式效率低以及维护成本高的主要原因在于很多时候是将一个系统做成了整块应用，而且往往随着业务的增长或者变更，系统的复杂度会呈现指数级的增长，经常出现的情

今天看到了 AngularJs 2.0 版本将基于 TypeScript 构建的消息。与同事们对 TypeScript 展开了讨论。本文记录一些个人的想法。理想的 JavaScript 开发模式其实早在 TypeScript 发布早期的时候，我就已经开始关注这个语言。因为在2012年初时，我需要为 Rafy/OEA 平台选型编写 Web 端自动界面生成框架：Rafy.js。而这个客户端框架需要基于一些流行的 JS 库来进行开发，当时选型的重点就是选择哪一个基础框架。当时，我期望能找到一种可以编写大型

什么是持久化(persistence): 持久化(persistence)：把数据保存到可掉电式存储设备中以供之后使用。保存数据: 内存中: 掉电之后,数据就没了. 磁盘中: 掉电之后,数据依然存在. 大多数情况下，特别是企业级应用，数据持久化意味着将内存中的数据保存到硬盘上加以”固化”，而持久化的实现过程大多通过各种关系数据库来完成。持久化的主要应用是将内存中的数据存储在关系型数据库中，当然也可以存储在磁盘文件、XML数据文件中。 JPA:JavaEE的规范,Java persistence api: Java的持久化API. Hibernate实现了该规范.(xml/注解)

上篇文章《用ExtJs+Linq+Wcf打造简单grid 》，这个网格控件不带分页，本文在上文的基础上添加分页功能，文中会着重介绍如何在用LINQ返回分页数据，如何使ExtJs与WCF进行Restful交互，如何在页面中添加一个带有分页功能的ExtJS的Grid控件。废话也不多说了，本文仍然是实战学习系列，没有太多理论讲解，只是作者学习中的操作流程记录而已，如果日后有机会，会逐渐的深入一些。第一步：在vs2008中创建一个支持.Net Framework 3.5，名称为：ExtJs_Wcf_Linq

ExtJS4预览：渲染过程重构和标准化

在过去的四年，ExtJs代码库已经进化了，新组件被加进来，编码标准也改进了。在这个过程中，为了重构旧组件有必要经常追溯回去以保证他们也被改进。在ExtJS4之前渲染组件没有标准的方式。在过去，Panels的展现过程是，首先创建他们需要的元素，并把他们直接添加到dom上，然后获取他们的引用。另一方面，利用按需autoEl DomHelper配置并包装对应的Html标签片段。在页面上表格经常被用作模板来构建他们的标记。 ExtJS4，我们的目标是统一这些方法为一个标准的方法，那就是XTemplate和Do

010

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

ExtJS (4.1)创建静态数据存储

一 综观

二 命名规范

1）类

2）源代码

1. 需求

1.1 网页浏览器

1.2 Web 服务器

1.3 Ext JS 4 SDK

2. 应用程序结构

2.1 基本结构

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

一综观

二命名规范