PDA

View Full Version : Add combo box to layout.



njevtic
24 Feb 2009, 6:03 AM
Hi,
How do you add a combobox to a layout. It would be really helpful if someone could provide me with an example. I haven't been able to get it to work.

Thanks

tryanDLS
24 Feb 2009, 8:19 AM
Post the code you have in CODE tags.

njevtic
24 Feb 2009, 10:07 AM
i think i figured it out. it kept on telling me this.el is null and i kept on using el: "devList" but when i switched it to applyTo: 'devList' it started to work.
Do you know why?

njevtic
24 Feb 2009, 10:28 AM
well i have it displaying but my problem now is whenever i click the combo box it gets smaller.
here is the HTML.
<code>
<html>
<head>
<title>Main Layout</title>
<link rel="stylesheet" type="text/css" href="ext-2.2.1/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-2.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-2.2.1/ext-all.js"></script>

<style type="text/css">
html, body {
font:normal 12px verdana;
margin:0;
padding:0;
border:0 none;
overflow:hidden;
height:100%;
}
p {
margin:5px;
}
.settings {
background-image:url(../shared/icons/fam/folder_wrench.png);
}
.nav {
background-image:url(../shared/icons/fam/folder_go.png);
}
</style>
<script type="text/javascript" src="mainLayout.js"></script>
</head>
<body>
<div id="north">
Hey I am north.

</div>
<div id="west">
<input type="text" id="devList" size="20"/>
</div>
<div id="center2">
</div>
<div id="center1">
</div>
</body>
</html>
</code>

here is the JS.

<code>
Ext.onReady(function(){
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var exampleData = [['test','dev1', 'blah'], ['test','dev3', 'blah']];

var mystore = new Ext.data.SimpleStore({
fields: ['abbr', 'devices', 'nick'],
data : exampleData
});
var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({ // raw
region:'north',
el: 'north',
height:32 })
,
new Ext.form.ComboBox({
region:'west',
store: mystore,
displayField:'devices',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select.',
selectOnFocus:true,
applyTo: 'devList'
})
,
new Ext.TabPanel({
region:'center',
deferredRender:false,
activeTab:0,
items:[{
contentEl:'center1',
title: 'Close Me',
autoScroll:true
},{
contentEl:'center2',
title: 'Center Panel',
autoScroll:true
}]
})
]
});
});
</code>