Results 1 to 7 of 7

Thread: How to remove a combobox?

  1. #1
    Sencha User
    Join Date
    Jun 2009
    Posts
    110
    Vote Rating
    0
      0  

    Default How to remove a combobox?

    Sorry for cross-posting but this forum seems to have more traffic...

    http://www.sencha.com/forum/showthre...ve-a-combo-box

    yes, I'm running ext v2.x

  2. #2
    Sencha User darthwes's Avatar
    Join Date
    Mar 2010
    Posts
    633
    Vote Rating
    -12
      0  

    Default

    show code?

  3. #3
    Sencha User
    Join Date
    Jun 2009
    Posts
    110
    Vote Rating
    0
      0  

    Default

    you're right, sorry. here we go.

    PHP Code:
     function showProject() {
      var 
    autoPop =  new Ext.form.ComboBox({
            
    xtype'combo',
            
    id'getDataNote',    
                    
    store: new Ext.data.Store({
                                    
    url'getProj.cfm?

    project='
    ,    
                          
    reader:new Ext.data.JsonReader({
                                                

    root:'results',
                                                

    fields:['projectV']},
                                                

    haveRecords
                                                
    )
                                 }),
            
    mode 'local',        
                    
    displayField'projectV',
                    
    valueField'projectV',                 
                    
    hiddenName'project',        
                    
    typeAheadtrue,
                    
    minChars2,
                    
    // queryDelay: 50,
                    
    forceSelectionfalse,                
                        
    editabletrue,
                    
    selectOnFocusfalse,
                    
    // emptyText: 'Type a few letters here to select or enter 

    new one...',
                    applyTo:'
    proj'
        });
            
        autoPop.store.load({params:{'
    project':'','namelike':true}});

    }; 
    EXT generated DIVs:

    ext-gen46
    And the above DIV contains the widget, so, for a temp solution I use style to make it invisible but I don't think it's
    a flexible and reliable solution. Advice?

    Also, is there any way to replace the remote image? it does not make any sense not to use a local copy...
    And if yes, how?

    Thanks.


    PHP Code:
    ext-gen58

    <img class="x-form-trigger x-form-arrow-trigger" src="http://extjs.com/s.gif" id="ext-

    gen59"
    />
    <
    img class="x-form-trigger x-form-arrow-trigger " src="http://extjs.com/s.gif" id="ext-

    gen47"
    /> 

  4. #4
    Sencha User darthwes's Avatar
    Join Date
    Mar 2010
    Posts
    633
    Vote Rating
    -12
      0  

    Default

    Put a card manager ontop of it? You can do container.remove(component) if you would like that effect better though I doubt that's what you're looking for.

    I see you have an applyTo property defined for your combo box, do you have a good reason for that? That will prevent you from using this code to recreate another combo box if you remove the original one since the div is now absent from the dom.

    Code:
    Ext.BLANK_IMAGE_URL = './ext/resources/images/default/s.gif';
    is the other one.

    Let me know if that helped; I hope it does.

  5. #5
    Sencha User
    Join Date
    Jun 2009
    Posts
    110
    Vote Rating
    0
      0  

    Default

    Q1
    The container approach may add complication here. Sorry I forgot to mention about the why I'm doing the following and I should have used consistent sample, for instance, the field name should be 'proj' instead of the sample 'title'.
    As you see, I use the combo to populate the field so that it's easier for a user to pick an item from it.
    And here's the reason why at the later phase I want to remove the field and ext combox for it. It's for editing, hence, we bring up the exact item, however, for some weird reason, ext added the "effects" (similar to ext-gen46) both in front and right after the input field and the one in the front block 2 letters which of course impedes usability. As a workaround, I hide this field and use a substitute.

    PHP Code:
    Initially,
    <
    input type="text" id="proj"> {the combox here}
    Later,
    the <input type="text" id="proj"is removed or made invisibleso it now looks like this
    {the combox here
    Q2
    Your solution's one liner seems elegant. Question, I'm using just 2 or 3 features of ext 2.x. (off my head), that is, the window and combox widgets. How do I apply it? Similar to initializing an ext window? Is it possible to change it from my local ext. library file? If the second option is possible I'd prefer this way.

    Thank you very much.

    Don

  6. #6
    Sencha User darthwes's Avatar
    Join Date
    Mar 2010
    Posts
    633
    Vote Rating
    -12
      0  

    Default

    OK, here's my test page. I hope this explains everything. I made a little button to click to call the event, I know you're probably not doing something that silly, but it hides and shows the combo box. Is this the desired functionality? You can point the Ext.BLANK_IMAGE_URL to any string I belive. I'm not sure what happens if it doesn't resolve, alas I point it to my local file. Ext.BLANK_IMAGE_URL exists if you're using EXT.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    		<title>Form</title>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<!-- Ext JS -->
    		<link rel="stylesheet" type="text/css" href="./ext/resources/css/ext-all.css" />
    		<link rel="stylesheet" type="text/css" href="./ext/examples/ux/css/MultiSelect.css" />
    		<script  src="./ext/adapter/ext/ext-base-debug.js"></script>
    		<script  src="./ext/ext-all-debug.js"></script>
    		<script type="text/javascript">
    // Path to the blank image should point to a valid location on your server
    Ext.BLANK_IMAGE_URL = './ext/resources/images/default/s.gif';
    Ext.onReady(function () {
    	function showProject() {
    		var autoPop = Ext.getCmp('getDataNote');
    		if (Ext.isDefined(autoPop)) {
    			console.log(autoPop, " was already here.");
    			autoPop.show();
    			return;
    		}
    
    		autoPop =  new Ext.form.ComboBox({
    			xtype: 'combo',
    			id: 'getDataNote',
    			store: new Ext.data.Store({
    				url: 'test.php',
    				reader: new Ext.data.JsonReader({
    					root: 'results',
    					fields: ['projectV']
    				})
    			}),
    			mode: 'local',
    			displayField: 'projectV',
    			valueField: 'projectV',
    			hiddenName: 'project',
    			typeAhead: true,
    			minChars: 2,
    			forceSelection: false,
    			editable: true,
    			selectOnFocus: false,
    			applyTo: 'proj',
    			listeners: {
    				change: function (that, nVal, oVal) {
    					console.log(arguments);
    					that.hide();
    				}
    			}
    		});
    		autoPop.store.load({
    			params: {
    				'project': '',
    				'namelike': true
    			}
    		});
    	}
    	var bxButton = new Ext.Button({
    		applyTo: "bx",
    		text: "Call showProject",
    		handler: function () {
    			console.log("I see you clicking up on me.");
    			showProject();
    		}
    	});
    	showProject();
    });
    	</script>
    	</head>
    	<body>
    	<table width="100%" style="background-color:blue;color:red;">
    		<tr><td>
    			<table align="center">
    			<tr><td>
    					<div id="projH">
    						<form method="GET" action="test.html">
    							<input id="proj" type="text" /> <br />
    							<input type="submit" value="Submit the form" /> <br />
    							<div id="bx"> <br/><hr/></div>
    						</form>
    					</div>
    			</td></tr>
    			</table>
    		</td></tr>
    	</table>
    	</body>
    </html>

  7. #7
    Sencha User
    Join Date
    Jun 2009
    Posts
    110
    Vote Rating
    0
      0  

    Default

    Great. Ahe, I see, I could use the following line at the start-up and it would be applicable to all sequent pages... seeing your code brings me to this thought. (Who says "seeing is believing", better, "seeing is the ultimate way of making code working...")
    Ext.BLANK_IMAGE_URL = './ext/resources/images/default/s.gif';

    And on hiding the ext combox, I could add a unique DIV and control it... not sure I'm simply incapable of
    thinking or this has something to do the cool temperature this morning, feeling good...

    Anyway, thank you a bunch.

Similar Threads

  1. Remove the cursor from a combobox
    By dolittle in forum Ext 3.x: Help & Discussion
    Replies: 8
    Last Post: 19 Jul 2011, 2:33 AM
  2. Combobox remove space during search
    By NightAvatar in forum Ext 2.x: Help & Discussion
    Replies: 27
    Last Post: 16 Mar 2009, 6:48 AM
  3. Combobox remove paging on demand...
    By Rothariger in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 21 Nov 2008, 8:06 AM
  4. How to remove 'fieldLabel' and ':' in a combobox?
    By achilliessez in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 1 Dec 2007, 9:44 PM
  5. How to remove a value from a comboBox after it has been selected?
    By francescoNemesi in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 25 Sep 2007, 9:53 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •