admin管理员组

文章数量:1666728

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如何开发,但是你们对组件一无所知,那就没有意义了。不喜欢的,可以不看 ~~~~

 

 

本文标签: 组件ExtJsCombox