Develop Reference

how to remove all options from a dijit/form/select?

I use a very simple dijit/form/select on my webppage
I add few options by code like this :
option1 = { value: "o1", label: "option 1", selected: false };
option2 = { value: "o2", label: "option 2", selected: true };
this.mySelect.addOption([option1, option2]);
It's working.
However when I try to clear my dijit/form/select using this code :
this.mySelect.removeOption(this.mySelect.getOption());
All my options are gone except the selected one.
I try using a .reset or even a .value = '' but nothing worked.
So how to remove all options from a dijit/form/select ?

Actually the answer is pretty simple, but not well docummented (it's pretty hard to find, like all dojo related stuff)
this.mySelect.removeOption(lang.clone(option1));
this.mySelect.removeOption(lang.clone(option2));
this.mySelect.store = null;
this.mySelect.set('value', '');
this.mySelect._setDisplay(""); //This line alone should do the trick
As in the comments, the last line should do the trick, but this way you can be sure that the select element gets cleared.
Demo: JSFiddle demo

Extjs 6.2.0 modern filefield as button

I am trying to create a filefield as a button with an icon. It seems in the documentation that this is not supported in modern 6.2.0. Is there a way?
Link to Docs: http://docs.sencha.com/extjs/6.2.0/modern/Ext.field.File.html
There also doesn't seem to be a way to change the text in the default button or text accompanying it.

there is a good solution for that:
{
xtype : 'button',
text : 'add a file',
handler : 'onAddFile'
},
and then in the controller:
onAddfile: function() {
var me = this;
var fileupload = Ext.create('Ext.form.Panel', {
// renderTo: Ext.getBody(),
title : 'Upload Panel',
height : 0,
width : 0,
items : [ {
xtype : 'filefield',
label : 'any thing',
accept: 'application/zip',//or mediatypes that you want
multiple : false,//or true if you need
controller : me,
listeners : {
change : function(field) {
me.fileSelected(field);
}
}
} ]
});
//this is important to click programmaticallly
fileupload.element.dom.querySelector('.x-button-el').click();
},
fileSelected: function (field) {
let files = field.getFiles();
// now you have the files
}
Thats it...

That is by design.
The file input's text is browser defined and not meant to be changed by the developer.
Usually people work around that by generating a display:hidden file input and a generic button which triggers the file input via JS.
I fear you'll have to divert to similar measures in ExtJS.
For reference here's a discussion on SO about how to change the label of the plain-old HTML file input element: Labeling file upload button

Understanding Setting JQuery Variables

Understanding Setting JQuery Variables
Recently I was introduced to setting a JQuery variable as seen below via assistance I was looking for on another question I had on StackOverflow. You can create an input field via simply calling upon a variable and it also appears that the anchor variable defines styles too!
var clicked = $('.clicked');
var ul = clicked.children('ul');
var input = $('<input />', {
type: 'text',
class: 'rename',
value: 'New Folder',
focusout: function() {
$(this).siblings('a').html($(this).val()).show();
$(this).remove();
$(anchor).parent().removeClass('clicked');
}
});
var anchor = $('<a>', {
href: '#',
css: {
display: 'none'
}
});
ul.prepend($('<li>').append([input.select(), anchor]));
I believe I understand how to modify and recreate the above snippet, the only aspect I don't actually understand is the setting of the styles. Upon my research, I haven't yet found anything alike this method and I'm hoping I can find more of an understanding via posting a question.
My aim is to understand and use more frequently with my next target being to create a select option field with all the options calling for .selectBoxIt() at the end.
UPDATE
I'm not entirely sure if this is the best way to achieve this however I've come up with a solution thanks to answers to as how to create a select option list;
var select = $('<select />');
var options = [
{val : 1, text: '3 DAYS'},
{val : 2, text: '10 DAYS'},
{val : 3, text: '30 DAYS'},
{val : 4, text: '60 DAYS'}
];
$('.hello').prepend(select);
$(options).each(function() {
select.append($("<option>").attr('value',this.val).text(this.text));
});
// Because we are appending at a later date
// for the .selectBoxIt(); to work...
$(".hello select").selectBoxIt();

You can start here http://api.jquery.com/jquery/ and scroll down to the section on creating new elements.
As of jQuery 1.4, the second argument to jQuery() can accept a plain
object consisting of a superset of the properties that can be passed
to the .attr() method.

How to get the input element of a texbox in sencha

How can I get the input element of a textbox by id in javascript?
I already tried to search through the divs manually, but that seams unpractical. Since the Id is always a bit random, how do I get it?

first way
document.getElementById("ur input text box Id").value;
but this will fail if your control in a User control because at run time it will change then try this :
document.querySelectorAll('input[id$="put your input textbox id here"]')[0].value;
This will sure get you your text box value

Use getInputId() to get the input id. See this example:
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
listeners: {
added: function() {
alert( this.getInputId() );
}
}
}]
});
Update Sencha Touch:
Ext.ComponentQuery.query('textfield[name="yourname"]')
Check out the docs: http://docs.sencha.com/touch/2.3.1/#!/api/Ext.ComponentQuery

Adding label to a text box (programmatically)

How do I add a label to a text box (programmatically) :
el = new dijit.form.TextBox({label: '...' });
form.containerNode.appendChild(el.domNode);
this does not seem to work (dojo 1.6)

Dojo provides dojox.layout.TableContainer for automatically pairing labels with controls:
var layout = new dojox.layout.TableContainer({
showLabels: true,
orientation: "horiz"
});
var textBox = new dijit.form.TextBox({
name: 'text',
title: 'My Label'
});
layout.addChild(textBox);
layout.placeAt(form.containerNode);
layout.startup();
jsfiddle (thanks for the template, #jumpnett)

I've never seen any example where the dijit.form.TextBox uses the lable property to actually display a label next to the TextBox. The label is always a seperate label element or textnode.
I believe the TextBox only has this property because it inherits it from dijit._Widget (according to the API docs).
To add a label programmaticaly, just append a seperate textnode or label element to the form's domNode:
dojo.require("dijit.form.Form");
dojo.require("dijit.form.TextBox");
function buildForm() {
var form = new dijit.form.Form({
}, dojo.doc.createElement('div'));
var textBox = new dijit.form.TextBox({
name: 'text'
}, dojo.doc.createElement('input'));
document.body.appendChild(form.domNode);
form.domNode.appendChild(dojo.doc.createTextNode("My Label "));
form.domNode.appendChild(textBox.domNode);
}
dojo.addOnLoad(buildForm);
Here is a full example on jsfiddle.

yourPlaceholder.domNode.appendChild(dojo.doc.createTextNode("Label Text"));
yourPlaceholder.addChild(yourTextBox);

I got it using following snippet :
dojo.place('<label for="field" > Label Name </label>',dojo.byId('TextField_Id'),'before');