ext-ui.com

中文教程

ReExt入门指南:从零开始

ReExt是由 Sencha 开发的一个 React 库,它允许你在 React 应用中使用 Ext JS 组件。它利用你现有的 Ext JS 知识,以原生 React 语法集成数据驱动型组件。本指南将解释组件语法,提供分步设置环境的说明,并介绍高级配置选项。

React 组件库如何加速Web 开发

从头开始创建用户界面需要很长时间,而且需要重复性的工作。React UI 组件库的可用性为开发任务提供了出色的支持。这些库提供了现成的可定制 UI 元素。这既减少了工作时间,也减少了必要的工作量。您可以使用 React 组件库实现统一的界面设计,从而避免大量的手动开发。

使用React框架构建可扩展的Web应用程序的最佳实践

在当今时代,创建可扩展的 Web 应用程序与业务需求息息相关。用户数量的增加意味着应用程序更加复杂,流量和功能也将更加复杂。React 可以在这方面提供帮助。但缺点是,了解它的局限性以及如何绕过它们至关重要。

如何使用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的程序框架