2015年12月11日 星期五

for Extjs4 大一點的combobox下拉按鈕

一樣都是pos的單元,所以連帶combobox也要大一點
最麻煩的就是combobox旁邊的下拉鍵,怎麼做?
1.準備一個下拉要用的按鈕圖,本例是30x30
2.準備一個css class
========================================
            /*--for bigger combobox--arrow_down.png*/
            .bigTriggerArrow   {
                background-image: url('/FTW/Images/arrow_down.png') !important;
                height:30px!important;
                width:30px!important;
            }

======上述的「!important」真的是很important,省不得!!================
其中長與高,真的就是照圖的大小,別留白了
3.設定combobox的trigger css對應
================combobox==================
                                        {
                                            xtype: 'combobox',
                                            width: 155,
                                            height:32,
                                            fieldLabel: '業務人員',
                                            labelSeparator: '   ',
                                            labelWidth: 52,
                                            name: 'SO_sales',
                                            //triggerCls: 'bigTriggerArrow',
                                            triggerBaseCls: 'bigTriggerArrow',
                                            //triggerWrapCls: 'bigTriggerArrow',

                                            id: 'MainPanelTextInvoiceSEQ',
                                            allowBlank: false,
                                            queryMode: 'local',
                                            matchFieldWidth: false,
                                            store: new Ext.data.ArrayStore({
                                                fields: ['text', 'value'],
                                                data: [['李四', 'F'], ['張三', 'M']]
                                            }),
                                            valueField: 'value',
                                            displayField: 'text',
                                            listeners: {
                                                select: function (cbx, records, eOpts) {
                                                    var recOfCbx = records[0];
;

                                                }
                                            },
                                            listConfig: {
                                                width: 250,
                                                getInnerTpl: function () {
                                                    return '<h4>{value}</h4>{text}'
                                                }
                                            }
                                        }

============================================
以上

沒有留言:

張貼留言