`
darrenzhu
  • 浏览: 802534 次
  • 性别: 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 统计图 饼图 直方图 和折线图

    在ExtJS中,饼图可以通过`Ext.chart.Chart`类和`Ext.chart.series.Pie`系列配置来创建。你可以设置各个扇区的颜色、标签和值,还可以添加交互性,如点击扇区时显示详细信息。例如,你可以通过以下代码创建一个简单的...

    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.2 日期控件扩展带时分秒

    - 这个类继承自`Ext.form.field.Date`,并通过添加新的配置选项和方法来实现时间和日期的综合选择。 - **依赖组件**:`Ext.zc.form.DateTimePicker` - 此组件负责展示日期时间选择器界面,提供用户交互操作。 ###...

    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: { ...

Global site tag (gtag.js) - Google Analytics