`
darrenzhu
  • 浏览: 797395 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Ext.create和new

阅读更多
Ext.create provides a higher level control for instantiation throughout. It's best practice from Ext JS 4 onwards to use it over the 'new' keyword, since it's tightly coupled with Ext.Loader which makes dependency resolution much easier. During development the target class will be automatically loaded synchronously the first time it's used, which frees you from having to remember "Ext.require-ing" it before-hand.

Besides, just like Ext.require, Ext.create accepts either a class name or an alias, which makes it extremely convenient to instantiate almost everything in Ext JS 4 library by its xtype / type without having to figure out its full class name up front, for example:

Ext.create('widget.combobox'); // instead of Ext.create('Ext.form.field.ComboBox')
Ext.create('proxy.jsonp'); // instead of Ext.create('Ext.data.proxy.JsonP')


Debugging is much more easier. If you try to instantiate a nonexistent class with the 'new' keyword, it's painful to figure out quickly what's going on with "TypeError: undefined is not a function", for example, try:

new Ext.data.proxy.JsonD


instead

Ext.create('Ext.data.proxy.JsonD')


gives you:
[Ext.create] Cannot create an instance of unrecognized class name / alias: Ext.data.proxy.JsonD

We've heavily optimized it internally for the best performance possible, and extreme benchmarks prove no considerable hit on performance over thousands of objects.

Another robust feature with Ext.create that can't be simply achieve with the 'new' keyword is it enables instantiation with variable arguments. For example:
Ext.create.apply(null, ['My.ClassName', arg1, arg2, arg3, ...]);

Which is not possible with:
new My.ClassName({list of arguments must be known here});


参考:
http://www.sencha.com/forum/showthread.php?127671-Ext.create-vs-the-keyword-new
分享到:
评论

相关推荐

    Ext.form.field.ComboBox结合Java、JSON实现AutoComplete

    Ext.create('Ext.form.ComboBox', { fieldLabel: 'AutoComplete', store: { fields: ['id', 'name'], proxy: { type: 'ajax', url: 'auto_complete.jsp', // Java后端接口 reader: { type: 'json', ...

    ext4.0改变 比较完整的介绍

    5. **实例化对象的方式**:推荐使用`Ext.create`函数代替`new`关键字创建对象,如`var win = Ext.create("Ext.window.Window", {...})`。这种方式更利于依赖注入和动态加载。 6. **动态类加载**:引入了`Ext.Loader...

    Ext combo 下拉框级联

    var parentStore = Ext.create('Ext.data.Store', { /* ... */ }); var parentComboBox = Ext.create('Ext.form.field.ComboBox', { store: parentStore, displayField: 'name', valueField: 'id', listeners:...

    Ext中Ajax的应用

    var treeLoader = new Ext.tree.DWRTreeLoader({ url: 'dwr/call/plaincall/TreeManager.getTreeNodes.js' }); var tree = new Ext.tree.TreePanel({ loader: treeLoader, autoScroll: true, ...

    ExtJs中处理后台传过来的date对象显示到页面上

    var cm = new Ext.grid.ColumnModel({ columns: [ {header: '姓名', dataIndex: 'name', flex: 1}, { header: '生日', sortable: true, dataIndex: 'birthday', renderer: Ext.util.Format.dateRenderer...

    ExtJs4.0.7年月日时分秒、时分秒控件

    通过结合使用`Ext.picker.Date`和`Ext.picker.Time`,并结合适当的配置和事件处理,你可以创建出符合项目需求的日期时间选择界面。附件中的css、js和测试样例文件将有助于更好地理解和应用这些控件。

    Extjs事件和模板

    store: Ext.create('Ext.data.Store', {data: data}), itemSelector: 'div' }); Ext.getCmp('container').add(list); // 假设有一个id为'container'的容器 } }); }); ``` 综上所述,EXTJS的事件系统和模板...

    Extjs4 Grid分页与自动刷新

    首先需要创建一个`Ext.data.Store`实例,这是Extjs中用于存储和管理数据的核心对象。在创建Store时,需要设置分页参数`pageSize`以控制每页显示的数据数量,并定义模型(Model)以及数据代理(Proxy)等配置。 ```...

    Ext js Xtype

    var myButton = Ext.create('widget.button', { text: 'Click me', handler: function() { alert('Button clicked!'); } }); ``` #### Xtype检查方法 Ext JS还提供了检查Xtype的方法,如`getXType`和`isXType`...

    extjs实现下拉框多选

    var displayTpl = new Ext.XTemplate('<tpl for="."><div class="x-boundlist-item">{name}</div></tpl>'); combo.displayTpl = displayTpl; ``` 此外,为了提高用户体验,你可能希望添加清除已选值的功能。为此,...

    ExtTreePanel新增节点

    var newNode = Ext.create('Ext.data.Model', { text: '新节点', leaf: false, // 如果是父节点,设置为false iconCls: 'someIconClass' // 可选,为节点设置图标类 }); ``` 4. **插入节点** 插入新节点有两...

    ext4的MVC小例子

    this.getGoodswinview().setTitle(Ext.util.Format.date(new Date(),'Y-m-d H:i:s')); } } }); }, showWin : function(){ Ext.create('keel.view.goods.GoodsWinView').show(); } });

    extJs3升级extjs4方案

    var ptree = new Ext.tree.TreePanel({ // ... }); ``` 而在 ExtJS4 中,我们需要使用以下代码来创建一个 TreePanel: ```javascript var ptree = Ext.create('Ext.data.TreeStore', { // ... }); ``` 可以看到...

    Ext常用属性总结.doc

    var store = Ext.create('Ext.data.Store', { fields: ['name', 'email'], data : [ { name: 'Lisa', email: 'lisa@simpsons.com' }, { name: 'Bart', email: 'bart@simpsons.com' } ] }); var grid = new Ext...

    Ext Composite 应用注意

    标签中提到的“源码”和“工具”提示我们,理解`Ext Composite`的工作原理,可以通过阅读其源代码,这对于深度定制和优化性能非常有帮助。同时,利用调试工具(如Chrome DevTools)可以帮助我们更好地理解事件传播...

    ext TreeGrid分页可编辑

    me.treeStore = Ext.create('Ext.data.TreeStore', { fields: ['nid', 'id', 'name', 'sex', 'age'], proxy: { type: 'ajax', url: YZSoft.$url('YZSoft.Services.REST/BPM/Process.ashx'), extraParams: { ...

    ext的grid简易例子

    在EXT JS这个强大的JavaScript框架中,Grid组件是一个非常重要的元素,它用于展示和操作大量数据。EXT Grid提供了丰富的功能,包括排序、分页、筛选、编辑等,是Web应用中数据展示的首选工具。本教程将通过一个简单...

    Ext 实现 文件上传 进度显示

    var form = Ext.create('Ext.form.Panel', { ... items: [{ xtype: 'filefield', name: 'file', fieldLabel: '选择文件', listeners: { change: function(field, value) { // 提交文件 var formData = new ...

Global site tag (gtag.js) - Google Analytics