Combobox Dropdown Disapparing

[billtcheriyan]

Hi,

I am having a problem with combobox under ext 1.1.1. I am converting an exting select box to the ComboBox Object using 'trasform' option. When I click on the Dropdown the dropdown image is disapparing (See Attachment). And if I click any where else on the screen it comes back again.


var convertedLH = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'ddlLetterheadType',
width:135,
forceSelection:true
});

Let me know if any one had faced this problem.

[mystix]

we'll need to see your html markup + custom css if any.

i suspect you're doing a display:inline / something similar inline / in your custom css file.

[billtcheriyan]

Thanks for the response. I am putting the HTML and the styles used in that area

-----------JavaScript-------

var tabs = new Ext.TabPanel('standardTextTabs');
tabs.addTab('suggesstedText', "Suggessted Text");
tabs.addTab('serchedStdTextTab', "Search Results");
tabs.activate('suggesstedText');
var convertedLH = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'ddlLetterheadType',
width:135,
forceSelection:true
});
var notesInput = new Ext.form.TextArea({
name:'nameNotes',
grow: true,
preventScrollbars:false,
value: ''
})
notesInput.applyTo("tbxNotes");

var convertedCCList = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'ddlSendOptions',
width:135,
forceSelection:true
});
------------HTML-----------

<div id="wrContainer">

<h4>Written Response</h4>

<table>

<tr>

<td id="wrleftCol">

<label for="ddlLetterheadType" title="Letterhead">Letterhead</label>

<select id="ddlLetterheadType" tabindex="1">


<option value="Hello">LHTCS</option>

<option value="Me">LH4DTCS</option>

<option value="My Document">MyHouse</option>

</select>

<label for="tbxNotes" title="Notes">Notes</label>

<textarea id="tbxNotes" name="nameNotes" rows="4" tabindex="2"></textarea>

<div class="orangeButtonWt">

<div><input id="btnNotes" class="orangeButtonWt" type="button" value="Add Notes" /></div>

</div>

<div class="row">&nbsp;</div>

<div id="standardTextTabs" >

<div id="suggesstedTextTab" class="tab-content">

<div id="suggesstedText">


<logic:iterate id="stdText" name="stdTextList">


<a href="#" id="contentBlock<bean:writename="stdText"property="id"/>" name="S_<bean:writename="stdText"property="id"/>" class="" title="<bean:writename="stdText"property="name"/>"><strong><bean:write name="stdText" property="name"/></strong><span><bean:write name="stdText" property="content"/></span></a>


</logic:iterate>

</div>

</div>

<div id="serchedStdTextTab" class="tab-content" style="display:none;">

<div id="searchStdText">

Please click "Search Text Library" Button
</div>

</div>

</div>
<div class="orangeButtonWt">

<div><input class="orangeButtonWt" type="button" value="Search Text Library" /></div>

</div>

<p class="title">Available Images</p>

<div id="availableImages">

<logic:iterate id="stdImage" name="stdImgList">

<a href="#" id="image<bean:writename="stdImage"property="id"/>" name="I_<bean:writename="stdImage"property="id"/>" title="<bean:writename="stdImage"property="fileName"/>"><bean:write name="stdImage" property="fileName"/><span><img src="streamImage.do?imgId=<bean:writename="stdImage"property="id"/>" width="80" height="60" alt="<bean:writename="stdImage"property="fileName"/>" /></span></a>

</logic:iterate>

</div>

<label for="ddlSendOptions" title="Send Options">Copy To</label>

<select id="ddlSendOptions">


<option value="MyCCList">CCC Mangers</option>

<option value="My1t1">Directors</option>
<option value="My1t2">CEO</option>
</select>

</td>

<td id="wrRightCol" style="padding-left: 20px;">

<p id="preview" class="title">Preview</p>

<div id="previewContainer"></div>

<div class="orangeButtonWt">

<div><input id="btnGen" class="orangeButtonWt" type="button" value="Generate" /></div>

</div>

</td>

</tr>

</table>

<iframe id="myDocGenIF" src="Test.html" style="display:none;"></iframe>
</div>
--------------Style----------

/* written response */


div#wrContainer { overflow: auto; width: 100%; padding: 10px; background: url('../images/written-response-bkgd.jpg') scroll left top repeat-x; }

div#wrContainer table tr td { text-align: left; vertical-align: top; }

td#wrLeftCol, td#wrRightCol { width: 47%; }

td#wrRightCol { padding-left: 10px; }

div#wrContainer fieldset { border: none; margin: 0; padding: 0; }

div#wrContainer, div#wrContainer textarea { font-family: Arial, Helvetica, sans-serif; }

div#wrContainer h4 { font-size: 20px; margin-bottom: 10px; color: #333; clear: both; }

div#wrContainer select, div#wrContainer textarea { display: block; clear: both; }

div#wrContainer textarea { width: 100%; }

div#wrContainer div.orangeButtonWt { float: right; }


div#wrContainer p.title, div#wrContainer label { font-size: 12px; font-weight: bold; }

div#wrContainer p.title { margin: 16px 0 0 0; clear: both; }

div#wrContainer div#preview label, div#wrContainer div#previewContainer dl dt.remove label { font-size: 11px; font-weight: normal; }

div#wrContainer select#ddlLetterheadType { margin-bottom: 16px; }

div#wrContainer div#availableImages { overflow: auto; margin-bottom: 16px; }

div#wrContainer div#suggesstedText { margin: 4px 0 10px 0; width: 100%; height: 256px; overflow: auto; background-color: #ececec; padding: 0 0 10px 10px; position: relative; }

#searchStdText { margin: 4px 0 10px 0; width: 100%; height: 256px; overflow: auto; background-color: #ececec; padding: 0 0 10px 10px; position: relative; }


div#wrContainer div#suggesstedText a { display: block; width: 30%; float: left; margin: 10px 10px 10px 0; border: solid 1px #999; padding: 8px; font-size: 12px; color: #000; text-decoration: none; }

div#wrContainer div#suggesstedText a strong { font-weight: bold; }

div#wrContainer div#suggesstedText a:hover { border: solid 1px #000; background-color: #fff; }

div#wrContainer div#suggesstedText a.selected { cursor: default; }

div#wrContainer div#suggesstedText a.selected:hover { background-color: #ececec; border: solid 1px #999; }

div#wrContainer div#suggesstedText a span { display: block; clear: both; }

div#wrContainer input#btnSearchTextLibrary { float: right; }

div#wrContainer div#availableImages { width: 100%; height: 200px; overflow: auto; background-color: #ececec; padding: 10px; margin-bottom: 20px; }


div#wrContainer div#availableImages a { display: block; margin: 0 6px 12px 0; float: left; position: relative; text-decoration: none; color: #000; font-size: 11px; }

div#wrContainer div#availableImages a.selected { opacity: 1; }

div#wrContainer div#availableImages a img { display: block; clear: both; margin-top: 4px; }


div#wrContainer p#preview { margin-top: 20px; }

div#wrContainer div#previewContainer { width: 100%; overflow: auto; background-color: #ececec; padding-top: 10px; position: relative; }

div#wrContainer div#previewContainer div { clear: both; overflow: auto; width: 95%; margin-bottom: 10px; }

div#wrContainer div#previewContainer div ul { float: left; width: 16px; list-style: none; padding: 0; margin: 6px 6px 0 10px; overflow: visible; }

div#wrContainer div#previewContainer div ul li { width: 16px; height: 8px; display: block; }

div#wrContainer div#previewContainer div ul li a { cursor: pointer; }

div#wrContainer div#previewContainer div ul li a img { border: none; }


div#wrContainer div#previewContainer div { padding: 8px 0; }

div#wrContainer div#previewContainer div dl.txtSugg dt.title, div#wrContainer div#previewContainer dl.txtSugg dt.remove { float: left; }

div#wrContainer div#previewContainer div dl.txtSugg, div#wrContainer div#previewContainer div dl.imgPreview { margin: 0; padding: 0; font-size: 12px; float: left; }

div#wrContainer div#previewContainer div dl.txtSugg { margin-bottom: 4px; }


div#wrContainer div#previewContainer div dl.txtSugg dt.title { margin: 4px 16px 0 0; font-weight: bold; }

div#wrContainer div#previewContainer div dl.txtSugg dt.remove { margin-top: 0; }

div#wrContainer div#previewContainer div dl.txtSugg dd { clear: both; margin: 4px 0 0 0; }


div#wrContainer div#previewContainer div dl.imgPreview dt { float: left; margin-right: 10px; }

div#wrContainer div#previewContainer div dl.imgPreview dd.title { font-weight: bold; }

div#wrContainer div#previewContainer div dl.imgPreview dd.remove label { font-weight: normal; font-size: 11px; }

div#wrContainer input#btnGenerate { float: right; display: block; margin-top: 8px; }

[mystix]

dude, could you refrain from colouring your text?
and wrap all your html code in
tags, and js code in
tags... see the vBulletin formatting guide (http://extjs.com/forum/misc.php?do=bbcode) for more info.

noone's going to even try to read that code you posted...

[billtcheriyan]

mystix,
Thanks for the comment the problem I am facing is the actual JS file is big and same with the style sheet. And my Html is a tabbed window which uses Layouts that's the reason this is not in the format and the colouring is deu to the editor. I will try to fix is and send again.

[yonghuang]

html:


<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"/>
<script type="text/javascript" src="../../ext-all-debug.js"/>
<script type="text/javascript" src="1.js"/>
</head>

<body">
<div id="xx">
hello
<select id="sel_id">
</select>
</div>
</body>
</html>


js:

var all_pages = [[1,'10'],[2,'11'],[3,'12'],[4,'13'],[5,'14'],[6,'15'],[7,'16'],[10,'7'],[8,'8'],[9,'88']];
function createPageSelector( onselect,onchange ) {
var store=new Ext.data.SimpleStore({
fields: ['id', 'page'],
data : all_pages
});
var selector = new Ext.form.ComboBox({
fieldLabel: 'tttt',
store: store,
displayField:'page',
typeAhead: true,
mode: 'local',
transform:'sel_id',
forceSelection:true,
triggerAction: 'all',
emptyText:'Select one page...',
selectOnFocus:true,
width:80
});
if (typeof(onselect) == "function") selector.on( 'select', onselect );
if (typeof(onchange) == "function") selector.on('change',onchange);

return selector;
}

function onselect(){
}

var en= function () {
return {
init: function() {
var x=createPageSelector(onselect,onselect);
//x.applyTo('sel_id');
}
}
}();
Ext.EventManager.onDocumentReady(en.init, Enregister);

To resolve this we should append "float:left" to the element before the combobox.
the html looks like this:

<body">
<div id="xx">
<span style="position:relative;float:left;">hello</span>
<select id="sel_id">
</select>
</div>
</body>