Loading [MathJax]/jax/input/TeX/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >EXTJS7 publishes将配置属性发布到viewModel

EXTJS7 publishes将配置属性发布到viewModel

作者头像

路过君

发布于 2022-04-26 07:47:24

发布于 2022-04-26 07:47:24

39100

代码可运行

举报

文章被收录于专栏：路过君BLOG from CSDN路过君BLOG from CSDN

运行总次数：0

代码可运行

在组件声明使用publishes

Ext.define('myComponent', {
	extend: 'Ext.Component',
	xtype: 'my-component',
	// 配置属性,默认不支持组件直接绑定属性
	config: {
		prop1: null,
		...
	},
	publishes: {
		// 增加此项将配置属性发布到viewModel
		prop1: true
	}
});

在组件实例使用publishes

items:[{
	xtype: 'my-component',
	reference: 'mycomponent',
	publishes: ['prop1']
}, {
	type: 'textfield',
	bind: '{mycomponent.prop1}'
}],
viewModel:{...}

使用reference后viewModel会自动生成一项data字段‘mycomponent’，并包含组件通过publishes发布的属性

注意事项

如果组件实例不存在reference属性，则publishes配置将被忽略
如果组件内部包含viewModel，reference将引用映射到组件内部的viewModel中，导致组件实例的owner.viewModel无法获取组件引用。例如：前文源码案例中如果my-component定义中包含viewModel，则会在my-component.viewModel.data中创建引用 mycomponent: {prop1=xxx}，而在外层的viewModel中不会创建引用
reference不可使用连字符 “-”，否则会导致虽然可以在viewModel中创建引用，但无法创建绑定的问题

items:[{
	xtype: 'my-component',
	reference: 'mycomponent-a',
	publishes: ['prop1']
}, {
	type: 'textfield',
	bind: '{mycomponent-a.prop1}'
}]

此例中，虽然viewModel.data中有mycomponent-a: {prop1:xxx}，但是textfield的绑定是无效的

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-07-13，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

暂无评论

编辑精选文章

换一批

万字详解高可用架构设计

Go 开发者必备：Protocol Buffers 入门指南

10分钟带你彻底搞懂分布式链路跟踪

多租户的 4 种常用方案

亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？

60页PPT全解：DeepSeek系列论文技术要点整理

EXTJS7 publishes将配置属性映射到viewModel

reference 配置

在组件声明使用publishes Ext.define('myComponent', { extend: 'Ext.Component', xtype: 'my-component', // 配置属性,默认不支持组件直接绑定属性 config: { prop1: null, ... }, publishes: { // 增加此项将配置属性映射到viewModel prop1: true }, items:[{ ... // 可以直接绑定published映射过的配置属

路过君

2020/07/15

4130

EXTJS7 config 自定义配置属性

Ext.define('myComponent', { extend: 'Ext.Component', // 自定义配置属性,会自动生成getter,setter config: { prop1: null, ... }, items:[{ xtype: 'textfield', // 属性不能直接绑定到组件配置上 bind: '{vmprop1}' }], constructor: function(config) { // 如果重载了构造函数需得要调用初始化配

路过君

2020/06/19

4530

EXTJS7 自定义组件使用element和renderTpl绘制

data element ref reference widget

注：子元素必须指定id属性和data-ref属性，并通过childEls属性暴露，才可以通过组件的对应属性获取到对象引用。

路过君

2022/04/26

2990

Extjs MVC架构 (官方文档翻译)【带源码】

json javascript

原文地址：http://docs.sencha.com/extjs/4.2.5/#!/guide/application_architecture

明明如月学长

2021/08/27

1.4K0

EXTJS7 grid 自定义单元格组件,并实现事件和属性绑定

controller viewmodel widget

1. 创建gridrow.viewModel,controller 2. 通过widgetcell.widget嵌套单元格内部组件 { xtype: 'grid', // gridrow对象配置 itemConfig: { // 添加此项则会自动创建record字段并赋值 viewModel: {text:'Verify'} // cell上定义的函数和事件绑定需在此处定义 controller: {hBtn:function(){ // 可通过vm取到record var

路过君

2020/06/19

5630

MVC的模式，模型（Models）和控制器（Controllers） Model模型是字段和它们的数据的集合，例如User模型带有username和password字段，模型知道如何持久化自己的数据，并且可以和其他模型关联，模型跟ExtJS 3 中的Record类有点像（区别是，Record只是单纯的扁平结构，而Model可以nest），通常都用在Store中去展示grid和其他组件的数据 View视图是组件的一种，专注于界面展示 - grid, tree, panel 都是view Controlle

用户1197315

2018/01/22

2.5K0

EXTJS7 实现点击拖拉选择文本

auto ls select text 源码

默认情况下，用户无法通过点击拖拉选择界面上的文本解决方案 Ext.Component组件可以使用userSelectable配置项，设置为‘text’，即可实现此组件中文本的点选注意：如果设置为true，等效于设置样式 user-select: auto; ，将根据浏览器默认属性进行选择 { xtype: 'grid', userSelectable: 'text' } 也可以传入对象设置子元素的样式 userSelectable: { element: true, // all

路过君

2020/12/17

5100

extjs 基础部分

创建对象的方法：　　　　使用new 关键字创建对象。　　　　　　new classname ([config]) 　　　　使用Ext.create方法创建。　　　　　　Ext.create(classname,[config]) 　　 new Ext.Viewport({}) 　　　　修改为Ext.create('Ext.Viewport',{}) 　　Ext.widget 或Ext.createWidget 创建对象　　　　使用Ext.ns 或者Ext.namespace 定义命名

用户1197315

2018/01/22

5.5K0

经典面试题-ext的常用panel

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

cwl_java

2019/11/20

1.2K0

Ext JS 4 架构你的应用第2节 (官方文档翻译)

json javascript 存储 mvc

原文地址：http://docs.sencha.com/extjs/4.0.7/#!/guide/mvc_pt2

明明如月学长

2021/08/27

7770

（15）打鸡儿教你Vue.js

如果我们想使父组件的数据，则必须先在子组件中定义props属性定义子组件的html模板：

达达前端

2019/07/03

9040

（15）打鸡儿教你Vue.js

ExtJs二(实现登录)

　　在上一次http://www.cnblogs.com/aehyok/archive/2013/04/17/3025957.html主要是搭建Ext环境，本次课程主要是通过Ext组件来实现登录。

aehyok

2018/09/11

2.2K0

Vue.js - 组件快速入门(上)

html vue.js javascript

组件系统是Vue.js其中一个重要的概念，它提供了一种抽象，让我们可以使用独立可复用的小组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树：

Vincent-yuan

2020/07/03

1.7K0

vue之vue组件component整理

vue.js 小程序 html

组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：

山行AI

2019/07/30

6.8K0

vue之vue组件component整理

ExtJs的api文档该怎么看

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

wblearn

2018/08/27

2K0

ExtJs的api文档该怎么看

ExtJS关于组件Component生命周期

小程序编程算法容器

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

yaohong

2019/09/11

1.2K0

Vue2.x 写法示例

注意：只在可信内容上使用 v-html，永不用在用户提交的内容上，否则会导致XSS攻击。

前端GoGoGo

2018/08/24

1.2K0

VUE 入门基础(8)

十，组件　使用组件　　注册　　　　可以通过以下这种方式创建一个Vue实例　　　　　　new Vue({ 　　　　　　　　　el: '#some-element', 　　　　　　}) 　　　　注册一个全局组件，你可以使用Vue.component(tagName,options) 　　　　　　Vue.component('my-component',{ }) 　　在父实例的模块中以自定义元素 <my-component></my-component>

用户1197315

2018/01/22

9950

Vue 2.X 文档阅读笔记一 (基础)

小程序编程算法 vue.js 数据结构渲染

当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

前端_AWhile

2019/08/29

3.6K0

【初级】个人分享Vue前端开发教程笔记

渲染打包 vue.js node.js javascript

每天学习编程，让你离梦想更新一步，感谢不负每一份热爱编程的程序员，不论知识点多么奇葩，和我一起，让那一颗四处流荡的心定下来，一直走下去，加油，2021加油！

达达前端

2021/02/04

4.9K0

相关推荐

EXTJS7 publishes将配置属性映射到viewModel

更多 >

LV.1

这个人很懒，什么都没有留下～

作者相关精选

换一批

目录

在组件声明使用publishes

在组件实例使用publishes

注意事项

加入讨论

的问答专区 >

1技术专家擅长2个领域

相关课程

一站式学习中心 >

云开发微搭低代码平台-一人构建企业级应用实战训练营

腾讯云微搭低代码

AI绘画-StableDiffusion图像生成

大模型图像创作引擎

高性能应用服务

本文部分代码块支持一键运行，欢迎体验

本文部分代码块支持一键运行，欢迎体验