We Keep Coding

EXTJS - Load Mask

I want to present the source code, which is taken from inside a div with jQuery, inside an Ext.Window. I have managed to do that, but my problem is that sometimes the source code is huge, since it contains encoded images and the Ext.Window takes some time to appear in the screen after it is triggered via click event. I would like to present the Ext.Window but with a loading icon until the data is ready.
win = new Ext.Window ({
title:'Source Code',
width:800,
height:300,
items: [{
xtype : 'textarea',
readOnly: true,
value: sourceCode
}]
});
win.show();

Try with a undefined function and a setTimeout function. Do not forget the config layout: 'fit'.
Ext.application({
name : 'Fiddle',
launch : function() {
var win = Ext.create('Ext.window.Window', {
title:'Source Code',
width:800,
height:300,
layout: 'fit',
items: [{
xtype : 'textarea',
readOnly: true,
value: 'test'
}]
});
win.show(undefined, function(){
win.getEl().mask('Loading...');
setTimeout(function() {
win.getEl().unmask();
}, 3000);
});
}
});
Or
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.window.Window', {
title:'Source Code',
width:800,
height:300,
layout: 'fit',
items: [{
xtype : 'textarea',
readOnly: true,
value: 'test'
}]
}).show(undefined, function(){
win.getEl().mask('Loading...');
setTimeout(function() {
win.getEl().unmask();
}, 3000);
});
}
});
TRY
win.show(undefined, function(){
win.getEl().mask('Loading...');
win.suspendEvents();
win.down('textarea').setValue(sourceCode);
win.down('textarea').focus();
win.resumeEvents();
setTimeout(function() {
win.getEl().unmask();
}, 2000);
});

What you can try is to set the value only after the window is already displayed:
win = new Ext.Window ({
title:'Source Code',
width:800,
height:300,
items: [{
xtype : 'textarea',
readOnly: true
}],
listeners: {
afterrender: function(sourceWindow) {
sourceWindow.down('textarea').setValue(sourceCode)
}
}
});
win.show();
Then you can add josei's mask/unmask approach on top of that, although I would recommend that you search some event that happens after the value has been set to remove the mask (you can try the change event on the textarea), because that way your wait wouldn't be a fixed amount of time, but related to the time it takes to render the textarea value.

File upload hiding text field in extJS

I'm using extJS4 for my GUI and thus also to display the file upload dialog.
In the end I want to only have a button which when I click it it displays the file upload dialog, and when I select something there it automatically uploads the file.
For the automatic "submit" I know that I must write a handler for the onChange event of the file upload dialog. Thus this is not the problem. But is there a way to disable the textfield without having to resort to CSS?
(when I select a file to upload the name is written into the textfield....and I want to either eliminate the textfield or at least make it invisible).

The property you search is buttonOnly: true
Here you find the documentation
Just add it to the example like this:
Ext.create('Ext.form.Panel', {
title: 'Upload a Photo',
width: 400,
bodyPadding: 10,
frame: true,
renderTo: Ext.getBody(),
items: [{
xtype: 'filefield',
buttonOnly: true,
name: 'photo',
fieldLabel: 'Photo',
labelWidth: 50,
msgTarget: 'side',
allowBlank: false,
anchor: '100%',
buttonText: 'Select Photo...'
}],
buttons: [{
text: 'Upload',
handler: function() {
var form = this.up('form').getForm();
if(form.isValid()){
form.submit({
url: 'photo-upload.php',
waitMsg: 'Uploading your photo...',
success: function(fp, o) {
Ext.Msg.alert('Success', 'Your photo "' + o.result.file + '" has been uploaded.');
}
});
}
}
}]
});

Editor cannot disappear after closing Window

I got a problem on Ext 4.1.0 and Ext 4.1.1
Double click first cell to edit it and then click window close button, the editor still floats on the page.But it is ok for last cell.
Anyone met this problem before? Thanks
Ext.onReady(function(){
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa#simpsons.com", "phone":"1224" },
{ 'name': 'Bart', "email":"bart#simpsons.com", "phone":"1234" },
{ 'name': 'Homer', "email":"home#simpsons.com", "phone":"1244" },
{ 'name': 'Marge', "email":"marge#simpsons.com", "phone":"1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
var table = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{
text: 'Name',
dataIndex: 'name',
editor: { xtype: 'textfield', toFrontOnShow: false }
},
{
text: 'Email',
dataIndex: 'email',
flex: 1
},
{
text: 'Phone',
dataIndex: 'phone',
editor: {
xtype: 'numberfield',
hideTrigger: true,
validateOnChange : false
}
}
],
height: 200,
width: 400,
plugins:[ Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 2
})]
});
var window = new Ext.Window({
id: 'abc',
title :'abc',
modal : true,
layout: 'border',
resizable : true,
draggable : true,
closable : true,
closeAction : 'hide',
width :410,
height :210,
items : [table]
});
window.show();
});

The easiest way to handle this for you, would be to listen to the window's beforeclose event and cancel any editing in this event using the celleditor's cancelEdit method as described here in the docs.
For example, here is your window object (from your code above) with the listener applied:
var window = new Ext.Window({
id: 'abc',
title :'abc',
modal : true,
layout: 'border',
resizable : true,
draggable : true,
closable : true,
closeAction : 'hide',
width :410,
height :210,
items : [ table],
// add this listener to your window
listeners: {
beforeclose: function(panel) {
var view = panel.down('gridview');
if (view && view.editingPlugin) {
view.editingPlugin.cancelEdit();
}
}
}
});
Reply to comment:
Here's an override that would do the same thing. You would have to include this override in each app after ExtJS initialization though.
Of course it is also possible to replace the init function in the Ext.grid.plugin.Editor source code with this one (then you wouldn't have to include the override in the app) but I wouldn't recommend doing that for a number of reasons.
Ext.override(Ext.grid.plugin.Editor, {
init: function(grid) {
// the normal init code (below) must be included in the override
var me = this;
me.grid = grid;
me.view = grid.view;
me.initEvents();
me.mon(grid, 'reconfigure', me.onReconfigure, me);
me.onReconfigure();
grid.relayEvents(me, [
'beforeedit',
'edit',
'validateedit',
'canceledit'
]);
grid.isEditable = true;
grid.editingPlugin = grid.view.editingPlugin = me;
// additional code to cancel editing before a grid is hidden
grid.on('beforehide', function(grid) {
var view = grid.view;
if (view && view.editingPlugin) {
view.editingPlugin.cancelEdit();
}
});
// additional code to cancel editing before a grid is destroyed
grid.on('beforedestroy', function(grid) {
var view = grid.view;
if (view && view.editingPlugin) {
view.editingPlugin.cancelEdit();
}
});
}
});
I would also recommend looking into MVC architecture, it would make handling things like this alot easier for you.

Extjs combo not working in IE7

Ext js combo is not working in IE7. I need this combo act like textbox with virtual combo (like google search). It is working in IE9 and FF but not in IE7
This is my code:
SearchIncidentForm=new Ext.FormPanel ({
border:false,
renderTo:'searchIncidentDiv',
id: 'searchIncidentForm',
items : [{
xtype:'panel',
id :'panelsearchIncident',
layout:'column',
defaults:{
columnWidth:0.50,
labelAlign : 'top',
layout:'form',
border:false,
bodyStyle:'margin-top:5px; '
},
border:false,
items : [{
defaults:{anchor:'100%'},
items:[{
id : "incidentId",
fieldLabel : 'Incident Id',
labelStyle: 'color: #6C6C6C;width:85px;padding-top:7px;height: 22px;',
xtype : 'combo',
store:incidentStores,
//style: 'width:85px;height: 18px;',
width:100,
allowBlank : false,
labelAlign: 'top',
displayField : 'incidentId',
valueField : 'incidentId',
selectOnFocus : true,
typeAhead : false,
mode : 'remote',
triggerAction : 'all',
editable: true,
msgTarget:'qtip',
listAlign : 'tl-bl?',
//anchor : '80%',
minChars : 1,
hideTrigger:true,
hiddenName: 'incidentId',
listWidth:100,
listHeight:50,
submittValue:true,
listeners : {
specialkey : function(field, e){
var key=e.getKey();
if (key==e.ENTER) {
incidentSearchButtonHandler();
}
},
beforequery : function(){
var val=Ext.getCmp('incidentId').getValue();
if(isNaN(this.getEl().dom.value)){
Ext.Msg.alert("","Please type numeric value");
}
else{
Ext.getCmp('incidentId').getStore().proxy.setUrl('getIncidentId.html?&query='+this.getEl().dom.value);
}
}
}
}]
},{
items:[{
xtype : 'button',
text : 'Search',
style: 'margin-top:19px;margin-left:20px;width:50px;',
width: 35,
height:15,
handler : incidentSearchButtonHandler
}]
}]
}]
});
}
but it's not working in IE. When I press Search button, an alert is shown that please type Id. That means it doesn't take the value that has been typed. Please help.

I've been bitten by this before with IE: you have an extra comma after the last element of your array:
items:[{
submittValue:true,
listeners : {
specialkey : function(field, e){
var key=e.getKey();
if (key==e.ENTER) {
incidentSearchButtonHandler();
}
}, // <------ Extra comma. Delete it.
]}

ExtJS ComboBox dropdown width wider than input box width?

Is there any way to set the width of an ExtJS (version 4) ComboBox's dropdown menu to be wider than that of the actual input box?
I have a comboxbox that i want to be around 200px but I have paging on the results dropdown and that width is not even big enough to show all the paging bar's controls.
Here's my code to create the combo:
var add_combo = Ext.create('Ext.form.field.ComboBox',
{
id : 'gbl_add_combo',
store : Ext.create('Ext.data.Store',
{
remoteFilter : true,
fields : ['gb_id', 'title'],
proxy :
{
type : 'ajax',
url : 'index.php/store/get_items',
reader :
{
type : 'json',
root : 'records',
totalProperty : 'total',
successProperty : 'success'
},
actionMethods :
{
read : 'POST',
create : 'POST',
update : 'POST',
destroy : 'POST'
}
}
}),
listConfig:
{
loadingText: 'Searching...',
emptyText: 'No results found'
},
queryMode : 'remote',
hideLabel : true,
displayField : 'title',
valueField : 'gb_id',
typeAhead : true,
hideTrigger : true,
emptyText : 'Start typing...',
selectOnFocus : true,
width : 225,
minChars : 3,
cls : 'header_combo',
pageSize : 15
});

There are two parts to this. Firstly, you need to set matchFieldWidth: false in your combobox config. You can then specify width attributes in the listConfig section to style just the dropdown, while specifying the width of the combobox itself in the main config.
This varies from the pervious version, which just let you specify the listWidth property.

I didn't find way to change 'matchFieldWidth' property dynamically. So I found another solution:
{
xtype: 'combobox',
fieldLabel: 'Short Options',
queryMode: 'local',
store: ['Yes', 'No', 'Maybe'],
matchFieldWidth: false,
listConfig: {
listeners: {
beforeshow: function(picker) {
picker.minWidth = picker.up('combobox').getSize().width;
}
}
}
}
Source: http://www.sencha.com/forum/showthread.php?293120-Setting-BoundList-minWidth-to-the-width-of-a-parent-ComboBox-without-matchFieldWidth

In ExtJS 7+ modern, you need to use the beforepickercreate event if you wish to control the width of the combobox's picker.
It's not very intuitive, but it works.
xtype: 'combobox',
...
listeners: {
beforepickercreate: {
fn: function(cmp, newV) {
newV.listeners = {
beforeshow: function(cmp) {
cmp.setMinWidth(400);
cmp.setWidth(400);
}
}
return newV;
}
}
}