Extjs 下下拉 combox使用

界面:

  


MyWindowUi = Ext.extend(Ext.Window, {
            height : 150,
            width : 310,
            layout : 'column',
            title : '2011/10/20练习',
            bodyStyle : "padding-top: 20px; padding-left:10px;padding-right:10px;",
            initComponent : function() {
                Ext.applyIf(this, {
                            items : [{
                                layout : 'form',
                                columnWidth : 0.6,
                                labelWidth : 50,
                                labelAlign : 'right',
                                baseCls : "x-plain",
                                items : [{
                                    xtype : 'combo',
                                    fieldLabel : '月    份',
                                    name : 'combo',
                                    anchor : '100%',
                                    emptyText : '请选择',
                                    mode : 'local',
                                    store : new Ext.data.SimpleStore({
                                                fields : ['value', 'text'],
                                                data : [['V1', '1月'],
                                                        ['V2', '2月'],
                                                        ['V3', '3月'],
                                                        ['V4', '4月'],
                                                        ['V5', '5月'],
                                                        ['V6', '6月'],
                                                        ['V7', '7月'],
                                                        ['V8', '8月']]
                                            }),
                                    editable : false,
                                    triggerAction:'all',
                                    valueField : 'value',
                                    displayField : 'text'
                                }]
                            }, {
                                layout : 'form',
                                columnWidth : 0.4,
                                defaults : {
                                    xtype : "button",
                                    anchor : '80%'
                                },
                                baseCls : "x-plain",
                                style : 'margin-left:15px',
                                items : [{
                                            text : '确定'
                                        }, {
                                            //style : 'padding:5px 0px 5px;',
                                            style:'margin-top:5px;margin-bottom:5px;',
                                            text : '取消'
                                        }, {
                                            text : '选项(O)>>'
                                        }]
                            }]
                        });

                MyWindowUi.superclass.initComponent.call(this);
            }
        });
Ext.onReady(function() {
            Ext.QuickTips.init();
            var win = new MyWindowUi();
            win.show();
        });

 注意事项:

  1、尽可能用最少的布局做最多的事儿;

  2、尽可能用面向对象的方法编写ExtJS;

  3、注意FormPanel中baseCls : "x-plain",的妙用,可以把白色背景变为和Windows空间中间区域一个颜色;

  4、注意ComboBox中“    的妙用,如果想使两个字之间有空白,如果紧紧按空白键是不起作用的,加入 HTML空白符即可解决问题;

  5、如果想设置ComboBox的内容为只读,千万能用“readOnly:true”方式,要用“editable : false”方式,不然会导致ComboxBox的下拉按钮消失;

  6、当ComboxBox使用SimpleStore加载数据时要添加“mode : 'local'”,不然会提示该代理没有定义;

  7、当ComboxBox不添加“triggerAction:'all'”时,会出现当选中一个以后,再次点击下拉按钮不能加载全部信息;

  8、三个按钮之间的间距用“style:'margin-top:5px;margin-bottom:5px;'”来实现,能保证IE和FireFox都能显示正常,如果用“style :'padding:5px 0px 5px;'”实现,火狐下面正常,但IE下面效果消失,三个按钮会挤在一起。错误效果如下:

  

                         (IE下面显示)



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值