中文教程

如何使用Ext JS模型和商店:管理数据和状态教程


Ext JS是一个流行的JavaScript框架,用于创建健壮的企业级web和移动应用程序。该框架提供了一组丰富的高性能且经过全面测试的预构建UI组件(140多个)。其中包括菜单、图标、按钮、传送带、滑块等等。此外,外部JS提供最快的JavaScript网格之一,并支持各种图表和D3可视化,使您能够构建数据丰富的应用程序。它还设计为跨浏览器兼容。这意味着你用Ext JS创建的应用程序可以在现代浏览器上无缝运行。 当使用Ext JS或任何其他框架创建web应用程序时,数据管理至关重要。它允许高效的数据存储、检索、操作和管理。在Ext JS应用程序中,数据模型和存储用于处理和管理数据。 本教程将全面介绍如何在Ext JS框架中使用模型和存储来管理数据和状态。

如何在无缝用户体验的UI组件设计中实现一致性

作为开发人员,你必须知道一致的UI内容设计的重要性。在当今世界,保持一致的UI设计是至关重要的,在这个世界上,所有其他企业都有在线业务。这种需要是因为UI组件设计会让你的用户和客户迷失方向、沮丧和困惑。假设你有一个不同按钮风格、菜单和颜色的网站。这是失去用户参与度和客户的最快方式。

在这篇博客中,我们将专注于实现一致格式化的用户界面组件。如果你是一个用户界面设计师,你不应该错过阅读本指南直到最后。我们还将探索一致的用户界面如何帮助我们获得更高的满意度。所以,让我们开始实现最佳UI组件设计的旅程。读完这篇文章。

Angular vs Ext JS:应该用哪个JavaScript框架?

选择正确的JavaScript框架有时候是个艰难的决定。随着技术的进步和项目需求变得越来越复杂,开发人员面临着一个决定,这个决定会极大地影响他们职业生涯的成功。一个这样的选择是在以下两者之间进行选择外部JS而且棱角分明。在本文中,我们将探讨在这个决策过程中影响开发人员的因素。我们将从解决Ext JS日益流行的问题开始,强调为什么许多人更喜欢Ext JS而不是Angular,然后提供一些关键的考虑因素,指导您为下一个web开发项目做出正确的选择。请继续阅读,找出两个JS框架中哪一个最符合您的目标。

常见问题202309 (FAQ)

问:哪个JavaScript框架用于Web开发?
答:一些用于Web开发的最佳JavaScript框架和JavaScript库包括Ext JS,React,Angular和Vue,它们提供定制和可重用的元素。

使用 Ext JS 框架进行 UI 开发的初学者指南

在当今的 Web 开发环境中,精心设计、视觉上吸引人、一致且功能强大的用户界面 (UI) 是每个现代 Web 应用程序的基石。事实上,它是通往用户满意度、用户参与度和保留率以及品牌忠诚度的门户。但是,创建这样的用户界面有其挑战。从创建有吸引力的设计和维护整个应用程序的设计一致性,到确保易用性、响应能力和跨浏览器兼容性,开发人员在为当今的 Web 应用程序创建 UI 时面临着无数挑战。

使用 UI 组件库设计 Web 应用程序样式的 7 个理由

如果你厌倦了花费无数时间从头开始设计和设计 Web 应用程序,或者发现维护 UI 的一致性和可扩展性具有挑战性,并且您点头同意,那么 UI 组件库就是您的最终解决方案。在本文中,我们将探讨使用 UI 组件库来设计 Web 应用程序样式的 7 个令人信服的理由。

什么是 UI 库?



UI 组件库是一种软件工具或系统,它提供了一组用于构建前端应用程序和网站的即用型组件。这些库提供了预先设计和预先构建的用户界面元素,可以快速集成到您的项目中,例如按钮、表单、菜单等。开发人员可以利用这些现成的组件来提高一致性、用户界面,并通过使用 UI 组件库加快开发过程。

ExtJS基于Modern工具包的本地化(汉化)

新项目需要从服务器下载本地化资源,如果继续使用快速模板的本地化策略就很尴尬了,绝不可能等待本地化资源全部下载后再去加载项目,得另想办法。

在研究过了《Internationalization & Localization with Sencha Ext JS》一文后,终于有思路了。

文章的思路是通过重写Ext.Component来导入本地化数据,但前提还是要先加载好本地化资源,要解决这个问题不难,在本地化资源加载完成后,使用Ext.fireEvent出发一个本地化已准备好的事件就行了,而在Ext.Component的构造函数或初始化函数内,判断本地化是否已经准备好,如果准备好,直接执行本地化操作,如果还没准备好,就监听事件等待本地化资源加载。

思路有了就可以实现了,先完成本地化资源服务类。

ExtJS 6.7 应用架构介绍(MVC/MVVM)

前言


ExtJS 提供了对 MVC 和 MVVM 架构的支持。这两种架构都致力于根据功能逻辑分割代码,又各有其长。

这个教程的目的在于讲解构成这两个架构的组件的基础知识。

什么是 MVC?


在 MVC 架构中,大部分类是 Model(模型)、View(视图)或 Controller(控制器)。用户与视图交互,视图显示模型中保存的数据,由控制器根据需要更新视图和模型来响应交互。

View 和 Model 之间通常没有直接联系,因为控制器指导着两者的更新。通常来说,在 MVC 架构中 Controller 包含了大部分的应用程序逻辑,而 View 几乎没有什么业务逻辑。 Model 则主要是数据的接口,包含着用于管理数据变化的业务逻辑。

MVC 的目标是清晰地定义应用中每个类的职能,使它们能够有效地解耦,为应用程序的测试和维护提供便利,并提高代码的复用性。

ExtJS 7抢先版

ExtJS 7.0抢先版已经发布。该版本包含了许多增强功能和令人兴奋的新功能,而其中的重点是增强现代工具包。想了解更多与此版本有关的信息,请继续往下阅读。

新加的和有更新的组件:

表单组(复选、单选按钮)可以轻松的对复选框和单选按钮集合进行分组,以支持在组级进行布局和验证.


ExtJS 6.7不能跨域上传文件的bug

因为要使用表单实现跨域上传文件,但是发现在6.7居然不行,需要自己手动去创建FormData对象来提交,这比较奇怪。经过分析源代码,终于找到了这个bug,主要代码如下:

解决Modern工具包中Ext.field.Date的提交值问题

使用Classic工具包的日期字段,在表单提交的时候,获取的是日期字段的提交值,也就是会在表单提交的时候会将值转换为与定义的格式相符的值。而在Modern工具包中,提交的值是原始值,也就是带有时区属性的日期值,如果在服务器端不进行时区转换,那么日期值就不是预想的值。

要解决Modern工具包中的这个问题,如果不想重写任何基类,就只能在提交前或在服务器端对值进行处理,这无疑增加了代码量。最简单直接的办法就是重写Ext.field.Panel的getValues方法,具体重写代码如下:

VSCode 升级 1.31.0 后,Sencha 扩展无法使用的解决办法

刚刚把 VSCode 升级到了 1.31.0,结果 Sencha 扩展 不能用了,打开项目时,左下角没有了下图的Ext JS: xx% indexed

打开 VSCode 的开发人员工具(帮助-切换开发人员工具),发现如下错误:

IntelliJ IDEA 支持ExtJS 6智能提示

第一步,首先去官网下载ExtJS源码文件。

第二步,解压源码,然后放置在任意位置。

第三步,打开IntelliJ IDEA ,点选“File-->Settings...”


ExtJS中xtype和alias的区别

今天在帮一个兄弟检查一段自定义控件的代码时觉得他对xtype以及alias的使用和ExtJS各示例代码的使用有较多的不一致,而我自己也不是很清楚使用这两个属性时的最佳方法。因此在回家后整理出了这样一篇文档。一方面用来标准化我们自己的代码,另一方面也共享给大家,毕竟对这两个属性进行详细讨论的资料几乎没有。

xtype

  首先来看看xtype的定义。在ExtJS的官方文档中是这样对它进行定义的:

  This property provides a shorter alternative to creating objects than using a full class name. Using xtype is the most common way to define component instances, especially in a container.

  也就是说,在定义一个类的时候,如果我们指定了它的xtype,那么我们就可以通过这个xtype,而不是类型的全名来创建这些类型。例如对于下面的布局声明:

ExtJS官方2019发展路线规划

概要


在过去的一年中,我们一直在倾听开发人员的需求,我们发现大多数对Sencha感兴趣的开发人员都是寻求以下方面的企业Web开发人员:

  • 全面的核心框架,具有最新的Javascript标准支持
  • 新的漂亮组件和主题,以创建漂亮的企业应用程序
  • 现代工具链,用于构建优化,高性能,通用的应用程序
  • 用于可视化构建应用程序的生产力工具,可视化地显示应用程序和IDE插件
  • 一整套框架,组件,主题和工具
  • 质量和测试工具,以创建企业级长期运行的应用程序
  • 升级到标准化Web组件的路径

很多来自开源网络或移动开发者也对Sencha产品表现出浓厚的兴趣,他们正在寻找:

  • 适用于开源框架的专业组件集 - React,Angular,Vue
  • 美观的现代组件,具有可扩展的API,布局,可视化主题和易于定制
  • 现代工具链,支持最新的Web工具和Web组件
  • 优化组件,构建混合渐进式移动应用程序(PWA)

ExtJS 6.6的新功能

简介
Sencha Ext JS 6.6已经支持NPM包和开放工具。Ext JS 6.6现在可以通过NPM包让开发人员使用已经相当熟悉的异常简单的工作流。现在,Ext JS开发人员可以是强大的开放式工具来快速生成、构建和更新Ext JS应用程序。Ext JS 6.6还带来了一些主要的增强,如新的现代工具包组件、新的美丽的可访问主题、现代工具包本地化、高级路由和几个Ext JS组件和框架的增强。

Ext JS 6.6 的亮点
Ext JS 6.6通过NPM和开放工具从根本上改变了Ext JS应用程序的生成和创建。此版本中的新功能包括:

Ext JS的NPM包:Ext JS标准和白金用户现在可以直接从Sencha的NPM存储库获取组件、主题和框架的NPM包。

ExtGen:新的开放工具,可以让你通过回答问题的方式来生成新的Ext JS应用程序,并提供了几个新的应用程序模版。

ExtBuild:新的开放工具,用来生成和分发应用程序

新的现代工具包组件:基于材料设计规范的时间字段以及时间面板组件以提供时间视图。

新的美丽的石墨主题可以让可访问性应用程序令人大吃一惊。

增强了对现代工具包的本地化支持。

高级Ext JS路由功能的增强。

增强了仪表组件,并提高了显示间隔值的能力。

使用Sencha cmd操作ExtJS 6

sencha cmd是用来创建,构建ExtJS 程序的工具。

准备
您需要安装好sencha cmd命令行工具。

创建应用程序
sencha cmd创建ExtJS的程序框架

HTML 和 ExtJS 组件(二)

当你要创建一个网页时, 经常会发现,你知道怎样用原生的html来创建,却不知道如何使用浩如烟海的ext组件来实现。本文将介绍一些使用ext组件创建html的一些技巧。

接着前面两节, 我们来开始第三节

事件 Events
让我们给组件添加一个click事件。下面这个例子是添加事件的基本方式,很容易理解:

HTML 和 ExtJS 组件(一)

你要创建一个网页时, 经常会发现,你知道怎样用原生的html来创建,却不知道如何使用浩如烟海的ext组件来实现。本文将介绍一些使用ext组件创建html的一些技巧。

简介

组件的渲染
首先让我们用一个简单的例子了解一下组件是如何渲染的:

/** The renderTo config option specifies a parent DOM element for
 *  rendering the component.
 *  For brevity it is not shown in the remaining examples.
 */  
new Ext.Component({renderTo: 'component-demo' });

ExtJs性能优化:tab的数据延迟加载

今天碰到一个问题,当点击某一行数据,显示详情时,由于详情又有四个子tab,每个子tab都是一个表格,有各种各样的请求,当点击该行数据显示详情时,所有的数据同时加载,导致页面卡顿,此时做ExtjS的性能优化是很重要的。
通过研究,了解了一下ExtJs的性能优化和前端的性能优化:
extJs性能优化:

  • 1.尽量不适用panel,而去使用基类container,因为panel是一个比较大的组件,附加了一些不必要的属性。
  • 2.在页面渲染之后,尽量不要再去修改页面,从而避免页面reflow或者repaint。
  • 3.减少要加载的东西,少加载少解析、晚加载晚解析
  • 4.不必要的情况下,不要使用事件监听,在监听store的load时间的时候,应该监听一次。
  • 5.避免组件封装