PDA

View Full Version : How to remove a combobox?



don4321
19 Jun 2010, 12:35 PM
Sorry for cross-posting but this forum seems to have more traffic...

http://www.sencha.com/forum/showthread.php?102063-How-do-I-remove-a-combo-box

yes, I'm running ext v2.x

darthwes
19 Jun 2010, 12:50 PM
show code?

don4321
19 Jun 2010, 4:22 PM
you're right, sorry. here we go.



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',
typeAhead: true,
minChars: 2,
// queryDelay: 50,
forceSelection: false,
editable: true,
selectOnFocus: false,
// emptyText: 'Type a few letters here to select or enter

a 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.



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"/>

darthwes
19 Jun 2010, 6:37 PM
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.



Ext.BLANK_IMAGE_URL = './ext/resources/images/default/s.gif';

is the other one.

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

don4321
19 Jun 2010, 7:23 PM
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.


Initially,
<input type="text" id="proj"> {the combox here}
Later,
the <input type="text" id="proj"> is removed or made invisible, so 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

darthwes
19 Jun 2010, 8:23 PM
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.



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

don4321
20 Jun 2010, 5:48 AM
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.