开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

extjs如何将参数传递到组件配置

在ExtJS中，可以通过配置项的方式将参数传递给组件。以下是一种常见的方法：

创建一个组件，并定义一个配置项，用于接收参数。例如，我们创建一个名为"myComponent"的组件，并定义一个配置项"myParam"：

Ext.define('MyApp.view.MyComponent', {
    extend: 'Ext.panel.Panel',
    xtype: 'myComponent',
    
    config: {
        myParam: null
    },
    
    // 组件初始化时执行的方法
    initComponent: function() {
        // 使用this.myParam来获取传递的参数
        console.log(this.myParam);
        
        this.callParent(arguments);
    }
});

在使用该组件的地方，通过配置项的方式传递参数。例如，我们在一个父组件中使用"myComponent"组件，并传递参数"paramValue"：

Ext.create('Ext.container.Container', {
    renderTo: Ext.getBody(),
    
    items: [{
        xtype: 'myComponent',
        myParam: 'paramValue'
    }]
});

在上述代码中，我们通过"myParam"配置项将参数"paramValue"传递给了"myComponent"组件。在"myComponent"组件的初始化方法中，可以通过"this.myParam"来获取传递的参数。

这种方式可以在组件的初始化过程中获取传递的参数，并根据参数的值进行相应的配置和处理。

相关搜索:extjs如何参数化组件 React:如何将参数传递给父组件 ReactJS将参数从同级组件传递到同级组件 React路由器:如何将参数从URL传递到组件？如何将事件从父组件传递到子组件？如何将参数从Jenkins传递到Rundeck？如何将参数从jenkins传递到selenium 如何将参数从Vue root传递到组件？如何将参数从函数组件传递到类组件如何将参数传递到其他网站？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

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

一个ExtJS 应用程序是由一个或者更多个叫做组件的窗口小部件组成的。所有的组件都是Ext.Component类的子类，它允许它们参与到自动的生命周期管理中去，包括实例化、渲染、设置尺寸和位置、还有去实例化。ExtJS提供了大范围的实用组件，而且任何组件都可以很容易的被扩展，去创建一个定制的组件。

03

Extjs mvc

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

05

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 定义命名

[翻译]Ext JS 教程-MVC架构原

大规模的客户端应用程序常常难于去编写、组织机构和维护。随着你加入更多的功能，并且投入更多的开发人员，它们渐渐趋向于失去控制。ExtJS 4 带来了一种新的不仅仅能规整你的代码组织结构，而且能限制你要编写的代码数量的应用程序架构。

01

Extjs 项目中常用的小技巧，也许你用得着(5)--设置 Ext.data.Store 传参的请求方式

1.extjs 给怎么给panel设背景色设置bodyStyle:'background:#ffc;padding:10px;', var resultsPanel = Ext.create('Ext.panel.Panel', { title: 'Results', width: 600, height: 400, renderTo: Ext.getBody(), bodyStyle: 'background:#ffc; padding:10px;', l

06

Extjs4.2+webAPI+EF实现分页以及webapi的数据传值

由于不明白分页的总数是怎么计算，不知道他的分页方式所以花费了好多功夫，现在弄出来了与大家分享下 1.首先是EF的简历，想必大家都清楚：添加-〉新建项-〉数据-〉Ado。net实体数据模型 2.就是后台数据也就是apiController，前台需要两个数据，一个是数据的总条数，第二个是要查询的分页数据所以我们要建立一个实体，用于返回数据传送，由于多个页面都使用，多以用到了泛型。代码如下： public class PageData<T> { //数据总数 public

04

Extjs 数据代理

Ext.data.proxy.Proxy 代理类的根类客户端代理： 1.LocalStorageProxy：将数据存储在localStorage中，此种方式可以持久的将数据存储在客户端要使用代理，我们首先要有一个数据模型类，我们定义一个简单的Person类： Ext.define('Person', {extend: 'Ext.data.Model', fields: ['name', 'age']}); 有了Model，我们还需要一个Store。我们可以把 Store 理解为数据仓库，它对应

06

ExtJs学习笔记(19)_复杂Form示例

Form布局在所有布局中是最为复杂，使用频度最广，同时也是最难掌握的,下面给出几个示例 1.登录UI界面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content

08

Extjs grid 组件

表格面板类Ext.grid.Panel 重要的配置参数 columns : Array 列模式(Ext.grid.column.Columnxtype: gridcolumn) 重要的配置参数 text : String 列的标题默认是"" dataIndex : String 和Model的列一一对应的 sortable : true 可以整理,可以进行分类的 field: 可编辑字典配置重要方法 getStore 返回当前页面所关联的store 重要属性 ownerCt 组件所属的 Cont

08

ExtJS4中设置tabpanel的tab高度问题

最近碰到个问题，在ExtJS中应该如何设置tabpanel的tab的高度？因为默认情况下，tab的高度太矮了，以至于tab的标题底部字都被截掉。设置了个tabpanel.minHeight = ‘500’，但是这个仅仅是设置tabpanel的高度，而不是设置tabpanel的每个tab的标题的高度。随后，又改成了minHeight:‘50’，好像效果还是不理想。　　如果只是为了每个tab的高度的话，自然tab高度依赖于tabpaenl的高度，tabpanel又依赖于外层组件的高度，如果仅仅把tabpa

08

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

05

ExtJs学习笔记(20)-利用ExtJs的Ajax与服务端WCF交互

ExtJs是一套非常不错的javascript UI库(第一次接触ExtJs的，可到官方网站http://www.extjs.com/deploy/dev/examples/samples.html看下示例。相信不少人会心动的)，不仅组件丰富，效果漂亮，而且ExtJs集成的Ajax功能可以方便的与.Net的WCF进行交互. 这里我们将演示ExtJs的FormPanel从WCF加载数据，以及如何提交数据到WCF服务端 1.首先来定义一个用于传输信息的Class（实际开发中，可以是Linq to Sq

07

sencha touch结合phonegap开发android下的文件浏览器

大家好，今天我给大家介绍一下通过两个新的html5技术sencha touch 和phonegap来开发android应用。首先，众所周知，sencha touch是结合了extjs和jquery mobile这两个javascript神器而开发的一个js库，其诞生的目的就是为了使webapp成为nativeapp，甚至使其更像nativeapp，通过html5，javascript，css能够大大地缩短开发移动应用的周期，而且html的灵活性和绚丽是java和object-c所不能媲美的。然而，想让h

05

Extjs4---Cannot read property 'addCls' of null 或者 el is null 关于tab关闭后再打开不显示或者报错

做后台管理系统时遇到的问题，关于tab关闭后再打开不显示，或者报错我在新的tabpanel中加入了一个grid，当我关闭再次打开就会报错Cannot read property 'addCls' of null，原因是我在定义grid的错误这是错误代码： Ext.define('HT.view.Grid',{ extend:'Ext.grid.Panel', title : '人员列表', width:400, height:170,

04

对于Ext.data.Store 介紹与总结,以及对以前代码的重构与优化

对于Ext.data.Store 一直不是很了解,不知道他到底是干嘛的有哪些用处,在实际开发中也由于不了解也走了不少弯路, store是一个为Ext器件提供record对象的存储容器,行为和属性都很象数据表. 　　由于刚学不是太懂,都是比葫芦画瓢,东搬西畴的去完成功能.程序思路都是自己想象的,对于rest方式的增删改查全是采用另外一种方式去实现的,最后研究发现其实,store都已经有了这些函数,根本不用自己去实现.下面看下以前所写的代码:这是model,store ,gridpanel var

05

[翻译]Ext JS 教程-ExtJS 4中的数据包（Package）

数据包（data package）是用来加载和保存你应用程序中的数据的东西，包含41个类，但是其中有三个类比所有其他类更加重要——Model，Store和Ext.data.proxy.Proxy。这些类被几乎所有的应用程序用到了，并且受到了许多其他卫星类（satellite class）的支持。

02

ExtJs学习笔记(7)_获取GridPanel选中行的详细信息

这一节，我们将学习如何获取Grid当前选中行的信息 1.xml数据源内容: <?xml version="1.0" encoding="UTF-8"?> <Data> <Items> <Tot

Ext的组件模型印象

组件模型在Ext1.x中已经引入了，但在框架中并没有得到全面的整合。2.0以后组件得到了很大的提高和改进，成为了框架的里最基础的一个类。组件对象模型为组件的创建、渲染、事件处理、状态管理和销毁提供了统一的模型。Ext内置的组件都具备以上这些特征。创建组件会将一个基础构造器连同配置传入到子类中。函数initComponent用于提供制定的构造器逻辑，只要在继承链上的某一个子类实现便可，所有的组件都遵从这种方式。此时的子类就可在initComponent中对其设置相关的属性，实现具体的功能。

[翻译]Ext JS 教程-开始使用 ExtJS 4

入门

1. 需求

1.1 网页浏览器

ExtJS 4 支持所有主流的浏览器，从IE 6 到最新的谷歌Chrome。在开发期间，我们建议你使用下面这些浏览器，以获得更好的调试体验。

Ø Google Chrome 10+

Ø Apple Safari 5+

Ø Mozilla Firefox 4+ 带Firebug Web 开发插件

本教程假设你正在使用最新的谷歌 Chrome 浏览器。如果你还没有 Chrome，花点时间去下载它吧，然后去熟悉熟悉 Chrome 的开发者工具。

1.2 Web 服务器

尽管使用 ExtJS 4 并不一定需要一个本地的web 服务器，仍然强烈建议你在开发的时候能有一个，因为 XHR 在大多数浏览器上有针对本地 file:// 的cross origin 限制。如果你还没有本地的web 服务器，建议你下载并安装 Apache HTTP Server。

Ø 了解在 Windows 上面安装 Apache

Ø 了解在 Linux 上面安装 Apache

Ø Mac OS X 已经内置了apache，你可以在 System Preference > Sharing 下面的 Web Sharing 旁找到

一旦你安装好了 Apache ，你可以通过在浏览器地址栏输入 localhost 验证它是否在运行。你会看到一个表示 Apache HTTP 服务器已经成功安装并且正常运行的开始页面。

1.3 Ext JS 4 SDK

下载 Ext JS 4 SDK，把压缩包解压到一个在你的web 根路径下新建的extjs文件夹。如果你不知道web根目录在哪儿，查阅你web服务器的相关文档。Web 根路径的位置根据你操作系统的不同而有所不同，但是如果你使用的是 Apache，你一般会在：

Ø Windows - "C:\Program Files\Apache Software Foundation\Apache2.2\htdocs"

Ø Linux - "/var/www/"

Ø Mac OS X - "/Library/WebServer/Documents/"

一旦你已经完成安装，将浏览器导航至 http://localhost/extjs/index.html 。如果一个 ExtJS 4 的欢迎页面出现了，代表你已经一切就绪了。

2. 应用程序结构

2.1 基本结构

如下所列的建议尽管不是强制的，但是可以作为最佳实践指南考虑，以保持你的应用的结构条理性、可扩展性和可维护性。下面是推荐的Ext JS 应用程序结构：

- appname

- app

- namespace

- Class1.js

- Class2.js

- ...

- extjs

- resources

- css

- images

- ...

- app.js
04

ExtJs学习笔记(21)-使用XTemplate结合WCF显示数据

个人认为，XTemplate是ExtJs中最灵活的用来显示数据的组件，有点类似aspx中的Repeater控件，显示数据的模板完全可以由用户以html方式来定制. 先给一个官方的静态示例(稍微改了下)，代码并不复杂，关键的地方，我已经注释了 <script type="text/javascript"> Ext.onReady(function() { var data = { name: 'Jack Slocum',

08

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭