一种基于Extjs的动作栏自定义方法及系统

技术领域

本发明涉及动作栏设计领域，具体而言，涉及一种基于Extjs的动作栏自定义方法及系统。

背景技术

1995年Netscape公司发明JavaScript语言，JavaScript是一种浏览器内置的脚本语言，用于对页面元素编程产生各种效果。对象是JavaScript中的一个语法元素，每个对象由一系列键值对组成，如{key1：value1，key2：value2}。自JavaScript语言应用到浏览器以来，浏览器的功能得到了空前的增强，web页面内容变得越来越多，功能越来越复杂；与此同时，JavaScript语言也得到了极大的发展，并且为了解决web页面内容复杂导致开发进度缓慢的问题，围绕JavaScript语言涌现出了许多提高生产力的框架，Extjs就是其中一款使用简单，功能完备的优秀框架。

前端侧重于人机交互和用户体验，后端侧重于业务逻辑和大规模数据处理。理论上，面向用户的产品里，所有问题(包括产品、设计、后端、甚至看不见的问题)的表现形式，都会暴露在前端，而只有部分问题(数据问题、计算问题、安全问题等)暴露在后端，这就意味着前端起到了至关重要的承载和连接作用。前端技术的更新日新月异；前端框架的技术选型百家争鸣；视觉审美的潮流不断更替；可视化效果酷炫无比；用户的运营体系逐渐精细化；适老化、无障碍化；智能设备的升级和适配无穷无尽。所有的这一切，对前端领域就一个要求：要注重用户的体验感。

Extjs框架与目前的主流前端框架Vue对比，Ext的前端组件样式就逊色了很多，Ext的组件样式采用的是主题模式，这样显得整个页面十分的单调，且固化的组件使用让扩展变得十分的困难。对于一个直接面向用户的前端设计而言，无疑是致命的打击。例如目前Ext对列操作的动作栏只能使用图片的形式，对大多数场景而言，图片并不能很好表达出这个操作具体要干什么，需要鼠标悬浮在图片上才能显示出操作的文字信息(例如删除、修改)，直接影响到了用户的体验感。而目前需要设计出来的自定义动作栏可以解决Ext动作栏存在的缺陷，让设计者可以做出自己想要的效果，更好的维护使用者的体验感。

发明内容

为了解决上述技术问题，本发明提供了如下的技术方案：

本发明的目的之一在于提供一种基于Extjs的动作栏自定义方法，其基于Ext类装载、设计的机制设计Ext自定义的动作栏，能够提高动作栏样式的多样化，灵活创建组件并设置想要展示的自定义文字，更好的维护使用者的体验感。

本发明的目的之一在于提供一种基于Extjs的动作栏自定义系统，其基于Ext类装载、设计的机制设计Ext自定义的动作栏，能够提高动作栏样式的多样化，灵活创建组件并设置想要展示的自定义文字，更好的维护使用者的体验感。

本发明的实施例是这样实现的：

第一方面，本申请实施例提供一种基于Extjs的动作栏自定义方法，其包括如下步骤，S1、设计自定义动作栏；S2、定义需要返回的自定义html标签内容形式，并从css库中选择或者在ux-css文件中定义css样式内容；S3、进入构造方法后进入render渲染方法，判断自定义的html标签是否合规，包括以下两种情况：1)若合规，则绑定css样式，并渲染到前端页面中；2)若不合规，则判断具体的原因，然后在控制台报错给设计者，并在前端页面返回缺省值。

在本发明的一些实施例中，上述步骤S1包括以下内容，1)参照源码中创建各个组件的定义流程；2)为自定义动作栏创建构造方法，继承ActionColumn；3)获取类型为ActionTextColumn的组件的配置信息，并获取其中的项目item和长度length；4)通过父构造方法利用config对组件进行实例化；5)通过me.items＝items，其中me指需要被实例化的ActionTextColumn组件，在通过构造方法时自动赋值，设置组件中的内容；6)定义render渲染方法，为组件的返回内容创建缺省值，或者定义css样式，为后续自定义内容的样式提供选择；7)将Ext公共的、ActionTextColumn的禁用、可用的方法具体化到各个item中，暴露给使用者安全的方法。

在本发明的一些实施例中，上述步骤S1包括以下内容，将自定义动作栏的代码添加到公共的工具类文件中，通过指定xtype作为自定义的动作栏名称进行创建。

在本发明的一些实施例中，上述步骤S2包括以下内容，创建后，返回值类型默认为标签形式，输入需要展示的文字内容。

在本发明的一些实施例中，上述步骤S2包括以下内容，通过自定义返回值中的html标签修改动作栏中的样式，供在ux-css文件中自定义编写css样式。

在本发明的一些实施例中，上述步骤S3中的步骤2)包括以下内容，判断返回的内容是否存在错误，若存在则会返回缺省值，即标签+默认内容，若不存在，则返回自定义的标签内容。

第二方面，本申请实施例提供一种基于Extjs的动作栏自定义系统，其包括，动作栏自定义模块：设计自定义动作栏；标签内容自定义模块：定义需要返回的自定义html标签内容形式，并从css库中选择或者在ux-css文件中定义css样式内容；动作栏渲染模块：进入构造方法后进入render渲染方法，判断自定义的html标签是否合规，包括以下两种情况：1)若合规，则绑定css样式，并渲染到前端页面中；2)若不合规，则判断具体的原因，然后在控制台报错给设计者，并在前端页面返回缺省值。

相对于现有技术，本发明的实施例至少具有如下优点或有益效果：

本发明基于Ext的动作栏存在的缺陷衍生，在需要运用大量的表格，通过自定义动作栏类，自己编写想要返回的内容的前端样式，可以弥补Ext多个版本的动作栏上只能存放图标的缺陷，提高了系统中列表的多样性以及可拓展性，使得开发人员可以进行样式的个性化开发。相对于直接修改Ext框架的源码，本发明通过继承源码中的动作栏类实现扩展，符合开发的开闭原则。现有技术中，源码中的变量命名晦涩难懂，基本都是以单字母命名，理解起来十分的困难，而本发明将创建类的细节封装了起来，程序员不需要对源码有所了解，只需要自己编写想要的html标签的返回值即可，门槛极低，提高了开发的效率。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本发明的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1为本发明实施例1基于Extjs的动作栏自定义方法的实施流程图；

图2为本发明实施例1基于Extjs的动作栏自定义方法的设计流程图；

图3为本发明实施例2基于Extjs的动作栏自定义系统的原理图；

图4为本发明实施例3电子设备的原理图。

具体实施方式

为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本申请实施例的组件可以以各种不同的配置来布置和设计。

因此，以下对在附图中提供的本申请的实施例的详细描述并非旨在限制要求保护的本申请的范围，而是仅仅表示本申请的选定实施例。基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

在本申请的描述中，还需要说明的是，除非另有明确的规定和限定，术语“设置”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本申请中的具体含义。

下面结合附图，对本申请的一些实施方式作详细说明。在不冲突的情况下，下述的各个实施例及实施例中的各个特征可以相互组合。

实施例1

请参阅图1～图2，图1～图2所示为本申请实施例提供的基于Extjs的动作栏自定义方法的示意图。基于Extjs的动作栏自定义方法，其包括如下步骤，S1、设计自定义动作栏；S2、定义需要返回的自定义html标签内容形式，并从css库中选择或者在ux-css文件中定义css样式内容；S3、进入构造方法后进入render渲染方法，判断自定义的html标签是否合规，包括以下两种情况：1)若合规，则绑定css样式，并渲染到前端页面中；2)若不合规，则判断具体的原因，然后在控制台报错给设计者，并在前端页面返回缺省值。

本发明基于Ext的动作栏存在的缺陷衍生，在需要运用大量的表格，通过自定义动作栏类，自己编写想要返回的内容的前端样式，可以弥补Ext多个版本的动作栏上只能存放图标的缺陷，提高了系统中列表的多样性以及可拓展性，使得开发人员可以进行样式的个性化开发。相对于直接修改Ext框架的源码，本发明通过继承源码中的动作栏类实现扩展，符合开发的开闭原则。现有技术中，源码中的变量命名晦涩难懂，基本都是以单字母命名，理解起来十分的困难，而本发明将创建类的细节封装了起来，程序员不需要对源码有所了解，只需要自己编写想要的html标签的返回值即可，门槛极低，提高了开发的效率。

在本发明的一些实施例中，上述步骤S1包括以下内容，1)参照源码中创建各个组件的定义流程；2)为自定义动作栏创建构造方法，继承ActionColumn；3)获取类型为ActionTextColumn的组件的配置信息，并获取其中的项目item和长度length；4)通过父构造方法利用config对组件进行实例化；5)通过me.items＝items，其中me指需要被实例化的ActionTextColumn组件，在通过构造方法时自动赋值，设置组件中的内容；6)定义render渲染方法，为组件的返回内容创建缺省值，或者定义css样式，为后续自定义内容的样式提供选择；7)将Ext公共的、ActionTextColumn的禁用、可用的方法具体化到各个item中，暴露给使用者安全的方法。

设计自定义动作栏ActionTextColumn中，1)参照源码中的各个组件的定义流程，熟悉各个组件的创建过程；2)为ActionTextColumn创建构造方法，继承ActionColumn，此做法的目的是拿到Ext Column的通用方法，以便后续调用。3)获取类型为ActionTextColumn的组件的配置信息config，并拿到其中的项目item和长度length两个内容。4)通过Extjs6.0.2版本中callParent([config])的方法，从而通过父构造方法利用config对组件进行实例化，其中具体内部运行的细节无需了解；此时组件已经具备了工作能力。5)通过me.items＝items设置件中的内容，其中me指需要被实例化的具体ActionTextColumn组件，在通过构造方法时会自动赋值。6)定义render渲染方法，该方法会在页面被渲染时自动调用，为组件的返回内容创建缺省值，也可以定义css样式，为后续自定义内容的样式提供选择。7)将Ext公共的、ActionTextColumn的禁用、可用的方法具体化到各个item中，暴露给使用者安全的方法，这个阶段也可以根据自己的需求去定制方法。

在本发明的一些实施例中，上述步骤S1包括以下内容，将自定义动作栏的代码添加到公共的工具类文件中，通过指定xtype作为自定义的动作栏名称进行创建。在源码文件中将自定义的动作栏添加进去，为了避免Ext版本的不同造成的未知的影响，也可以将自定义动作栏的代码添加到公共的工具类文件中，在需要创建动作栏的地方，通过指定xtype为我们自定义的动作栏的名称，即可创建出来。

在本发明的一些实施例中，上述步骤S2包括以下内容，创建后，返回值类型默认为标签形式，输入需要展示的文字内容。在动作栏创建好之后，返回值类型默认标签形式，可以直接设置输入想要展示的文字内容，也可以通过自定义返回值中的html标签来修改动作栏中的样式。

在本发明的一些实施例中，上述步骤S2包括以下内容，通过自定义返回值中的html标签修改动作栏中的样式，供在ux-css文件中自定义编写css样式。对于样式有特殊要求的，可以在ux-css文件中自己编写css样式，来增加页面样式的多样性。

在本发明的一些实施例中，上述步骤S3中的步骤2)包括以下内容，判断返回的内容是否存在错误，若存在则会返回缺省值，即标签+默认内容，若不存在，则返回自定义的标签内容。自定义的动作栏还增加了试错的能力，会判断返回的内容是否存在错误，若存在例如标签格式出错、css内容找不到的错误时，则会返回缺省值，即标签+默认内容；若不存在，则返回自定义的标签内容。

实施例2

请参阅图3，图3为本申请实施例提供的基于Extjs的动作栏自定义系统的示意图。基于Extjs的动作栏自定义系统，其包括，动作栏自定义模块：设计自定义动作栏；标签内容自定义模块：定义需要返回的自定义html标签内容形式，并从css库中选择或者在ux-css文件中定义css样式内容；动作栏渲染模块：进入构造方法后进入render渲染方法，判断自定义的html标签是否合规，包括以下两种情况：1)若合规，则绑定css样式，并渲染到前端页面中；2)若不合规，则判断具体的原因，然后在控制台报错给设计者，并在前端页面返回缺省值。

本申请实施例与实施例1的原理相同，在此不做重复描述。可以理解，图3所示的结构仅为示意，基于Extjs的动作栏自定义系统还可包括比图3中所示更多或者更少的组件，或者具有与图3所示不同的配置。图3中所示的各组件可以采用硬件、软件或其组合实现。

实施例3

请参阅图4，图4为本申请实施例提供的电子设备的一种示意性结构框图。电子设备包括存储器101、处理器102和通信接口103，该存储器101、处理器102和通信接口103相互之间直接或间接地电性连接，以实现数据的传输或交互。例如，这些元件相互之间可通过一条或多条通讯总线或信号线实现电性连接。存储器101可用于存储软件程序及模块，如本申请实施例2所提供的基于Extjs的动作栏自定义系统对应的程序指令/模块，处理器102通过执行存储在存储器101内的软件程序及模块，从而执行各种功能应用以及数据处理。该通信接口103可用于与其他节点设备进行信令或数据的通信。

其中，存储器101可以是但不限于，随机存取存储器(Random Access Memory，RAM)，只读存储器(Read Only Memory，ROM)，可编程只读存储器(Programmable Read-OnlyMemory，PROM)，可擦除只读存储器(Erasable Programmable Read-Only Memory，EPROM)，电可擦除只读存储器(Electric Erasable Programmable Read-Only Memory，EEPROM)等。

处理器102可以是一种集成电路芯片，具有信号处理能力。该处理器102可以是通用处理器，包括中央处理器(Central Processing Unit，CPU)、网络处理器(NetworkProcessor，NP)等；还可以是数字信号处理器(Digital Signal Processing，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现场可编程门阵列(Field－Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。

在本申请所提供的实施例中，应该理解到，所揭露的装置和方法，也可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，附图中的流程图和框图显示了根据本申请的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

另外，在本申请各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。

所述功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

综上所述，本申请实施例提供的一种基于Extjs的动作栏自定义方法及系统：本发明基于Ext的动作栏存在的缺陷衍生，各个模块都需要运用大量的表格，通过自定义动作栏类，自己编写想要返回的内容的前端样式，可以弥补Ext多个版本的动作栏上只能存放图标的缺陷，提高了系统中列表的多样性以及可拓展性，使得开发人员可以进行样式的个性化开发。相对于直接修改Ext框架的源码，本发明通过继承源码中的动作栏类实现扩展，符合开发的开闭原则。现有技术中，源码中的变量命名晦涩难懂，基本都是以单字母命名，理解起来十分的困难，而本发明将创建类的细节封装了起来，程序员不需要对源码有所了解，只需要自己编写想要的html标签的返回值即可，门槛极低，提高了开发的效率。

以上所述仅为本申请的优选实施例而已，并不用于限制本申请，对于本领域的技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。

对于本领域技术人员而言，显然本申请不限于上述示范性实施例的细节，而且在不背离本申请的精神或基本特征的情况下，能够以其它的具体形式实现本申请。因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本申请的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化囊括在本申请内。不应将权利要求中的任何附图标记视为限制所涉及的权利要求。