CODEWITHSUNDEEP
javascriptextjsextjs3
Kliver Max
Kliver Max

Reputation: 5299

How to render something above Ext.Viewport

I have viewport:

new Ext.Viewport({
  layout:'fit',
  hideBorders:true,
  items:[panel1,panel2,panel3],
});

Now i want to show combobox above viewport:

var myCombo= new Ext.ComboBox({
  store:myStore,
  editable:false,
  renderTo:Ext.getBody(),
  triggerActions:'all',
  mode:'local',
  cls:'scales'
});

css:

.scales{
  position:absolute,
  botton:1em,
  right:1em,
  background-color:white
}

But its render in leftside. How to render its in right botton?

UPDATE

Now i put combo into Panle:

myPanel= new Ext.Panle({
items[myCombo],
renderTo:Ext.getBody(),
cls:'scales',
border:false
});

Now my combo in right-bottom. But look like this: enter image description here

Even i delete viewport code from app i get same result. can i do something with combo?

Upvotes: 0

Views: 358

Answers (2)

rixo
rixo

Reputation: 25031

You CSS is broken, that should be:

.scales{
    position: absolute; 
    bottom: 1em;
    right: 1em;
    background-color: white;
}

Notice the semicolons and bottom instead of botton.

EDIT:

You should render your combo into a window to let Ext manage positioning problematic. Here's an example that renders a minimalist window:

var win = new Ext.Window({
    closable: false
    ,resizable: false
    // uncomment to make the window draggable
    //,title: '...'
    ,border: false
    // uncomment to make the window modal
    //,modal: true
    ,items: [{
        xtype: 'combo'
        ,store: ['Foo', 'Bar', 'Baz']
    }]
});

win.show();

// then use anchorTo to position the window where you want:
win.anchorTo(Ext.getBody(), 'br-br', [10, 10]);

See the doc for anchorTo.

Upvotes: 1

Ezhil V
Ezhil V

Reputation: 882

Try

new Ext.panel.Panel({
      layout:'fit',
      items:[panel1,panel2,panel3],
});

Or put your combo inside the viewport items as:

new Ext.panel.Panel({
  layout:'fit',
  items:[panel1,panel2,panel3, combo],
});

Upvotes: 1

Related Questions