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
    4
    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
    4
    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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar