Extjs 下下拉 combox使用

最新推荐文章于 2018-09-22 15:12:59 发布

开发者孙小聪

最新推荐文章于 2018-09-22 15:12:59 发布

阅读量7.8k

点赞数

分类专栏：技术文章标签： extjs layout function firefox button ie

本文链接：https://blog.csdn.net/pridescc/article/details/6953491

版权

技术专栏收录该内容

82 篇文章 0 订阅

订阅专栏

界面：

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下面显示）