Develop Reference

Kendo UI custom grid popup editor window only opens once

I would like to use a custom window as popup editor of a Kendo UI Grid. Its content will be complex with search fields and a grid to display search results. To do that, I don't want to use the Kendo template mechanism but a real popup window.
While doing tests with custom editor I faced an issue. Even with a very basic and simple scenario (just the create command), I'm only able to open the editor once. The second time I get an error, the editor doesn't show up anymore and the grid becomes empty.
Here is my HTML code :
<div id="main-content">
<div id="custom-window">
</div>
<table id="my-table-grid">
</table>
</div>
The JavaScript part :
function openCustomWindow(e) {
e.preventDefault();
myWindow.center().open();
}
function editorWindowClosed(e) {
myGrid.cancelRow();
}
var myWindow = $("#custom-window").kendoWindow({
modal: true,
resizable: false,
title: "Test",
visible: false,
close: editorWindowClosed
}).data("kendoWindow");
var dummyDataSource = new kendo.data.DataSource(
{
schema : {
model : {
id: "id",
fields: {
postion: { type: "number"},
name: { type: "string"},
}
}
}
});
dummyDataSource.add({postion: 1, name: "gswin"});
var myGrid = $("#my-table-grid").kendoGrid({
dataSource: dummyDataSource,
toolbar: [ {
name: "create",
text: "Create"
} ],
editable: {
mode: "popup",
window: {
animation: false,
open: openCustomWindow,
}
},
columns: [
{
field: "postion",
title: "Postion"
},
{
field: "name",
title: "Name"
}
]
}).data("kendoGrid");
The error message in the JavaScript console :
Uncaught TypeError: Cannot read property 'uid' of
undefinedut.ui.DataBoundWidget.extend.cancelRow #
kendo.all.min.js:29ut.ui.DataBoundWidget.extend.addRow #
kendo.all.min.js:29(anonymous function) #
kendo.all.min.js:29jQuery.event.dispatch #
jquery-2.1.3.js:4430jQuery.event.add.elemData.handle #
jquery-2.1.3.js:4116
And finally a jsfiddle link to show what I'm doing. (The popup is empty because I just want to fix the open / close mechanism before going any further)
I don't understand why I get this error, I expected to be able to open / close the popup as many time as I wanted. The default editor popup is working fine.

One of my colleague found the solution (thanks to him).
Actually this piece of code
editable: {
mode: "popup",
window: {
animation: false,
open: openCustomWindow,
}
}
is designed to configure the default popup...
The right way to use a custom popup is the following :
editable :true,
edit: openCustomWindow,
With this approach it's also better to use
function editorWindowClosed(e) {
myGrid.cancelChanges();
}
Instead of
function editorWindowClosed(e) {
myGrid.cancelRow();
}
Working jsfiddle link

Actually the approach in my previous answer solved my issue but is causing another issue. The grid becomes editable but in the default mode (which is "inline").
Doing this
editable: "popup",
edit: openCustomWindow
has fixed this other issue but is now displaying 2 popups.
I finally succeeded to hide the default popup and only show my custom popup but it ended with the orginal issue described in initial question...
Considering all those informations I arrived to the conclusion that working with a custom popup window is definitely not an option. I'll start working with teamplates instead.
Another solution would have been to use a template to override the toolbar with a custom "Add" button and use a custom command for edition. But at this point I consider that too "tricky".

To prevent Kendo UI custom grid popup editor window, define the editable property:
editable:
{
mode: "popup",
window: {
animation: false,
open: updateRowEventHandler
}
} // skip edit property
Then paste preventDefault() at the beginning of the handler:
function updateRowEventHandler(e) {
e.preventDefault(); //

Browse button of filefield missing

I have a filefield in my extjs page. The upload functionality is working fine, alright.
The filefield is placed in a widget window. When the window is closed and reopened the filefield doesn't create properly. The browse button is missing in it. This happens only when I close the window without uploading anything at all.
The below is the code for the same:
var stockAuditUploadFile = Ext.widget('window', {
title: 'Upload the Stock Audit file',
closeAction: 'hide',
width: 500,
autoHeight: true,
layout: 'fit',
resizable: false,
modal: true,
items: [{
xtype: 'filefield',
id: 'filedata',
emptyText: 'Select a document to upload...',
fieldLabel: 'File',
waitMsg: 'Please wait...',
buttonText: 'Browse',
validator: function (v) {
if (!/\.xls$/.test(v)) {
return 'Only Excel files allowed';
}
return true;
}
}],
buttons: [{
text: 'Upload',
handler: function () {
//callUpload();
if (myuploadform.getForm().isValid()) {
//alert('in456side');
form_action = 1;
myuploadform.getForm().submit({
url: 'submission/stockupload.jsp',
success: function (result, action) {
}
});
}
Ext.Msg.alert('File Uploaded Successfully');
stockAuditUploadFile.destroy();
}
}]
});
stockAuditUploadFile.show();
When the widget window opens for the first time, everything works fine including the validation for excel file uploading but on close and reopen the browse button is missing.
Is there any mistake in my code?

I found the solution to the above issue.
The closeAction: 'hide' was the problem. On hide, things in Extjs go wild, haven't understood that yet but on changing the above to closeAction: 'destroy' the filefield works fine.
Though the hide was working in fiddle, it didn't work good for me in my project. So, I believe it is better to use the below even though the hide-closeAction may work good for others.
closeAction:'destroy' brings the browse button alright.

extjs 4: how to add button to any custom form

I am currently trying to add a custom button that will be able to call when ever the user wants to add a new button using EXTJS 4.
Here is the TimeButton.js file that i want to use to create the button
Ext.namespace("Ext.controls");
Ext.create('Ext.Button', {
text: 'Time',
renderTo: Ext.getBody(),
handler: function() {
alert('The current time is '+Date())
}
});
Ext.reg('timebutton', Ext.controls.TimeButton);
but when ever i try add it to any form i get the following error
types[config.xtype || defaultType] is not a constructor
Or would it be better to do something like this
Ext.controls.TimeButton = Ext.extend(Ext.Panel, {
initComponent: function(){
Ext.apply(this, {
frame: true
,height: 330
,layout: 'border'
,layout: 'column'
,split: true
,cls: 'DocumentWindow'
,items: []
});
this.documentGrid = new Ext.controls.DocumentGrid({height: 220,
agentId : this.agentId,
columnWidth: 0.5})
Ext.controls.DocumentPanel.superclass.initComponent.apply(this, arguments);
}
From what i understand this happens when trying to instantiate (create) a component that does not exist but i do not see where the error might be! is there an error in the code that I have posted?

Define your button as a class, register it for using with xtype by providing alias property and instantiate it in the parent items container. Here is an example.

Set focus for text input in just created window

I have trivial window:
this.window = Ext.widget('window', {
title: 'Find',
closeAction: 'hide',
width: 300,
layout: 'fit',
items: form
});
with trivial form in it
var form = Ext.widget('form', {
layout: {
type: 'vbox',
align: 'stretch'
},
border: false,
bodyPadding: 10,
items: [
this.findInput,
]
});
which only has one item
this.findInput = Ext.widget('textfield', {
name: 'find'
});
The issue is: how to set focus right after window is shown? I tried to call .focus() method of this.findInput in almost every window event handler with no luck.
Seems like even afterrender is called synchronously before DOM has created all the elements completely.
What have I missed? What event should I bind to to have all the elements rendered and able to accept the focus?
PS: if I call the same .focus() after small interval like 10ms - I get it focused, but it's not a solution

Check out activeItem property - http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Panel-cfg-activeItem
or you can also use defaultFocus: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.window.Window-cfg-defaultFocus

Disappearing TabPanel card on setActiveItem?

EDIT
I have a viewport that extends a TabPanel. In it, I set one of the tabBar buttons to load another TabPanel called subTabPanel. myApp.views.viewport.setActiveItem(index, options) works just fine. But myApp.views.subTabPanel.setActiveItem(index, options) only loads the appropriate panel card for a split second before it vanishes.
Strangely, it works just fine to make this call from within the subTabPanel's list item:
this.ownerCt.setActiveItem(index, options)
However, I want to avoid this, as I want such actions to live inside controllers so as to adhere to MVC.
Any thoughts on why the card disappears when called from the controller, but not when called from the containing subTabPanel?
(The subTabPanel card in question is an extension of Ext.Carousel.)
UPDATE
It looks like both subTabPanel and its carousel are being instantiated twice somehow, so that could be a big part of the problem...

The answer in this case was to prevent the duplicate creation of the subTabPanel and its carousel.
The viewport now looks like this:
myApp.views.Viewport = Ext.extend(Ext.TabPanel, {
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
listeners: {
beforecardswitch: function(cnt, newCard, oldCard, index, animated) {
//alert('switching cards...');
}
},
tabBar: {
ui: 'blue',
dock: 'bottom',
layout: { pack: 'center' }
},
items: [],
initComponent: function() {
//put instances of cards into myApp.views namespace
Ext.apply(myApp.views, {
subTabPanel: new myApp.views.SubTabPanel(),
tab2: new myApp.views.Tab2(),
tab3: new myApp.views.Tab3(),
});
//put instances of cards into viewport
Ext.apply(this, {
items: [
myApp.views.productList,
myApp.views.tab2,
myApp.views.tab3
]
});
myApp.views.Viewport.superclass.initComponent.apply(this, arguments);
}
});
And I've since removed the duplicate creation of those TabPanel items from the items: property and moved their tabBar-specific properties into the view classes SubTabPanel, Tab2 and Tab3 (each of which are extensions of either Ext.TabPanel or Ext.Panel).