1. #1
    Ext User
    Join Date
    Jul 2007
    Posts
    6
    Vote Rating
    0
    billtcheriyan is on a distinguished road

      0  

    Default Combobox Dropdown Disapparing

    Combobox Dropdown Disapparing


    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.
    Code:
    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.
    Attached Images
    Last edited by mystix; 9 Oct 2007 at 7:38 AM. Reason: use [code][/code] tags. removed useless markup

  2. #2
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    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.

  3. #3
    Ext User
    Join Date
    Jul 2007
    Posts
    6
    Vote Rating
    0
    billtcheriyan is on a distinguished road

      0  

    Default


    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; }

  4. #4
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    dude, could you refrain from colouring your text?
    and wrap all your html code in [html][/html] tags, and js code in [code][/code] tags... see the vBulletin formatting guide for more info.

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

  5. #5
    Ext User
    Join Date
    Jul 2007
    Posts
    6
    Vote Rating
    0
    billtcheriyan is on a distinguished road

      0  

    Default


    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.

  6. #6
    Ext User
    Join Date
    Sep 2007
    Posts
    1
    Vote Rating
    0
    yonghuang is on a distinguished road

      0  

    Default My solution

    My solution


    html:

    Code:
    <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:
    Code:
    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:
    Code:
    <body">
        <div id="xx">
        <span style="position:relative;float:left;">hello</span>
        <select id="sel_id">
        </select>
        </div>
    </body>

Thread Participants: 2

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi