ExtJs学习（三）~~Combox组件

Combox是一个下拉选框组件，它涉及到静态数据展示、动态数据展示两种情况，因为这个组件刚好可以用到store数据源，也是form表单中比较复杂的一个组件，特地单独拿出来讲一下。

一、理解Combobox组件

1. 查看官网文档 ~~ 在右上角的搜索栏直接搜索：combobox

2、剖析理解Combobox ~~important

【总结：】从上面官网的案例，就知道了Combobox组件怎么使用。首先它必须先有数据源，而上面的data.Store摆明了就是一个数据源，该数据源是静态数据，写法在前一篇文章，我们已经掌握了。而且你要知道：data.Store是create（创建）方式，对于这种怎么去使用它，在上一篇文章也说了吧，create可通过一个常量接受，直接使用改常量或者是给store起个storeId，通过Ext.data.StoreManager.lookup("storeId")的方式引用。

在看下半部分代码，create一个组件，create一个ComboBox全限定名，这里只能从官方文档知道这个全限定名，然后它的数据通过store属性来配置，dispalyField配置展示的key值，valueField配置combobox的value值，renderTo:是将该组件渲染到页面上。从上面的官方案例，我们就基本知道这个组件的使用方式了。所以说，看文档是很方便的。如果不知道某个属性的意思，直接查询它的config，里面有对每个属性的详细描述。

2、入门案例 ~~ 跟官网的案例很像

demo1：combobox + store静态数据，不过将上面那种写法改成这种，主要是为了给大家展示多种多样的写法

demo2 : combobox + store动态数据 ，写法跟案例一样的，但是store的数据是从后台获取的，这算是用到了前一篇的store动态数据加载的写法，案例代码都在上一篇博客里面，有兴趣可以看一下。

这里无论把store单独写，还是写在组件里面都是一样的。

 

【总结：】看到这里，你会发现原来ExtJs代码很简单，将官方的Demo拷贝一下，稍微改一下就可以了。确实是这样的。

同时呢！你也会吐槽，我也是去介绍每个组件的使用，并没有一个完整的Demo参考。其实不然，我会边介绍其他的组件的同时，会把之前已经介绍的组件融入到新的组件，慢慢形成一个完成的Demo，在完整的Demo中，你会看到增删改查的逻辑函数代码，希望要耐心一点。如果说，我一上来就给你们讲：完整的Demo如何开发，但是你们对组件一无所知，那就没有意义了。不喜欢的，可以不看 ~~~~