We Keep Coding

Kendo UI Grid: if I make changes and save them, I can still cancel them afterwards. How to lock them in?

I have a Kendo UI Grid bound to a local data source. If I make some changes and click on "Save changes", and then I click on "Cancel changes", the changes are rolled back. I expected them to be "locked in" because I saved them.
Furthermore, if I make a change, save it, make another change, save again and finally cancel, both changes are rolled back.
See UPDATED fiddle, with problem and solution:
http://jsfiddle.net/q24ennne/7/
My HTML:
<div id="grid"></div>
My JavaScript:
window.gridData = [
{ id: 1, text: "Uno" },
{ id: 2, text: "Dos" },
{ id: 3, text: "Tres" },
{ id: 14, text: "Catorce" },
];
(function() {
$('#grid').kendoGrid({
toolbar: ["save", "cancel"],
editable: true,
saveChanges: function(e) {
gridData = $('#grid').getKendoGrid().dataSource.data();
$('#grid').getKendoGrid().refresh();
console.log("gridData:");
console.log(gridData);
},
columns: [{
field: "text",
title: "No."
}],
dataSource: {
data: gridData,
}
});
})();
Thanks!

You need to include a schema for your datasource that specifies which property is the id of each item. In your case this happens to also be called "id" so add this:
dataSource: {
data: gridData,
schema: {
model: { id: "id" }
}
}
The grid will then correctly track and keep your saved changes.

How to add custom container to carousel in Sencha Touch?

How could we add some custom container to the Sencha Touch carousel and avoid it to became a new item that creates second page in carousel?
In other words, how to add container to carousel just before it's scrollable items?
When I'm trying to add container into carousel's dom via innerHTML I'm losing the listeners defined for container.
Any thoughts?
Thanks.

Your question isn't very clear, it would be good for you to post some code that you have tried already. If I am understanding you correctly you can add parent items easily by extending the object hierarchy, for example:
If you have this:
Ext.create("Ext.panel.Panel", {
xtype: "panel",
title: "Main Window",
items: [{
// carousel code here
}]
});
You can always add another layer in the middle if you need to:
Ext.create("Ext.panel.Panel", {
xtype: "panel",
title: "Main Window",
items: [{
xtype: "panel",
title: "My Carousel",
items: [{
// carousel code here
}]
}]
});
This possibly does not answer your question clearly as the question isn't very clear, if you can update your question with more information and some code to better explain what your trying to achieve, I will update the answer with additional information.

if you would like to add components above a carousel view for example a button you have to position it. Doing this makes the carousel treat it differently and is not used as a card in the carousel.
Altering the example here http://docs-origin.sencha.com/touch/2.4/2.4.1-apidocs/#!/api/Ext.carousel.Carousel to add a button that is always visible is shown in the code below.
Ext.create('Ext.Carousel', {
fullscreen: true,
defaults: {
styleHtmlContent: true
},
items: [
{
xtype: 'button',
text: 'A Button',
top: 10,
left: 10
},
{
html : 'Item 1',
style: 'background-color: #5E99CC'
},
{
html : 'Item 2',
style: 'background-color: #759E60'
},
{
html : 'Item 3'
}
]
});
Notice that the button has top and left configs set. This is the key to this behaviour.
I made a sencha fiddle to help explain.
Good luck.

Extjs Saving Dynamic Tabs and Rendering them back on Page Load, is it possible?

I am adding new tabs dynamically with Extjs.. But is there a way I can save the newly added tabs somewhere(Probably in database), because I have to render all the tabs a user creates dynamically, whenever the user re-visits the page.
I can make tabs, save the state of the tabs in a cookie.. But I know that in order to save the state of a newly created tab, I have to first save the Html(?) snippet of the tab somewhere?
Here is my code:
var tab;
var tabIndex = 0;
var tabArray = [];
Ext.application({
launch: function() {
Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
expires: new Date(new Date().getTime() + (1000 * 60 * 60 * 24 * 7))
}));
Ext.create('Ext.container.Viewport', {
layout: 'absolute',
items: [{
x: 50,
y: 50,
width: 300,
height: 300,
xtype: 'tabpanel',
stateful: true,
stateId: 'tp1',
stateEvents: ['tabchange'],
getState: function() {
return {
activeTab: this.items.findIndex('id',this.getActiveTab().id)
};
},
applyState: function(s) {
this.setActiveTab(s.activeTab);
},
items: [{
id: 'c0',
title: 'Tab One'
}, {
id: 'c1',
title: 'Tab Two'
}, {
id: 'c2',
title: 'Tab Three'
}],
bbar: [
{
text: 'Add Tab',
//region: 'south',
xtype: 'button',
handler: function () {
var tabs = this.up('tabpanel');
tab = tabs.add({
title: 'Tab ',
closable:true,
xtype:'panel',
width: '100%',
height: '100%',
items: []
}).show();
}
}
]
}]
});
}
});
Am I trying to do something unrealistic here? or is it possible somehow to store the newly created tabs and render the whole tabpanel with the newly created tabs as it is on the page load?
I apologize for asking such a broad question :)
Thanks.

I have done a similar thing in the past. This is the design approach we had. Its vague, but we still did it
When you dynamically create a tab and add items(panels/input fields) into it and change the value of these items (say like entering a text in textbox, checking a checkbox) and when you finally hit save, we will extract all the data as JSON.
You need to custom build based on what values you need to save - say the type of the item, value, its child structure and so on.
Then when you want re-render the page, then you use the JSON to build it. It's not easy to build this solution. But, once you are done, its reusable for all the tabs - however dynamic is going to be.
And finally, its definitely possible

Ext.AbstractManager.register(): Registering duplicate id "btnLogout" with this manager

I have did one common view, this view is required in all the pages. so wherever i need, i am calling this view of xtype . Within this common view have some components with defined by id value.
As per requirement depends on pages i need to hide some button from common view again need to show. These activities will come depending on pages. While first launching time screen will come. once i navigating to another page it will show error like Ext.AbstractManager.register(): Registering duplicate id "btnLogout" with this manager.
If i changed componets id value to name value or itemId value. then it will navigate fine but problem is not able to hide and show the buttons because showing undefined sysntax is var a = Ext.getCmp('btnBackID'); console.log(a);, it will be undefined. once the component returns as object, i can do hide show functionality.
Can any one tell how resolve this issue else give me alternate ways to achieve. great appreciate. Thank you. i have given my code below
Common View
Ext.define('abc.view.GlobalNavigationView', {
extend:'Ext.panel.Panel',
alias:'widget.globalNavigationView',
id:'globalNavigationId',
layout: {
type: 'vbox',
align:'stretch'
},
items:
[
{
xtype: 'toolbar',
layout: 'hbox',
flex: 1,
items:
[
{
xtype: 'button',
flex: .1,
text: 'Back',
id: 'btnBackID',
},
{
xtype: 'button',
flex:.1,
id: 'btnSave',
cls: 'saveCls'
},
{
xtype: 'button',
flex:.1,
id: 'btnEmail',
text: 'Email'
},
{
xtype: 'button',
flex:.1,
id: 'btnPrint',
text: 'Print'
},
{
xtype: 'button',
flex:.1,
itemId: 'btnFilter',
text: 'Filter'
},
{
xtype: 'button',
flex:.1,
id: 'btnLogout',
cls: 'logoutCls'
}
]
}
]
});
HomeView1
Ext.define('GulfMark.view.WeeklyHomeView1', {
extend:'Ext.panel.Panel',
alias:'widget.weeklyfcastView',
id:'weeklyfcastId',
layout: 'fit',
items:
[
{
xtype: 'globalNavigationView',
id: 'globalNavigationWeekly1',
flex: 1,
docked:"top",
scrollable:false
},
{
my componets of this view
.........................
}
]
});
HomeView2
Ext.define('GulfMark.view.WeeklyHomeView1', {
extend:'Ext.panel.Panel',
alias:'widget.weeklyfcastView',
id:'weeklyfcastId',
layout: 'fit',
items:
[
{
xtype: 'globalNavigationView',
id: 'globalNavigationWeekly2',
flex: 1,
docked:"top",
scrollable:false
},
{
my componets of this view
-----------------------
}
]
});
Controller Code:
init:function(){
this.control({
'globalNavigationView ':{
click:this.onbtnBackClick,
render: this.onbtnBackrender,
},
'weeklyfcastView':{
show:this.onShowweeklyfcastView,
render:this.onRenderweeklyfcastView
}
});
},
onShowweeklyfcastView: function(){
var btnFilter = Ext.getCmp('btnFilter');
console.log(btnFilter); // if i used components id to name or itemId, here will show undefined
btnFilter.setHidden(true);
//btnFilter .hide();
}

If your view is not a singleton, you cannot give IDs to its components - IDs must be unique, or you get the duplicate id error.
What you really need is some reference to the view from which you are trying to show/hide buttons. When you have that reference, you can use the down method to find your buttons. For example:
var iPanel = // Create new panel here.
iPanel.down('button[text="Email"]').hide();

This code works in EXTJS 6 for multiple buttons in the same view, having the same itemId (not id - ids will throw an error, as noted above)
View:
{
xtype : 'button',
text : 'Save and Come Back Button 1',
itemId : 'saveAndComeBackButton',
handler : 'saveAndComeBack'
},
{
xtype : 'button',
text : 'Save and Come Back Button 2',
itemId : 'saveAndComeBackButton',
handler : 'saveAndComeBack'
},
Controller:
this.__setButtons('#saveAndComeBackButton','disable');
__setButtons: function (buttonItemId,state) {
Ext.Array.forEach(
Ext.ComponentQuery.query(buttonItemId),
function (button){
if (state === 'enable'){
button.enable();
}else{
button.disable();
}
}
);
}

How to do the same without using Ext.getCmp in this code?

This is the code im using and im firing button click event once the window show event is called. this works fine. but how to do the same without using Ext.getCmp
this is the line
Ext.getCmp('recent_refresh').fireEvent('click');
this is the code
Ext.create('widget.window', {
title: 'Activity',
closable: true,
closeAction: 'hide',
width: 250,
height: 300,
bodyBorder: true,
tbar: {
xtype: 'toolbar',
ui: 'plain',
items: [{
iconCls:'refresh',
id: 'recent_refresh',
listeners: {
click: function(){
Ext.Ajax.request({
url: 'control.php',
params: {
'case': '18'
},
success: function(response){
var json = Ext.decode(response.responseText);
}
});
}
}
},
'->',
{
xtype: 'displayfield',
name: 'act_date',
id: 'act_date',
value: new Date(),
formatValue: Ext.util.Format.dateRenderer('Y-m-d')
}]
},
layout:'accordion',
border: false,
items: [ grid1, grid2, grid3 ],
listeners: {
show: function() { Ext.getCmp('recent_refresh').fireEvent('click'); }
}
}).show();
Regards

There are many ways to do this. One way is to make an assignment with the Ext.create call since Ext.create returns such a reference. The app namespace in the example below is a filler since any namespaces you are using are unknown from your text. Once you have the variable reference to the widget, you can get use it to get a reference to the top toolbar and then get a reference to the item you want inside of the toolbar.
Ext.ns('app');
app.activityWin = Ext.create('widget.window', {...}
app.activityWin.getTopToolbar().get('recent_refresh').fireEvent('click');

Use the ref property.. I don't know if it has been carried forward to Ext JS 4, but here's how we do it in Ext Js 3.3
var win = new Ext.Window({
..config..
buttons : [{
text : 'save'
ref : 'saveButton'
}],
listeners : {
show : function(win){
win.saveButton.fireEvent('click'); //saveButton here is the same as used in ref above.
}
}
});
ref can now been used directly and no need to use Ext.getCmp
check the correct usage of ref in your case and implement it..
Cheers.