Develop Reference

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

How to change Ext Js Button tooltip at runtime?

I have the following:
var panel = headerPanel.add({
id: 'recentcommands_button_id',
xtype: 'button',
text: "Recent Commands",
tooltip: "Sample Tooltip Text"
});
Followed later on by:
Ext.getCmp('recentcommands_button_id').tooltip = "TEST";
Which sets the tooltip value properly if I check the button's properties, but which does not actually change the value on the screen.
I tried using:
Ext.getCmp('recentcommands_button_id').tooltip.update("TEST");
This did not work either.
Any ideas?

You can use setTooltip method:
Ext.getCmp('recentcommands_button_id').setTooltip("TEST");

Extjs4 transform combobox doesn't send value attribute on form submit

I have an ExtJS4 transform combobox inside an HTML form:
<script>
Ext.onReady(function() {
Ext.tip.QuickTipManager.init();
var transformed = Ext.create('Ext.form.field.ComboBox', {
typeAhead: true,
transform: 'countrySelect',
forceSelection: true
});
});
</script>
<form>
<select id="countrySelect">
<option value="AR">Argentina</option>
</select>
When I submit the form, it sends Argentina instead of AR . What should I do to make extjs send value attribute as selected value?

I understand that you want to submit your form without using Ext...
Give your combo a hiddenName, so that Ext creates a hidden input element, which value will be kept in sync with the value selected in the combo.
In order to prevent the visible input element's value to be read by your form, you'd have to remove its name attribute.
With your example, that gives us:
Ext.create('Ext.form.field.ComboBox', {
typeAhead: true,
transform: 'countrySelect',
forceSelection: true
// will create a hidden input with the correct value
,hiddenName: 'country'
// prevent visible input to be included into the submitted data
,listeners: {
afterrender: function() {
this.inputEl.dom.removeAttribute('name');
}
}
});
You may want to pack the last part into an override. That would be:
Ext.define('Ext.ux.ComboBoxPreventDoubleSubmit', {
override: 'Ext.form.field.ComboBox'
,afterRender: function() {
this.callParent(arguments);
if (this.hiddenName) {
this.inputEl.dom.removeAttribute('name');
}
}
});

create a array of kendo multi-select selected id

i am try to create a array of selected id using kendo multi select.
here is jsfiddle
this is kendo script:-
$("#multiselect").kendoMultiSelect({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
dataValueField: "id",
select:onSelect
});
kendo select function:-
function onSelect(e){
var dataItem = this.dataSource.view()[e.item.index()];
onchng(dataItem.id);
}
create a array:-
function onchng(id){
var checkarr = [];
checkarr.push(id);
console.log(checkarr);
}
here is output is [1] [2]
but i want it ['1','2']
is it possible??
thanks

When your select event fired, 'checkarr' redefined again and again. Your problem is that. If you want values in one array, you must use a button to take values together, then push them to array in single function. Or you can use session or something like that

This is how you can do it from the Controller. Note I'm doing Request.Form, that's because for whatever reason MVC Model and Kendo UI wouldn't work together when using MultiComplete. But this will put them in an array, and this is fired off a button click like the other answer suggested.
string[] advertisers = Request.Form["Name"].ToString().Split(',');

I think that there is a much easier approach and with less side effects...
Bind change event instead of select. Why? Two reasons:
select is fired just before the element is added to the list of values so you cannot get current list and you need to add the value being selected to the values already selected.
select is not fired when you remove the selection of an option.
The code using change would be as simple as:
var multi = $("#multiselect").kendoMultiSelect({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
dataValueField: "id",
change : onSelect
}).data("kendoMultiSelect");
function onSelect(){
console.log("here", multi.value());
}
Just need to use value method from your multiselect.
Your Fiddle modified in here : http://docs.telerik.com/kendo-ui/api/framework/datasource#events-change
NOTE: change event belongs to DataSource if you need to see the documentation, check it here

Extjs 4.1 remove element from combox after loading

I've an MVC panel with a combobox and I'would remove some elements from the combobox after his store (local or remote) has completed to load.
the combo is declared in the view of this panel as follow:
{
xtype:'combo',
name: 'type',
editable: false,
//a local simple store with two field: 'valueType' and 'text'
store : Ext.create('AM.store.custompropview.propertyType'),
valueField : 'valueType',
fieldLabel: 'combo'
}
I've tried in the controller to control the event 'afterrender' or 'boxready' and in the function to remove some element from the store, but it don't work at all.
'combo[name="type"]' : {
boxready:function(th, width, height, eOpts ){
th.store.removeAt(0);
th.store.removeAt(0);
th.store.removeAt(0);
}
How i can do it?
thank you

I think you should remove your item after store is loaded not just after your combo is rendered so you can code this in controller's init function:
Ext.getStore('AM.store.custompropview.propertyType').on('load', function(store){
store.removeAt(0);
});