点滴记录ExtJS练习——Windows、ComboBox（SimpleStore）

界面：

代码：

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