Extjs-ComboBox和FormPanel的使用

posted by David Chen at April 21, 2008, 1:21 AM

ComboBox就是单选的下拉框，带自动完成的功能，还可以基于ajax来动态加载数据，下面的例子就是基于ajax来
动态取得数据，注意，数据的获得要通过Store来实现。
var store = new Ext.data.SimpleStore({
        fields: ['abbr', 'state', 'nick'],
        data : [
        ['AL', 'Alabama', 'The Heart of Dixie'],
        ['AK', 'Alaska', 'The Land of the Midnight Sun'],
        ['IN', 'Indiana', 'The Hospitality State']
        ]
}); // 用于填充combobox的下拉数据,可以用 Store实现ajax动态取得下拉框的数据.
var combo = new Ext.form.ComboBox({
        id: 'pageCombo'
        store: store, // 下拉数据
        tpl: '<tpl for="."><div ext:qtip="{state}. {nick}" class="x-combo-list-item">{state}</div></tpl>',
        // 提示信息
        displayField:'state', //显示上面的fields中的state列的内容,相当于option的text值
        valueField: 'abbr', // 选项的值, 相当于option的value值
        name: 'content',
        mode: 'local', // 必须要,如果为 remote, 则会用ajax获取数据
        triggerAction: 'all', // 点击下拉的时候, all 为展出所有Store中data的数据
        readOnly: true, // 如果设为true,则好像一般的下拉框一样，默认是false,可输入并自动匹配
        emptyText:'Select a state...',
        selectOnFocus:true,
        hiddenName: 'comBoValue', // 如果有form提交,这个值一定要设置,不然记下选了那个值
        // 生成一个hidden的input,用于存放选中的值, 因为ComboBox是用div和input模拟的，form.submit后取得的是input的值.
});
Ext.getCmp('pageCombo').addListener('change', function(box, newv, oldv) {
       alert(newv);
    });
// 给ComboBox添加监听事件,change事件相当于select的onchange事件


FormPanel看其名就知是定义一个form了
<div id='dp' style='width: 120px; height: 30px;'></div>
Ext.onReady(function(){
        Ext.form.Field.prototype.msgTarget = 'side';
        // 这个设置会使field在allowBlank==false时提示field的emptyText
        var myForm = new Ext.form.FormPanel({
                // 可用属性包括了 BasicForm 的属性
                width: 500,
                method: 'post',
                title: '',
                header: false, // 不创建标题栏
                headerAsText: false, // 如果有标题栏, 隐藏标题栏
                onSubmit: Ext.emptyFn,
                submit: function() {
                    this.getForm().getEl().dom.submit(); // 提交form
                }
        });
        myForm.add(combo);
        myForm.render('dp'); // 在div中添加这个form
}