ExtJS5.0新手指南：双向数据绑定与自动创建视图

"ExtJs5.0学习文档，包括快速搭建项目和核心特性的介绍，重点关注双向数据绑定、autoCreateViewport、应用程序类以及视图的概念和变化。" 在深入理解ExtJs5.0的学习中，有几个关键点至关重要。首先，我们要讨论的是双向数据绑定。在ExtJs5.0中，数据绑定变得更加灵活，提供了两种方法：Eval函数和Bind函数。Eval函数主要用于单向（只读）绑定，它可以将数据呈现到界面上，但不能接收用户输入的更新。相反，Bind函数则支持双向（可更新）绑定，不仅可以显示数据，还能捕获用户的修改并同步到数据源。这种特性使得UI和模型之间的数据交互更加直观和高效。 其次，autoCreateViewport是ExtJS5的一个重要特性。它允许开发者自定义视口（viewport），即应用程序的主要界面。通过设置autoCreateViewport配置项，可以指定一个特定的容器类作为视窗。例如，在示例中，我们指定了`MyApp.view.main`作为视窗。这样，ExtJS会自动创建并附加该视图到浏览器的主窗口，确保视图与页面主体紧密相连。 接着，我们来看应用程序类（Application）。应用程序类扮演着全局变量管理者的角色，它包含了应用的命名空间、共享的stores以及其他全局资源。通过定义Application类，我们可以集中管理这些跨组件共享的元素，提高代码的可维护性和组织性。 视图（Views）是ExtJS5.0中的另一个核心概念。视图本质上是组件，继承自Ext.Component，负责展示应用程序的视觉元素。它们不包含任何业务逻辑，纯粹负责UI的呈现。在ExtJs5.0与4.x版本之间，有一个显著的变化：autoCreateViewport不再是一个简单的布尔值，而是需要指定一个具体的类名。这表示Viewport现在变成了一个容器的插件，而不是独立的容器类，减少了使用上的混淆。同时，我们可以在Main类文件中看到如控制器引用、CSS样式加载以及SASS文件的引用，这些都反映了MVVM架构下数据与视图的分离，使得数据绑定更加直接和简洁。 在MVVM结构中，数据不再直接写入视图，而是绑定到ViewModel中。例如，我们可能在MainModel.js中定义TreeStore，然后在TreePanel中只需要绑定到ViewModel的store即可。此外，Ext.getCmp或Ext.get是寻找组件的常用方法，它可以帮助我们在应用程序中动态获取并操作组件。 学习ExtJs5.0需要掌握双向数据绑定的使用、autoCreateViewport的配置、Application类的应用以及视图的设计原则。理解这些核心概念将有助于构建健壮且易于维护的Web应用程序。在实践中，不断探索和熟练运用这些特性，将能够提升开发效率，打造更优秀的用户体验。