We Keep Coding

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

Clearing Search Box on the click of X button which is inside it using extjs

Clearing Search Box on the click of X button which is inside it using extjs . It should also have mouse over states. Can anyone please help with the code or how to proceed. Any help would be appreciated.
Below is the code in which i want to add the functionality :-
var tools = [{
xtype: 'label',
id: 'search-filter-label',
text: 'Search'
}, ' ', {
xtype: 'textfield',
id: 'search-filter',
selectOnFocus: true,
width: 100,
listeners: {
'render': {fn:function(){
Ext.getCmp('search-filter').getEl().on('keyup', function(){
this.filter();
}, this, {buffer:50});
}, scope:this}
}
}];

check out these links:
How to put X inside textfield to clear text in extjs
http://www.sencha.com/forum/showthread.php?132775-Ext.ux.form.field.ClearButton-Small-clear-button-icon-over-field

check out these link:
Code: learnsomethings.com/fcps_checks/js/app.js
Working Example: learnsomethings.com/fcps_checks/index.html

Sproutcore menu

I'm starting to learn sproutcore(v1.7.1.beta). I am very concerned about the issues of proper implementation some things...one of them is main menu.
What the right way to do that?
I think I need to change state if menu item has been clicked, right? I tried to do it with SC.TemplateCollectionView, but can't understand, how to determine what item have been clicked?
My CollectionView:
App.MainMenuItemView = SC.TemplateCollectionView.extend({
contentBinding: 'App.mainMenuController',
mouseUp: function(){
//
}
});

You want to use
SC.SegmentedView. Something like
topNav: SC.SegmentedView.extend({
classNames: ['top-nav'],
items: [
{
title: "App.title1".loc(),
value: 1,
action: 'action1'
},
{
title: "App.title2".loc(),
value: 2,
action: 'action2'
},
....
],
itemTitleKey: 'title',
itemValueKey: 'value',
itemWidthKey: '85',
itemActionKey: 'action',
valueBinding: 'Binding to current tab value'
})
You can specify an icon via itemIconKey....
Or just roll your own custom SC.View.

Sencha Touch forms not usable when created with Ext.create

I have this:
my.Settings = {
id: 'settings',
xtype: 'panel',
title: 'Settings',
iconCls: 'settings',
layout: 'card',
items:[
my.form1,
my.form2
]
};
When my.form1 is a config object, the form is visible and clickable (inputs allow entry, selects bring up dropdown options, etc.).
However, when I try to use Ext.define and Ext.create, the form appears visually, but nothing is selectable. If I use a tabpanel, the tabs aren't clickable, and on forms inputs won't focus or bring up the keyboard, and don't seem to respond to input at all.
Here's how I tried it:
Ext.define('my.form1', {
extend: 'Ext.form.Panel'
config:{...}
}
...
items: [
Ext.create('my.form1',{id: 'myForm1'})
]
What about the second method causes the form to break? I'm trying to move toward using require and Ext.create for dynamic loading, but I can't do this if I can't get the simplest case working.

did you set the current active item? Because you use the card layout:
var panel = Ext.create('Ext.Panel', {
layout: 'card',
items: [
{
html: "First Item"
},
{
html: "Second Item"
},
{
html: "Third Item"
},
{
html: "Fourth Item"
}
]
});
// here we set the active item to show on the screen
panel.getLayout().setActiveItem(1);
See http://docs.sencha.com/touch/2-0/#!/api/Ext.layout.Card for more information.

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.