删除顶部:50 px!在sencha popup中很重要

时间:2016-06-15 07:33:17

标签: cordova extjs sencha-touch

我是Sencha的新手,我在我的sencha应用程序中使用codepen的弹出菜单工作正常,但我需要删除顶部的问题:50 px!important在代码中生成,我需要删除。 请帮我 它看起来像我的应用程序

enter image description here

                var _loginContainer;
            var _componentName;
            var _componentIcon;
            var _comp;
            var componentPanel;

            Ext.application({

                launch: function() {

                    _loginContainer = Ext.create('Ext.Panel', {
                            fullscreen: 'true',
                      items: [
                                {
                            xtype: 'toolbar',
                            title: 'Menu Example',
                            docked: 'top',
                            items: [{
                                xtype: 'button',
                                 id: 'backBtn',
                                text: 'Menu',
                                handler: function () {
                                 var button = Ext.getCmp('backBtn');
                Ext.ux.menu.Menu.open(
                  button, // the anchor
                  [
                    { text: 'Outline View', value: 'outline' },
                    { text: 'Item 2', value: 'value2' },
                    { text: 'Item 3', value: 'value3' }
                  ],
                  function(value) { // callback (called after the menu is closed)
                    if (value === 'outline') {
                      alert('outline');
                    }
                    // The value will be 'value1', 'value2', or 'value3'.
                    // If you close the menu by tapping on the mask, it becomes null.
                  }
                );
                                }
                              }
                            ]
                                }
                            ]
                        });


            Ext.define('Ext.ux.menu.Menu', {
              extend:   'Ext.ActionSheet',
              xtype:    'menu',
              requires: [
                'Ext.ActionSheet'
              ],

              statics: {
                open: function(owner, items, callback) {
                  var menu = Ext.Viewport.add({
                    xtype:     'menu',
                    defaults:  {
                      xtype:   'button',
                      ui:      'plain',
                      handler: function(button) {
                        menu.hide();
                        callback(button.config.value);
                      }
                    },
                    items:     items,
                    listeners: {
                      hide: function() {
                        Ext.Viewport.remove(menu);
                      }
                    }
                  });
                  menu.prepare();
                  menu.showBy(owner);
                }
              },

              config: {
                cls:           Ext.baseCSSPrefix + 'popup-menu',
                hideOnMaskTap: true,
                showAnimation: {
                  type:     'fadeIn',
                  duration: 200,
                  easing:   'ease-out'
                },
                hideAnimation: {
                  type:     'fadeOut',
                  duration: 200,
                  easing:   'ease-out'
                },
                extraSidePadding: 50
              },

              prepare: function() {
                var me = this;
                var buttons = this.query('button');
                var sidePadding = this.element.getWidth() - buttons[0].element.getWidth();
                var maxWidth = 0;
                buttons.forEach(function(button) {
                  var width = me.getTextWidth(button.textElement);
                  if (width > maxWidth)
                    maxWidth = width;
                });
                this.setWidth(maxWidth + sidePadding + this.config.extraSidePadding);

                // The height of the panel is enough to show all contents by defaylt.
                // Before it is expanded automatically, I save the calculated height.
                this.setHeight(this.element.getHeight());
              },

              // Text labels in buttons are defined as <span style="display:block">text</span>
              // so I have to calculate actual width of the text with inserted elements.
              getTextWidth: function(span) {
                var leftAnchor = Ext.dom.Element.create({
                  tag:   'span',
                  style: 'display: inline !important;',
                  html:  '!'
                });
                span.insertFirst(leftAnchor);
                var rightAnchor = Ext.dom.Element.create({
                  tag:   'span',
                  style: 'display: inline !important;',
                  html:  '!'
                });
                span.append(rightAnchor);
                var left = leftAnchor.getX();
                var right = rightAnchor.getX();
                span.removeChild(leftAnchor);
                span.removeChild(rightAnchor);
                return Math.abs(right - left);
              }
            });




                }
            });

0 个答案:

没有答案