I want listen when file has been change like. But It not working
{
xtype: 'filefield',
id: 'form-file',
fieldLabel: 'Photo',
name: 'photo-path',
buttonText: '',
buttonConfig: {
iconCls: 'upload-icon'
},
listeners: {
'change': function(this, value){
alert('change');
}
}
}
You can't do it with filefield of Extjs
I have the solution.
Example: http://jsfiddle.net/e3M3e/e8V7g/
var itemFile = null;
Ext.create('Ext.panel.Panel', {
title: 'Hello',
width: 400,
html: "<input id='inputFile' type='file' name='uploaded'/>",
renderTo: Ext.getBody(),
listeners: {
afterrender: function() {
itemFile = document.getElementById("inputFile");
itemFile.addEventListener('change', EventChange, false);
}
}
});
function EventChange(e){
var files = itemFile.files;
console.log(files);
}
I found solution: function change must be:
change: function(f,new_val) { alert(new_val); }
Related
After upgrading from Ext5 to 7.2 it is no longer possible to see a tooltip after programatically enabling a button.
Ext.define('X', {
extend: 'Ext.panel.Panel',
initComponent: function() {
this.tbar = [{
text: 'Foo',
disabled: true,
itemId: 'fooBtn',
tooltip: 'FooTip',
handler: function(btn){
this.setHtml('Test')
},
scope: this
},
{
text: 'Bar',
tooltip: 'BarTip',
handler: function(btn) {
this.down('#fooBtn').enable();
},
scope: this
}];
this.callParent();
}
});
Ext.application({
name: 'Fiddle',
launch: function() {
new X({
renderTo: document.body,
title: 'Foo',
width: 200,
height: 200
});
}
});
https://fiddle.sencha.com/#view/editor&fiddle/37o5
Strange bug. You can use the following override to fix it:
Ext.define('overrides.button.Button', {
override: 'Ext.button.Button',
setTooltip: function(tooltip, initial) {
var me = this,
targetEl = me.el;
if (me.rendered) {
if (!initial || !tooltip) {
me.clearTip();
}
if (tooltip) {
if (Ext.quickTipsActive && Ext.isObject(tooltip)) {
Ext.tip.QuickTipManager.register(Ext.apply({
target: targetEl.id
}, tooltip));
me.tooltip = tooltip;
}
else {
targetEl.dom.setAttribute(me.getTipAttr(), tooltip);
}
me.currentTooltipEl = targetEl;
}
}
else {
me.tooltip = tooltip;
}
return me;
}
});
You may try to add one line after enabling:
handler: function(btn) {
this.down('#fooBtn').enable();
******this.down('#fooBtn').setTooltip("FooTip");*****
},
Maybe a bad solution but less code is required.
I'm new to Extjs, I need to know how to get te position of the cursor in a textareafield.
I've been googleing an I found these links:
EXTJS 5: Get the current cursor position in a textfield or lookupfield
and
In ExtJs, how to insert a fixed string at caret position in a TextArea?
From there I got this:
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.define({
xtype: 'container',
renderTo: Ext.getBody(),
layout: 'vbox',
padding: 20,
defaults: {
xtype: 'button',
margin: '0 0 12 0'
},
items: [
{
xtype: 'textareafield',
grow: false,
width: 545,
height: 120,
name: 'message',
fieldLabel: '',
id: 'mytextarea',
anchor: '100%'
},
{
xtype: 'button',
text: 'Go',
scale: 'medium',
id: 'mybutton',
listeners: {
click: function() {
var zone = Ext.getCmp('mytextarea');
var text = zone.getValue();
var posic = zone.el.dom.selectionStart;
console.log(posic); // undefined
}
}
}
]
});
}
});
this fiddle
Oh, and I'm using Ext 6.x, Linux Mint, Firefox and Chromium.
But always posic will return undefined... How can I solve this?
You may try with the following approach:
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.define('Trnd.TestWindow', {
extend: 'Ext.window.Window',
closeAction: 'destroy',
border: false,
width: 400,
height: 500,
modal: true,
closable: true,
resizable: true,
layout: 'fit',
title: 'Close window to see the position',
getCaretPos: function() {
var me = this;
var el = me.myTextArea.inputEl.dom;
if (typeof(el.selectionStart) === "number") {
return el.selectionStart;
} else if (document.selection && el.createTextRange){
var range = document.selection.createRange();
range.collapse(true);
range.moveStart("character", -el.value.length);
return range.text.length;
} else {
throw 'getCaretPosition() not supported';
}
},
initComponent: function() {
var me = this;
me.callParent(arguments);
me.myTextArea = Ext.create('Ext.form.field.TextArea', {
width: 500,
height: 500,
editable: true,
selectOnFocus: false,
listeners: {
afterrender: function() {
this.focus(true);
var cursorPos = this.getValue().length;
this.selectText(cursorPos, cursorPos);
}
}
});
me.panel = Ext.create('Ext.panel.Panel', {
items: [
me.myTextArea
]
});
me.add(me.panel);
},
listeners: {
'close': function() {
var me = this;
alert(me.getCaretPos());
}
}
});
var win = new Trnd.TestWindow({
});
win.show();
}
});
Test example with this fiddle.
Use Ext.getDOM() instead of Ext.getCmp() like this:
var myTextArea = Ext.getDom('mytextarea');
var textInArea = myTextArea.value;
var caretPosition = myTextArea.selectionStart;
console.log(caretPosition);
EDIT:
Also xtype of the field must be changed to textarea. In this case your initial example should work too.
I'm developing an application using Extjs-6. I extend a viewclass from a Ext.form.field.Picker as follow:
Ext.define('Fiddle.MyCombo', function(){
var me;
var initComponent = function()
{
me = this;
Ext.apply(me, {});
me.callParent(arguments);
};
var createPicker = function ()
{
var textfield = {
xtype: 'textfield',
width: '100%',
border: false,
listeners: {
change: function(component, newValue)
{
me.setStr(newValue);
}
}
};
var panel = new Ext.panel.Panel({
rtl: true,
minWidth: 300,
floating: true,
items: [textfield]
});
Ext.Msg.alert('Attension', 'Init Value is : ' + me.getStr());
return Ext.widget(panel);
};
return {
extend: 'Ext.form.field.Picker',
alias: 'widget.mycombo',
initComponent: initComponent,
createPicker: createPicker,
config: {
str: ''
}
};
});
I use this class as follow:
Ext.define('Fiddle.Main', {
extend: 'Ext.panel.Panel',
width: 400,
height: 200,
title: 'Its me!',
items: [{
xtype: 'mycombo',
name: 'item1'
}, {
xtype: 'mycombo',
name: 'item2'
}]
});
When I open first mycombo(item1) and type some word in textfield input, and then open second mycombo item(items2), in createPicker function I alert str value of item, and it show the item1's value.
Why it show item1's str value?
Where is wrong?
My Sample fiddle is here.
i am very new to EXT.js; i need to submit the form when ENTER is pressed below is my code but i dont know what to call in the listener of the password field here is my code:
ie:what is the function to call in the listener
<script type="text/javascript">
Ext.onReady(function() {
Ext.tip.QuickTipManager.init();
Ext.create("Ext.container.Viewport", {
layout: "border",
rtl: <spring:theme code='theme.rtl' text='false' />
});
Ext.create("Ext.window.Window", {
title: "<spring:message code='title.login' text='Login' />",
height: 310,
width: 450,
closable: false,
layout: "border",
items: [{
xtype: "panel",
border: false,
bodyCls: "login-header",
height: 160,
region: "north"
}, {
id: "<%=loginFormId%>",
url: "<spring:url value='/secure/auth'/>",
xtype: "form",
layout: "form",
region: "center",
bodyPadding: 10,
border: false,
buttons: [{
handler: function() {
var form = this.up("form").getForm();
if (form.isValid()) {
Ext.getCmp("<%=submitBtnId%>").disable();
form.standardSubmit = true;
form.method = "POST";
form.submit();
}
},
id: "<%=submitBtnId%>",
text: "<spring:message code='button.submit' text='Submit' />"
}, {
handler: function() {
var form = this.up("form").getForm();
form.reset();
},
id: "<%=clearBtnId%>",
text: "<spring:message code='button.clear' text='Clear' />"
}],
defaultType: "textfield",
defaults: {
msgTarget: "side",
labelWidth: 100
},
items: [{
fieldLabel: "<spring:message code='input.username' text='Username' />",
name: "selfcare_username"
}, {
fieldLabel: "<spring:message code='input.password' text='Password' />",
name: "selfcare_password",
enableKeyEvents:true,
inputType: "password",
listeners: {
scope: this,
specialkey: function(f, e) {
if (e.getKey() === e.ENTER) {
}
}
}
}]
}]
}).show();
<c:if test="${not empty param.error}">
var errorMsg = "<c:out value="${SPRING_SECURITY_LAST_EXCEPTION.message}" />";
if (errorMsg !== "") {
Ext.MessageBox.show({
title: "<spring:message code='title.error' text='Error' />",
msg: errorMsg,
closable: false,
buttons: Ext.Msg.OK
});
}
</c:if>
});
</script>
These days it is better to use the defaultButton property on the form to designate the default button on the form. This is the button who's handler will handle your ENTER key.:
http://docs.sencha.com/extjs/6.0/6.0.2-classic/#!/api/Ext.panel.Panel-cfg-defaultButton
You should attach key event of the components listener, here is the sample which is working if the field not empty and pressed key ENTER or TAB inside the field.
suppliers is a JsonStore where I am loading store by params which means you can call whatever you wrote in the app.
{
xtype: 'textfield',
id: 'supplier-id',
flex: 1,
tabIndex: 1,
fieldLabel: 'SUPPLIER NO',
fieldStyle: 'text-align: right; font-size: 12pt',
margins: '0 5 0 0',
enablekeyEvents: true,
listeners: {
specialkey: function (field, e) {
if (field.getValue() != 'null') {
if (e.getKey() === e.ENTER || e.TAB) {
suppliers.load({
params: {'supplier': field.getValue(), 'type': 'supplier'},
callback: function () {
Ext.getCmp('supplier-name').setValue(suppliers.data.items[0].data['MATCH_NAME']);
}
});
}
}
},
focus: function (e) {
e.setValue('');
Ext.getCmp('supplier-name').setValue("");
suppliers.loadData([], false);
}
}
}
For Sencha:
listeners: {
specialkey: function(field, e){
if (e.getKey() == e.ENTER) {
//submitLogin();
}
}
},
Add listener with afterrender
listeners: {
afterRender: function(thisForm, options){
this.keyNav = Ext.create('Ext.util.KeyNav', this.el, {
enter: fnLogin,//give here to login function
scope: this
});
}
}
I created a custom field for multiple file uploading, the problem is in the first step i couldn't even add selected file to grid, can you tell me what is the problem of my code? I looked at firebug and there is no java-script error.
Ext.define('VDOA.form.fields.Attachment', {
extend: 'Ext.form.FieldContainer',
mixins: {field: 'Ext.form.field.Field'},
requires: ['Ext.form.field.Base'],
alias: 'widget.attachment',
layout: 'fit',
constructor: function()
{
var me = this;
me.items = [
{
itemId: 'grid',
anchor: '100%',
width: 300,
height: 100,
xtype: 'gridpanel',
layout: 'fit',
autoRender: true,
autoShow: true,
tbar: [
{
itemId: 'add',
hideLabel: true,
buttonOnly: true,
buttonText: 'Browse a file',
xtype: 'fileuploadfield'
}
],
columns: [
{
dataIndex: 'Id',
xtype: 'gridcolumn',
text: 'File Id'
},
{
dataIndex: 'Title',
xtype: 'gridcolumn',
text: 'File Name'
}
]
}
];
me.callParent(arguments);
var store = Ext.create('Ext.data.ArrayStore', {
fields: [
{name: 'Id', type: 'int'},
{name: 'Title', type: 'string'},
{name: 'IsUploading', type: 'bool'}
],
data: []
});
me.down('#grid').store = store;
me.down('#add').on('change', function(o, e){
store.add({Id: Ext.id(), Title: o.value, IsUploading: true});
store.load();
});
},
getErrors: function() {
return [];
},
validate: function() {
return true;
}}); Ext.onReady(function() {
Ext.QuickTips.init();
var win = new Ext.Window({
width:500
,id:'winid'
,height:300
,layout:'fit'
,border:false
,closable:false
,title:'File Upload'
,items:[{
xtype:'form'
,frame:true
,labelWidth:100
,items:[{
name: 'Title',
xtype: 'textfield',
fieldLabel: 'Title',
allowBlank: false,
anchor: '100%'
},
{
name: 'Attachment',
xtype: 'attachment',
fieldLabel: 'Attached Files'
}]
}]
,buttons:[{
text:'Submit'
,handler:function() {
Ext.getCmp('form').getForm().submit();
}
}]
});
win.show();});
Ext.define('VDOA.form.fields.Attachment', {
extend:'Ext.form.FieldContainer',
mixins:{field:'Ext.form.field.Field'},
requires:['Ext.form.field.Base'],
alias:'widget.attachment',
layout:'fit',
constructor:function () {
var me = this,
store = Ext.create('Ext.data.ArrayStore', {
fields:[
{name:'Id', type:'int'},
{name:'Title', type:'string'},
{name:'IsUploading', type:'bool'}
],
data:[]
});
me.items = [
{
itemId:'grid',
anchor:'100%',
width:300,
height:100,
store: store, // link store there...
xtype:'gridpanel',
layout:'fit',
height:400,
autoRender:true,
autoShow:true,
tbar:[
{
itemId:'add',
hideLabel:true,
buttonOnly:true,
buttonText:'Browse a file',
xtype:'filefield'
}
],
columns:[
{
dataIndex:'Id',
xtype:'gridcolumn',
text:'File Id'
},
{
dataIndex:'Title',
xtype:'gridcolumn',
text:'File Name'
}
]
}
];
me.callParent(arguments);
//me.down('#grid').store = store;
me.down('#add').on('change', function (o, e) {
me.down('#grid').store.add({Id:Ext.id(), Title:o.value, IsUploading:true});
// store.load(); // remove it - it set data = [] as it was initialized before
});
},
getErrors:function () {
return [];
},
validate:function () {
return true;
}});
Ext.onReady(function () {
Ext.QuickTips.init();
var win = new Ext.Window({
width:500, id:'winid', height:300, layout:'fit', border:false, closable:false, title:'File Upload', items:[
{
xtype:'form', frame:true, labelWidth:100, items:[
{
name:'Title',
xtype:'textfield',
fieldLabel:'Title',
allowBlank:false,
anchor:'100%'
},
{
name:'Attachment',
xtype:'attachment',
fieldLabel:'Attached Files'
}
]
}
], buttons:[
{
text:'Submit', handler:function () {
Ext.getCmp('form').getForm().submit();
}
}
]
});
win.show();
});
Loot at this snippet.
As I said before store was not linked with its grid successfully. And store reloaded default data = [] when onchange event was appearing.
Enjoy! :)
Try without
store.load();
on your onchange handler.
Also, check about store. Has it linked to the store successfully?
Also.. Good practice is implementing nested components and widget on
initComponent
method
Something like
initComponent: function() {
var me = this;
/* ------ */ me.callParent(arguments); }
And use
Ext.apply
y or
Ext.applyIf
for component initialization