extJs3升级extjs4方案

ExtJS3 升级到 ExtJS4 方案 ExtJS3 升级到 ExtJS4 需要修改大量代码，主要是因为 ExtJS4 配备了一类新的系统，不向后兼容。在 ExtJS 3 里生成表的几个框架组件，ExtJS4 大多生成 div，这使得 CSS classes 将会失败。ExtJS4 已完全重新写 grid 组件，tree 也被更新，所以从版本 3 到 4 大部分的属性改变了。 在 ExtJS4 中，API 也发生了很大的变化，包括 tree、tab panel、grid、window、form、chart、data stores、border layout 等等。这些变化使得大型应用程序迁移变得非常困难。 在 ExtJS3 中，我们可以使用 Ext.extend 来定义类，而在 ExtJS4 中，我们需要使用 Ext.define 来定义类。例如，在 ExtJS3 中，我们可以使用以下代码来定义一个类： ```javascript Ext.ux.PostStore = Ext.extend(Ext.data.Store, { constructor: function(params) { // ... } }); Ext.reg('PostStore', Ext.ux.PostStore); ``` 而在 ExtJS4 中，我们需要使用以下代码来定义一个类： ```javascript Ext.define('Ext.ux.PostStore', { extend: 'Ext.data.Store', constructor: function(params) { // ... } }); ``` 可以看到，ExtJS4 需要动态类定义，这样可以访问父类和定义 store 模型。 此外，ExtJS4 也改变了 Record 的定义。例如，在 ExtJS3 中，我们可以使用以下代码来定义一个 Record： ```javascript var PostStatus = Ext.data.Record.create([ { name: 'uuid' }, { name: 'status', type: 'string' }, { name: 'done', type: 'boolean' }, { name: 'color', type: 'string' } ]); ``` 而在 ExtJS4 中，我们需要使用以下代码来定义一个 Record： ```javascript Ext.define('PostStatus', { extend: 'Ext.data.Model', fields: [ { name: 'uuid' }, { name: 'status', type: 'string' }, { name: 'done', type: 'boolean' }, { name: 'color', type: 'string' } ] }); ``` 这些变化使得我们需要重新定义 Record，以适应 ExtJS4 的新特性。 在组件创建方面，ExtJS4 也发生了很大的变化。例如，在 ExtJS3 中，我们可以使用以下代码来创建一个 TreePanel： ```javascript var ptree = new Ext.tree.TreePanel({ // ... }); ``` 而在 ExtJS4 中，我们需要使用以下代码来创建一个 TreePanel： ```javascript var ptree = Ext.create('Ext.data.TreeStore', { // ... }); ``` 可以看到，ExtJS4 使用 Ext.create 函数来创建组件类，这样可以更加方便地创建组件。 ExtJS3 升级到 ExtJS4 需要修改大量代码，需要我们重新学习和适应 ExtJS4 的新特性和变化。