天道酬勤,学无止境

Ext JS:xtype 有什么用?(Ext JS: what is xtype good for?)

问题

我看到 Ext JS 中有很多示例,其中不是实际创建 Ext JS 对象,而是传入具有xtype属性的对象文字。

这有什么用? 如果无论如何要创建对象,性能增益在哪里(如果这是原因)?

回答1

xtype是识别特定组件的简写方式: panel = Ext.Paneltextfield = Ext.form.TextField等。当您创建页面或表单时,您可以使用这些xtypes而不是实例化对象。 例如,

items: [{
   xtype: 'textfield',
   autoWidth: true,
   fieldLabel: 'something'
}]

此外,以这种方式创建页面允许 Ext JS 延迟渲染页面。 这就是您看到“性能提升”的地方。 Ext JS 不是在应用加载时创建大量组件,而是在用户需要查看组件时呈现它们。 如果您只有一个页面,这没什么大不了的,但是如果您利用选项卡或手风琴,许多页面最初是隐藏的,因此应用程序加载速度会更快。

此外,您可以创建和注册创建您选择的 xtype 的新组件。 Ext JS 将类似地延迟渲染您的组件。

您还可以通过 ID 检索组件。 由于您的组件(以及 Ext JS 组件)可能会提供一系列不错的行为,因此有时搜索和检索组件而不是简单的 DOM 元素或节点会很方便。

总之,xtypes 标识组件和组件是 Ext JS 的一个关键方面。

回答2

我是 Sencha/Ext JS 的新手,但我认为在这一点上,只有 UI 组件的速记定义标识符字符串的奇怪概念必须满足旧用户。

在此处查看“xtypes 列表”:http://docs.sencha.com/touch/2-0/#!/guide/components

是否有充分的理由使用类似但不完全相同的字符串标识符作为“类”名称作为速记定义标识符? 我不这么认为。

检查 Sencha touch 的一些 xtype 到类名映射的以下示例:

  • video - Ext.Video
    好的,这是有道理的 - “类”名称的小写版本
  • carousel - Ext.carousel.Carousel
    这里的模式相同
  • carouselindicator - Ext.carousel.Indicator
    嗯,好的 - 我们也会包括一个包裹
  • navigationview视图 - Ext.navigation.View
    再次在这里
  • datepicker - Ext.picker.Date
    好吧,wtf?

一些上面的xtype的论点是,它允许组件的延迟实例。 我认为这完全无关 - 允许延迟实例化的事实是 Sencha/Ext JS 支持字符串标识符的规范,而不是视图层次结构中的实例化组件。

将特定字符串映射到可能稍后实例化的特定组件是完全任意的 - 在 Sencha/Ext JS 的情况下,不幸的是愚蠢的(参见上面的示例)。

至少遵循一个合理的模式——例如,为什么 Ext.Label 不能有一个“xtype”的Label ? 太简单?

实际上,我知道为什么 - 这是因为他们制作了易于阅读的 xtype 名称 - 有许多重复的类名不起作用(Ext.Panel 和 Ext.tab.Panel),而pickerDate听起来很愚蠢。

但我仍然不喜欢它 - 这是一个奇怪的小不一致的捷径,它混淆了比它帮助更多的东西。

回答3

我和乔问了同样的问题,但我找到了答案。 如果您使用xtype ,一种方法是在同一个对象中也指定一个itemId

{ itemId: 'myObject', xtype: 'myClass' ... }

然后你可以用getComponent()找到它,如

this.getComponent('myObject');
回答4

如果你声明一个类并给它一个 xtype,你可以稍后使用Ext.ComponentQuery.query()查询它

例如:

Ext.create('MyApp.view.MyButton', {
    xtype: 'mybutton',
    .....
});

稍后在您的代码中,如果您这样做:

var buttonArray = Ext.ComponentQuery.query('mybutton');

然后buttonArray将包含该类类型的组件数组。 如果您内联创建组件,您的组件查询将更加复杂。

xtypes 的另一个优点是,如果你移动你的类(假设你在“视图”下添加另一个子目录: MyApp.view.button.MyButton ),那么你的组件查询仍然可以保持不变,因为你的 xtype 没有改变。 一旦您的项目变大,您将开始创建子目录和移动类。

回答5

xtype只是用于表示类的名称。 它是一个定义对象,在应用程序的任何部分使用时都不需要实例化。

在注册xtype ,我们只使用以下语法: Ext.reg(<xtype name>,<classname>) 。 但是,我们不会在类名中使用new关键字,因为 Component Mgr 仅在需要时才会自动创建此类的实例,例如。 响应点击等事件。

我们不需要手动获取实例,因为在注册xtype ,“组件管理器”将自动为由该xtype表示的类创建一个实例,仅当它在应用程序中的任何地方使用时,或者它只是不实例化它类如果不在其他地方使用。 组件管理器运行以下代码:

create : function(config, defaultType){
    return new types[config.xtype || defaultType](config);
}

Ext.Ready运行时, xtype不实例化类。 但是,当Ext.Ready运行时, Ext.Ready Ext.Container()将创建所有实例。 因此,对于大型应用程序来说,使用xtype可以智能地摆脱垃圾对象。

标签

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • Ext JS: what is xtype good for?
    I see there are lot's of examples in Ext JS where instead of actually creating Ext JS objects, an object literal with an xtype property is passed in. What is this good for? Where is the performance gain (if that's the reason) if the object is going to be created anyway?
  • 如何在Sencha中使用动态数据(使用URL)使旋转木马无限(How to make carousel Infinite with dynamic data(using url) in sencha)
    问题 从2天开始,我试图用所需的数据创建Infinite轮播,但无法获取。 我还尝试了Kitchen Sink(Touch Style) 。 我的主题也与触摸风格相同。 我有类别,如果我单击一个类别,则显示相关的各个单词,这是更多不同的轮播项目。 我不知道那里有多少个字。 但是我想在一个滑动视图中显示7个单词(如果我有35个,那么我需要5个视图),这是轮播项目,就像厨房水槽(触摸式)一样。 来源: http ://dev.sencha.com/deploy/touch/examples/production/touchstyle/index.html,然后单击“打扮” ,您必须展示dressess。 我只想这样显示。 我只显示了类别,但无法显示类别中的各个单词。 到目前为止,我所做的是: View / CategoryPage.js Ext.define('MyApp.view.CategoryPage', { extend: 'Ext.Container', alias: "widget.categorypage", config: { layout: 'vbox', items: [ { xtype:'globalmenu', }, { xtype: 'toolbar', //docked: 'top', cls:'roundedToolbar', title:
  • EXT JS 4 use an model association to render a grid display value
    Details I have a grid used to display invoice information. The grid is populated using the Invoice store, the Invoice store uses the Invoice model, the Invoice model has a "has one" association with the InvoiceStatus model with a primary key of 'id' and a foren key of 'invoice_status_id'. Problem I'm not sure how to make the display value of the Invoice Grid's 'Status' column use the associated models 'name' inserted of the invoice_status_id. I know I need to create a renderer to do this however I still get a null value. Both the Invoice and InvoiceStatus stors are populating with the correct
  • Navigation View Sencha Touch 2
    I have a problem with my NavigationView in Sencha Touch 2. When I push the 'back' button, then I can't navigate more than one window. I navigate using view.push() and view.pop(). view.js: Ext.define('MyApp.view.view', { extend: 'Ext.navigation.View', alias: 'widget.View', config: { id: 'nvView', items: [ { xtype: 'toolbar', docked: 'bottom', layout: { align: 'center', pack: 'center', type: 'hbox' }, items: [ { xtype: 'button', iconAlign: 'center', iconCls: 'info', iconMask: true, text: 'Ayuda' }, { xtype: 'button', iconAlign: 'center', iconCls: 'compose', iconMask: true, text: 'Guardar' }, {
  • 在 html div 中呈现 ExtJS 4+ MVC 应用程序 - 操作方法?(Rendering ExtJS 4+ MVC application in a html div - how-to?)
    问题 到目前为止,我发现的所有示例都解释了如何在“视口”中呈现 ExtJS (4.2) MVC 应用程序,换句话说,这意味着整个浏览器屏幕,并占据整个 HTML BODY。 我想在已命名的 DIV 中的现有 HTML 页面中呈现应用程序,以便我可以围绕应用程序进行 HTML 设计。 <div id="appdiv"><!-- application runs here --></div> 我见过一些带有 ExtJS 4 示例的站点,它们使用技巧通过使用 IFRAME 在页面内呈现 ExtJS 应用程序。 是否有可能避免 IFRAME? 并且,如果是,ExtJS 4.2 应用程序的骨架在 div 中呈现时会是什么样子。 注意:在 ExtJS 3 中,我通过创建一个面板作为主容器找到了解决方案,该面板在命名的 div 中呈现。 但是,4.2 版(可能还有更早的 4.x 版)建议的 MVC 应用程序方法似乎要好得多。 ---- 编辑 我已经意识到我必须为这个问题设定起点。 此示例的源代码由 ExtJS 的 CMD 命令生成,该命令生成“应用程序”框架框架。 应用程序的骨架由许多文件组成,包括引擎参考和其他参考,因此我无法在此处包含“应用程序”目录/文件夹中的所有源。 应用程序的框架可以使用 cmd 以下列方式完成: sencha -sdk /myuserroot/Sencha/Cmd/3
  • How to make carousel Infinite with dynamic data(using url) in sencha
    Since 2 days, I am trying to create Infinite carousel with desired data but could not get it. I also tried Kitchen Sink (Touch Style). My theme is also same as touch style. I have categories and If I click one category then display associated respective Words , which is more different carousel items. I don't know how many words are there. but I want to display 7 Words in one swiping view(If i have 35 then i need 5 view), which is carousel items, Just like kitchen sink(Touch style). Source: http://dev.sencha.com/deploy/touch/examples/production/touchstyle/index.html and Click Dress and you have
  • 使用EXT JS上传文件(file upload using EXT JS)
    问题 使用Ext Js创建文件上传字段的步骤 回答1 就特定步骤而言,使用ExtJS 3x支持的功能,最好的方法是使用以下模块/插件: http://dev.sencha.com/deploy/dev/examples/form/file-upload.html 核心脚本是Ext JS软件包随附的,位于您的主HTML文件(您已链接到核心Ext脚本)上的其他部分脚本的开头部分中: <script type="text/javascript" src="nameofyourextfolder/examples/ux/fileuploadfield/FileUploadField.js"></script> 遗憾的是,在Ext JS的这一元素上没有大量文档-但是对于基本功能,您可以使用以下内容创建一个带有异步上传字段的表单: myuploadform= new Ext.FormPanel({ fileUpload: true, width: 500, autoHeight: true, bodyStyle: 'padding: 10px 10px 10px 10px;', labelWidth: 50, defaults: { anchor: '95%', allowBlank: false, msgTarget: 'side' }, items:[ { xtype:
  • Need Help In Sencah Touch 2 Search List
    i have problem achieving the exact result i want in building a sencha Search List, i managed to build just a list but the actual result i want is just something like this http://docs.sencha.com/touch/2-0/#!/example/search-list i have followed the example to build something similar, but my serach is not working, hope somebody can give me a detailed answer on how to achive this. below are my codes from my controller to the last. this is my controller Ext.define('List.controller.Main', { extend: 'Ext.app.Controller', config: { refs: { main: 'mainpanel' }, control: { 'presidentlist': { disclose:
  • 在Sencah Touch 2搜索列表中需要帮助(Need Help In Sencah Touch 2 Search List)
    问题 我在建立sencha搜索列表中无法获得确切的结果,我设法只建立了一个列表,但是我想要的实际结果只是这样的http://docs.sencha.com/touch/2-0/ #!/ example / search-list我已经按照该示例构建了类似的东西,但是我的教程没有用,希望有人能给我详细的答案以实现这一目标。 以下是我从控制器到最后一个代码。 这是我的控制器Ext.define('List.controller.Main',{ config: { refs: { main: 'mainpanel' }, control: { 'presidentlist': { disclose: 'showDetail' } } }, showDetail: function(list, record) { this.getMain().push({ xtype: 'presidentdetail', title: record.fullName(), data: record.getData() }) } }); 这是我的模特 Ext.define('List.model.President', { extend: 'Ext.data.Model', config: { fields: ['firstName', 'middleInitial', 'lastName'] }
  • Ext JS: FormPanel not populating fields with JSON data
    I have a FormPanel with 3 fields and a JsonReader. Here's the setup: var goalPanel = new Ext.FormPanel({ reader: new Ext.data.JsonReader({ idProperty: 'id', root: 'items', fields: [ {name: 'referenceSales', type:'float'}, {name: 'increasePercentage', type: 'float'}, {name: 'salesGoal', type: 'float'} ] }), labelAlign: 'top', frame:true, bodyStyle:'padding:5px 5px 0', items: [{ layout:'column', items:[{ columnWidth:.33, layout: 'form', items: [{ fieldLabel: 'Reference Sales', xtype: 'numberfield', name: 'referenceSales', readOnly: true, disabled: true, anchor:'95%' }] },{ columnWidth:.33
  • 分页网格显示所有记录-Ext JS(Paging Grid displaying all records - Ext JS)
    问题 编辑 事实证明,商店不能有重复的ID。 当我删除此字段时,将显示“所有记录”-这表示网格不pageSize 我在将所有商店记录显示在网格中时遇到问题。 数据正在从JSON请求中正确返回,并且pagesingtoolbar的行为正确。 这是我的商店: var store = Ext.create('Ext.data.Store', { storeId : 'resultsetstore', autoLoad : false, model : model, pageSize : itemsPerPage, // 3 proxy: { type : 'ajaxwithpayload', //custom ajax proxy to read 'jsonData' url : 'MCApp', jsonData: searchquery, reader: { type : 'json', root : 'elements' } } }); 我在这里加载商店,并返回所有正确的结果: store.load({ params: { start: 0, limit: itemsPerPage }, callback : function(records, operation, success) { if(success) { mainresponse = operation.response
  • ExtJs:表单 isValid() 为假。 但是如何知道表单无效的原因呢?(ExtJs: Form isValid() is false. But how to know why the form is invalid?)
    问题 我正在使用一个 ExtJs 表单,其中包含一个文件上传字段。 在选择文件时,我正在调用表单的 submit() 方法。 但在提交之前,我正在检查表单是否有效或不使用form.isValid() 。 现在由于一些未知的原因,我得到 form.isValid() 为FALSE 。 但我想知道为什么表单验证失败? 我将所有其他字段保留为allowBlank: false 。 有没有办法知道(使用方法或配置属性)为什么表单验证失败以及表单中的无效字段(以及消息)是什么? 这是我的代码: var simple = Ext.create('Ext.form.Panel', { id : 'textIntConfigPanel', frame : true, bodyPadding : 1, width : '100%', layout : 'anchor', fileUpload: true, items :[{ xtype : 'panel', layout : 'column', fieldDefaults : { labelAlign : 'center', msgTarget : 'side' }, items : [{ xtype: 'fieldset', columnWidth:0.5, border: false, items:[{ xtype : 'fieldset'
  • 未捕获的 Ext.AbstractManager.register():注册重复的 id(Uncaught Ext.AbstractManager.register(): Registering duplicate id)
    问题 在下面的应用程序中,我尝试将id动态添加到生成的项目中。 我的代码工作正常,但是当我在其中添加以下两行注释行时。 它抛出错误 未捕获的 Ext.AbstractManager.register():向该管理器注册重复的 ID“73” 当我试图找出错误的来源时,我发现代码运行良好,直到执行81 id( console.log(_idGen) )。 由此可知,该错误与超出范围异常有关。 (9*9 = 81) 并且仅在 Fiddle 中,当我将 HTML 文本添加到子面板时,我开始知道它们在73 to 81 ??(而不是1 to 81 )之间,这让我感到困惑,如何? 小提琴 Ext.onReady(function(){ var _idGen = 1; var childItems = [], items = []; for (var i = 0; i < 9; i++) { childItems.length = 0; for (var j = 0; j < 9; j++) { childItems.push({ xtype: 'panel', /****************************/ id: _idGen, html: _idGen + "", /****************************/ width: 50, height: 50
  • 浏览器在登录时不记得密码(Browser does not remember password during login)
    问题 一个较早的问题提到了一种使用el config的方法,以使浏览器记住密码。 Howewer, el config在ExtJS 4.1中不再存在。 现在,我该怎么办? 回答1 我相信应该是contentEl而不是el,但我会用另一种方式。 您可以直接使用ExtJS构建整个事物。 唯一的不同是,默认情况下,将使用autocomplete = off属性创建Ext字段,因此我使用派生类来覆盖它。 Ext.define('ACField', { extend: 'Ext.form.field.Text', initComponent: function() { Ext.each(this.fieldSubTpl, function(oneTpl, idx, allItems) { if (Ext.isString(oneTpl)) { allItems[idx] = oneTpl.replace('autocomplete="off"', 'autocomplete="on"'); } }); this.callParent(arguments); } }); Ext.onReady(function() { new Ext.panel.Panel({ renderTo: Ext.getBody(), width: 300, height: 100, autoEl: { tag:
  • Extjs4 日期+时分秒组件datetimefield
    截止目前最新的Ext-4.2.1.883版本,分别提供日期组件(xtype:'datefield')和时间组件(xtype:'timefield'),却没有提供日期+时分秒组件。搜索到的牛人扩展组件代码贴下:1、新建时间选择器上的时分秒输入框类TimePickerField.js/** * 时间输入框, 三个整数框分别输入时,分,秒. * @author wangzilong * update Ext - 4.1 2012/04/27 */ Ext.define('MyApp.ux.TimePickerField', { extend: 'Ext.form.field.Base', alias: 'widget.timepicker', alternateClassName: 'Ext.form.field.TimePickerField', requires: ['Ext.form.field.Number'], // 隐藏BaseField的输入框 , hidden basefield's input inputType: 'hidden', style: 'padding:4px 0 0 0;margin-bottom:0px', /** * @cfg {String} value * initValue, format: 'H:i:s' */ value: null, /*
  • Extjs - 如何在网格列中显示组合框(Extjs - How to show combobox in Grid column)
    问题 我有一个网格面板,包括日期和组合列jsfiddle 但我不想点击显示我的组合。 我想在没有点击的情况下显示我的组合,而不是像隐藏在单元格内 和日期列一样 我认为 chage to clicksToEdit: 0但失败 plugins: [ Ext.create('Ext.grid.plugin.CellEditing', { clicksToEdit: 1 }) ] 怎么做,谢谢 回答1 在 4.2x 或更低版本中实现这一点的唯一方法是使用自定义组件,如 Skirtle 的共同列 http://skirtlesden.com/ux/component-column 这种列类型将允许您将任意组件插入到单元格中。 即将发布的 ExtJS 将有一个叫做 Gadget Grid 的东西,它将允许类似的功能。 回答2 组合框或日期选择器仅在您单击单元格后才会注入,它们在您单击之前根本不存在于网格中。 更改单元格外观的方法是使用列上的渲染器。 这样你就可以添加一个假的触发器框作为背景图像或类似的东西。 在回复您的评论时,您可以这样做: { xtype: 'gridcolumn', renderer: function(value, metaData, record, rowIndex, colIndex, store, view) { metaData.tdCls = 'fake
  • Ext TabPanel items高度宽度自适应
    写Ext的时候经常会遇到一些莫名其妙,令人感到非常神奇的问题,甚至都没办法用语言去描述它,搞的人想请教一下百度或Google都不知道该去怎么问,简直能够令人发疯。先来看张截图吧。有没有注意到里面的GridPanel很难看?因为它被它外面的那个Panel给“压迫”了,它伸展不开,呵呵。接着看看当前的JS代码。 Ext.onReady(function(){ vargrid=newExt.grid.GridPanel({ columns:[ {header:'商品编号'}, {header:'商品名称'}, {header:'商品单价'}, {header:'订购数量'}, {header:'合计'} ], store:newExt.data.JsonStore({}), bbar:newExt.PagingToolbar({}) }); varpanel=newExt.Panel({ items:[{ autoHeight:true, contentEl:'topPanel' },{ xtype:'tabpanel', activeTab:0, items:[{ title:'商品明细', items:grid },{ title:'会员资料' },{ title:'收货人信息' },{ title:'寄件人信息' },{ title:'发票信息' }] }] }) }) 
  • ExtJs: Form isValid() is false. But how to know why the form is invalid?
    I am using an ExtJs form having a file upload field in it. On selecting a file I am calling the submit() method of the form. But before submitting I am checking if the form is valid or not using form.isValid(). Now due to some unknown reasons, I am getting form.isValid() as FALSE. But I want to know why the form validation is failing? I have kept all other fields as allowBlank: false. Is there a way to know (using a method or a config property) why the form validation is failing and what the invalid fields (along with messages) in the form? Here is my code: var simple = Ext.create('Ext.form
  • 重写Sencha ExtJS标准组件功能的步骤(两个示例是Extt.tree.Panel和Ext.data.TreeStore)(Steps to overriding Sencha ExtJS standard component functionality (Ext.tree.Panel & Ext.data.TreeStore as two examples))
    问题 假设我正在扩展标准的Sencha ExtJS 4小部件/组件,并且发现了很多无法按照我想要的方式工作的东西,或者它们只是坏了,而Sencha并没有解决该问题。该组件呢。 我将使用Sencha ExtJS Ext.tree.Panel和Ext.tree.Store作为两个示例组件。 重写构造函数,配置,属性,方法和事件的最基本步骤是什么,这样我就可以查找和修复该组件的问题,而无需修改我当前正在使用的核心ExtJS 4框架JS文件? 我意识到有时框架中有太多功能,可能会忽略某个地方的配置,而没有意识到他们可以使用标准实现解决问题。 有了更多有关框架的经验,就可以纠正这一问题。 抛开这些,这些最基本的步骤是什么? 假设我们从这两个实现开始,并从最基本的角度开始。 仅供参考:我确实使用Ext.Direct服务器端堆栈轻松地工作了这两个组件的核心功能,并且可以通过IE与Sencha ExtJS Ext.tree.Panel组件一起解释所有与跨浏览器兼容的问题, Mozilla Firefox和Google Chrome,但我可能会花太多时间问其他问题。 我并不是说IE首先是定型的,因为所有这些浏览器都存在Ext.tree.Panel组件的问题。 我宁愿在这里学习如何钓鱼,这样我就能钓到自己的鱼。 一旦我更好地理解了这些与树相关的类,我将提出更具体的问题。 http://docs
  • Sencha Touch 2.1:表单面板键盘隐藏 Android 上的活动文本字段(Sencha Touch 2.1: Form Panel Keyboard hides active Textfield on Android)
    问题 当我点击屏幕底部的文本字段时,键盘会出现并隐藏活动元素。 在 iOS 上,它运行完美。 我能够滚动表单,因此文本字段位于可见区域中,但这一点都不好看。 我做错了什么还是这是一个已知的错误,因为我在这个来自 Sencha Touch 的例子中也有相同的行为:docs.sencha.com/touch/2-1/touch-build/examples/forms/ 如果在这个表格上: 我点击“Bio”的文本字段,键盘隐藏文本字段,而不是向上滚动文本字段以使其在键入时可见: 回答1 这绝对是一个已知问题,我在 Android 上见过很多次了。 您唯一可以尝试做的就是监听输入字段上的焦点事件,然后滚动到元素。 您可能需要使用最适合您情况的正确Y值。 { xtype: 'textareafield', name: 'bio', label: 'Bio', maxRows: 10, listeners: { focus: function(comp, e, eopts) { var ost = comp.element.dom.offsetTop; this.getParent().getParent().getScrollable().getScroller().scrollTo(0, ost); } } }, 这对我有用。 如果您需要任何帮助来实现这一点,请告诉我! 回答2