如何在EXTJS中将一个组件的隐藏属性绑定到另一个组件

在EXTJS中，可以通过使用绑定机制来将一个组件的隐藏属性绑定到另一个组件。绑定机制是EXTJS中用于实现数据和组件之间的自动更新的一种机制。

要将一个组件的隐藏属性绑定到另一个组件，可以按照以下步骤进行操作：

首先，确保你已经正确引入了EXTJS的库文件，并创建了需要的组件。
在需要隐藏的组件上设置一个隐藏属性，例如：

{
    xtype: 'panel',
    hidden: true,
    // 其他组件配置项
}

在需要绑定隐藏属性的组件上，使用绑定机制来绑定隐藏属性，例如：

{
    xtype: 'button',
    bind: {
        hidden: '{panel.hidden}'
    },
    // 其他组件配置项
}

在上述代码中，{panel.hidden}表示绑定到名为panel的组件的隐藏属性。

最后，在你的应用程序中创建一个ViewModel来管理数据和绑定，例如：

Ext.define('MyApp.view.MyViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.myviewmodel',
    data: {
        panel: {
            hidden: true
        }
    }
});

在上述代码中，panel是一个ViewModel中的数据对象，其中的hidden属性初始值为true。

将ViewModel绑定到你的视图组件上，例如：

Ext.create('MyApp.view.MyView', {
    viewModel: {
        type: 'myviewmodel'
    },
    // 其他视图组件配置项
});

通过以上步骤，你就可以将一个组件的隐藏属性绑定到另一个组件了。当隐藏属性的值发生变化时，被绑定的组件的隐藏状态也会自动更新。

在腾讯云的产品中，与EXTJS相关的产品是腾讯云Web+，它是一款支持多种前端框架的Web托管服务，可以帮助开发者快速部署和管理前端应用。你可以通过以下链接了解更多关于腾讯云Web+的信息：腾讯云Web+产品介绍。

相关·内容

[翻译]Ext JS 教程-组件原

ExtJs一(Hello World)

本文原文链接地址 http://aehyok.com/Blog/Detail/48.html

构建Vue.js组件的10个技巧

Vue.js提供了两种加载组件的方法：一种在Vue实例全局，另一种在组件级别。两种方法都有其自身的优点。

ExtJs一(Hello World)

本文原文链接地址 http://aehyok.com/Blog/Detail/48.html

ExtJS关于组件Component生命周期

初始化工作开始于组件的诞生，所有必须的配置设定、事件注册、预渲染处理等都在此时进行。

ExtJs的api文档该怎么看

之前有在ExtJS初体验中说了ExtJs给我们项目开发带来了很多便利，有童鞋在下面留言问extjs的API该怎么看？很多刚入门的童鞋被ExtJs里各种庞大的控件弄晕了，不知道怎么看api。那么这篇我就简单地说下extjs的api该怎么看。

23 个初级 Vue.js 面试题[每日前端夜话0xF0]

使用渐进式框架的代价很小，从而使现有项目（使用其他技术构建的项目）更容易采用并迁移到新框架。Vue.js 是一个渐进式框架，因为你可以逐步将其引入现有应用，而不必从头开始重写整个程序。

EXT基础

–Ext是一个Ajax框架，可以用来开发带有华丽外观的富客户端应用，使得我们的b/s应用更加具有活力及生命力，提高用户体验。

extjs结合freemarker点击按钮后加载新页面流程

其中，Ext.Ajax.request()方法是用于向后端程序发送请求的函数，可以指定请求URL、请求方法、请求参数等。在本例中，请求URL是/api/getOrderDetail，请求方法是POST，并且通过params参数传递了订单编号。当请求完成后，会调用回调函数callback，并根据请求结果进行相应的处理。

Extjs-lesson2

Ext.js 是面向对象的，因此我们需要了解一下它的语法，以便后续程序的展开。也许你一直好奇为什么使用该框架经常见到 Ext，因为框架中定义了各种类（提供了 300 多个类），不能保证与原生 js 或者其他框架没有一点冲突，因此将所有的命名封装到了 Ext 中，在此命名空间中就可以为所欲为了。就好比 JQuery 中的 $。

【网安学术】基于ExtJS的V**管理系统的设计与实现

摘要：基于ExtJS设计了一个V**管理系统，主要应用于配网安全防护系统中的主站加密装置，可实现对主站加密装置的参数配置及运行维护。由于应用要求，该管理系统需界面美观、响应迅速、用户体验佳，且稳定性强、易于维护。综合对比分析多种JS框架，采用了Ajax开发框架——ExtJS作为前端开发框架，同时服务端选用简洁轻巧的网页开发语言PHP，再结合轻量级的后台数据库，最终实现了一个高效易用的V**管理系统，实现了方便快捷地对主站加密装置进行管理及维护的目的。

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

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

ExtJS初体验

最近公司的一个系统有用到Extjs框架，对于之前完全用JQuery的js插件的我来说，对Extjs的api并不熟悉。extjs是个富客户端框架，一般用来做后台管理系统，封装了非常多的控件，很庞大，很复杂，学习门槛高。jquery是一个前后台都可以用的框架，是对js的封装，js轻量级框架。没有封装任何控件，学习曲线小，程序员和前端必须要掌握的。这两天体验了一下，如图：

Vue 3 中令人兴奋的新功能[每日前端夜话0xE2]

在上一篇文章中，我们了解了 Vue 3 将带来的性能改进。我们已经知道，用新的 Vue 3 编写的程序效果会很好，但性能并不是最重要的部分。对开发人员而言，最重要的是新版本将会怎样影响我们编写代码的方式。

React 16.3 新的生命周期和context api

一段时间以前，我们写了一篇文章有关我们即将升级我们遗留的生命周期方法，包含着我们慢慢的迁移的策略。在React 16.3.0这个版本中，为了慢慢迁移，我们增加了一些新的生命周期。我们也推荐了一些被长期期待的一些特性：一个官方的context api，一个 forwarding ref，一个ergonomic ref。

JavaWeb04-jQuery(Java真正的全栈开发)

jQuery 一.jQuery入门 1.javascript类库 JavaScript 库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互客户端页面, 并且兼容各大浏览器。核心理念是w

EXT.NET高效开发（一）——概述

之前就有想法说说这方面，直到看到我上一篇博客《EXT.NET复杂布局（一）——工作台》的回复：

React 中必会的 10 个概念

您可能知道，定义React组件的最简单方法是编写 JavaScript 函数，如以下示例所示。

微信小程序WXML页面常用语法（讲解+示例）

官方说明：WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构

VUE3快速入门——条件渲染v-if/v-show

与其他语言都一样，条件语句必不可少，vue中也是。本文将为介绍如何在Vue3中使用v-if和v-show指令实现条件渲染，v-if和v-show可以实现，在vue中改变条件，立即响应，可以用来控制元素的显示和隐藏，相比传统js简介很多。想要更多使用方式，可以到官网去查询。

Vue学习笔记之vue-cli脚手架项目中组件的使用

在webpack-simple模板中，包括webpck模板。一个.vue文件就是一个组件。

分享近百道JavaScript 基础面试题，帮助你巩固JavaScript 基础知识

null 表示有意不存在任何对象值，而 undefined 表示不存在值或未初始化的变量。

Vue2向Vue3过渡，持续记录

迁移指南：https://v3.cn.vuejs.org/guide/migration/introduction.html

Vue面试核心概念

Vue是一个MVVM（Model-View-ViewModel）模型的前端JS框架。Model本质上来说就是数据，View就是视图（即最终展现给客户的页面）。MV（从Model到View）是由数据驱动视图，而VM（从view到model）则是由视图通过事件更新数据。

Ext4.0中window窗体使用详解(常用属性)

Extjs中给一个组件命名时，id,name,hiddenName这三者的用法和区别是什么

Extjs中给一个组件命名时，id,name,hiddenName这三者的用法和区别是什么 id，name与HTML中元素的id、name相对应 hiddenName是ComboBox特有的初始化config。一般来说，下拉列表分显示值和上传值。hiddenName是用来说明哪个值是上传值。 Ext.Combobox时候用(hiddenName对应下拉的隐藏key,name对应下拉显示内容value)

Vue 3 中那些激动人心的新功能

合成（Composition）API 是 Vue 的新大版本中讨论最多的特色语法。这是一种全新的逻辑复用和代码组织方法。

web中的树形结构【小结】

最近在做一个项目，是一个b/s架构的，在项目中，用到了树形结构，即如图1所示的结构。

自己动手写UI库——引入ExtJs（布局）

第一：来看一下最终的效果第二：来看一下使用方法：第三： Component类代码如下所示： public class Component { publi

七、功能性组件与事件逻辑（IVX 快速开发教程）

由于 iVX 极度易用的特性，在 iVX 中开发微信小程序、WebApp、小游戏应用的开发流程大致相同。介绍完基础可视化组件后通过后台的服务、数据库与事件结合即可完成一个应用的开发；此篇将会介绍 iVX 功能性组件与事件，包括微信小程序、小游戏事件。

Coolite Toolkit非常棒的控件

Coolite Toolkit非常适合做web应用程序的开发，它提供了很多专业的Asp.net输入/验证/显示控件，和页面布局的框架，同时完全支持ajax，因为它是所有的组件是居于ExtJS上封装出来，让开发人员在可视化的设计器内进行方面的属性配置。

[翻译]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）方法和变量

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

JavaWeb（八）JQuery

jQuery 市场用得比较多两个框架： jQuery 比较适合做一些互联网的应用（12306.com,蘑菇街，美丽说，聚美） extjs 比较适合做后台管理系统（电商（订单管理），银行，电信）核心：主要功能：javascript开发人员查找元素、操作DOM、处理事件、执行动画和开发Ajax的操作。优势：(宗旨：write less ，do more 写更少的代码，做更多的事情) 1：轻量级（js 库非常小） 2：强大的选择器（获取页面上面的dom 元素 document.getElementByI

Extjs form 组件

1.根类 Ext.form.Basic 提供了,表单组件,字段管理,数据验证,表单提交,数据加载的功能 2.表单的容器 Ext.form.Panel 容器自动关联 Ext.form.Basic 的实例对象更方便的进行字段的配置重要属性 defaultType:"" 设置默认子项的xtype 3.数据交互和加载 Ext.form.action.Action Ext.form.action.Submit ajax方式提交 Ext.form.action.StandardSubmit 原始表单提交方法 Ext

vue和layUi对比

vue(angular,react）这些框架会负责数据和视图的绑定，数据变了，视图自动更新，视图发生事件，也会更新数据，很省事。layui(bootstrap, extjs)这类库，感觉不是框架，而是组件库，会提供一些组件（比如表格，树），只提供外观和行为，不提供和数据的绑定，数据变了，你负责刷新；视图变了，你自己获取数据。vue的界面库element ui和layui都是组件库，区别就是数据和视图是不是关联的。 layui 其实更偏向与后端开发人员使用，在服务端页面上有非常好的效果做后台框架，满足服务端程序员的需求。

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

如何在EXTJS中将一个组件的隐藏属性绑定到另一个组件

一 综观

二 命名规范

1）类

2）源代码

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

一综观

二命名规范