Saving data entered in extJS textbox - extjs

I have made textboxes in ExtJS through which I will be taking input for an ID and a name. I want to use these values(ID and name) in some other classes. So, I want to save these values somewhere(preferably in a string) so that they can be used later.
Please can someone advise me on how to do that.
function textBoxTab() {
var simple = new Ext.FormPanel({
labelWidth: 75,
frame: true,
title: 'TAB_DIM',
bodyStyle: 'padding:5px 5px 0',
width: 350,
defaults: {
width: 230
},
defaultType: 'textfield',
items: [{
xtype: 'textfield',
name: 'Module_id',
fieldLabel: 'Module_id',
allowBlank: false // requires a non-empty value
}, {
xtype: 'textfield',
name: 'Module_desc',
fieldLabel: 'Module_desc',
allowBlank: false // requires a non-empty value
}],
buttons: [{
text: 'Cancel',
handler: function() {
this.up('form').getForm().reset();
}
}, {
text: 'Submit',
handler: function() {
var form = this.up('form').getForm();
form.submit({
clientValidation: true,
url: 'save.txt',
success: function() {
Ext.Msg.alert('saved');
},
failure: function(form, action) {}
});
if (form.isValid()) {
//Ext.Msg.alert('Submitted Values', form.getValues(true));
this.up('form').getForm().submit();
}
}
}]
});
simple.render(document.body);
}
I have tried this "url:'save.txt" thing but it is not working.
Please help, thanks in advance.

The best way is to store them in a model, and have a controller manage your views and models.
There is several guide on how to architect your ExtJS application using MVC (model-view-controller) :
http://docs.sencha.com/extjs/4.2.1/#!/guide/application_architecture
http://docs.sencha.com/extjs/4.2.1/#!/guide/mvc_pt1
http://docs.sencha.com/extjs/4.2.1/#!/guide/mvc_pt2
http://docs.sencha.com/extjs/4.2.1/#!/guide/mvc_pt3
(The previous links are for ExtJS v4)

Related

ExtJS Use same window for editing and adding a record

I have my ExtJS 4.2.1 MVC Application.
Inside my app, I have a grid with a toolbar. The toolbar has 2 buttons, "Add New" and "Edit Record".
Inside my Controller.js I listen for my toolbar buttons click events.
this.control({
'toolbar #newRecord': {
click: this.addRecord
},
'toolbar #editRecord': {
click: this.editRecord
},
'[xtype=editshiftcode] button[action=commit]': {
click: this.saveRecord // here I have to add or edit
}
}
Then I have Window that I want to use for editing and adding records:
Ext.define('App.view.EditShiftCode', {
extend: 'Ext.window.Window',
alias: 'widget.editshiftcode',
height: 250,
width: 550,
title: 'Add / Edit Shift',
modal: true,
resizable: false,
layout: 'fit',
glyph: Glyphs.PENCIL,
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [{
xtype: 'container',
//height: 175,
layout: {
type: 'hbox',
align: 'strech'
},
items: [{
xtype: 'form',
bodyPadding: 10,
autoScroll: false,
itemId: 'editForm',
defaults: { // defaults are applied to items, not the container
allowBlank: false,
allowOnlyWhitespace: false,
msgTarget: 'side',
xtype: 'textfield'
},
items: [
{
xtype: 'textfield',
name: 'ShiftCode',
fieldLabel: 'Code'
},
{
xtype: 'textfield',
name: 'Description',
fieldLabel: 'Description'
},
{
xtype: 'hiddenfield',
name: 'ShiftType'
},
{
xtype: 'hiddenfield',
name: 'ShiftTypeId'
},
{
xtype: 'textfield',
name: 'Hours',
fieldLabel: 'Hours per Day'
},
{
xtype: 'colorcombo',
name: 'ColorHex',
fieldLabel: 'Color'
},
{
xtype: 'checkbox',
fieldLabel: 'Active',
name: 'IsActive',
}
],
}]
}],
buttons: [
{
text: 'OK',
action: 'commit',
glyph: Glyphs.SAVE
},
{
text: 'Cancel',
action: 'reject',
glyph: Glyphs.CANCEL
}]
});
me.callParent(arguments);
},
});
My editRecord function is:
editRecord: function (button, e, options) {
var me = this;
var window = Ext.create('App.view.EditShiftCode');
window.show();
},
My addRecord function is:
addRecord: function (button, e, options) {
var me = this;
var window = Ext.create('App.view.EditShiftCode');
window.show();
},
My saveRecord function is:
saveRecord: function (button, e, options) {
// here i need to know what operation im going to perform.
// if Im going to edit then I have to update my form record to my store record
// if im going to add then I need to add a new item to my store.
}
Is this correct? To use the same function to perform 2 different actions? And if so, how can I know what action am I going to perform and how to do it?
Thanks
This way always worked for me:
User selects a record in the grid
User clicks "Edit record"
I use loadRecord to load the selected record in the form
When he clicks OK I call updateRecord
If user clicks "Add record" I create a new blank record and go to step 3
If he clicks OK after adding record, I just add the new record to the grid - you can easily know if the record is new or existing by checking phantom flag. So if record.phantom === true then it is new.

ExtJS 4.2 - Bind Date Picker to Grid - Newbie Q

I am new to ExtJS 4 and struggling at times with the learning curve. I have followed the documentation on sencha's site for MVC concept for basic structure of my app, however I am having difficulty determining where/how to implement certain components/handlers/listeners as I don't quite have the feel for this frame work yet.
So, here is my question.... (Yes I did look at other posts on SO but I think at this point I am too stupid to identify and apply what similar posters may have come accross to solve my issues)
How do I bind a date field in my grid to the date picker date that is selected and vice versa? If I select a date in my date picker I would like to have my grid load relevant rows from my db. If I select a row in my grid I would like to see the date picker reflect the date in the selected row.
Can someone give me a narrative of the approach i should be taking? I have seen some code examples but I don't clearly see an obvious preferred method or the way it should be done. If there is a link someone can give me to look at I will be happy to study.
This is my first post on SO so please forgive me for any etiquette I am lacking as well as other annoying things. Thanks in advance!
Store:
Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
model: 'AM.model.User',
autoLoad: true,
autoSync:true,
pageSize:50,
proxy:
{
type: 'ajax',
api:
{
read: 'http://192.168.0.103/testit/dao_2.cfc?method=getContent',
update: 'http://192.168.0.103/testit/dao_2-post.cfc?method=postContent'
},
reader:
{
type: 'json',
root: 'data',
successProperty: 'success',
totalProperty : 'dataset'
}}
});
model:
Ext.define('AM.model.User', {
extend: 'Ext.data.Model',
fields: [
{name: 'message_id',type: 'textfield'},
{name: 'recip_email',type: 'textfield'},
{name: 'unix_time_stamp',type:'datefield'}
]
});
View:
Ext.define('AM.view.user.List' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',
title: 'All Users',
store: 'Users',
plugins:[Ext.create('Ext.grid.plugin.RowEditing', {clicksToEdit: 1})],
dockedItems: [{ xtype: 'pagingtoolbar',
store: 'Users',
dock: 'bottom',
displayMsg: 'Displaying Records {0} - {1} of {2}',
displayInfo: true}],
initComponent: function() {
this.columns = [
Ext.create('Ext.grid.RowNumberer',
{
resizable: true,
resizeHandles:'all',
align: 'center',
minWidth: 35,
maxWidth:50
}),
{
header: 'Name',
dataIndex: 'message_id',
flex: 1,
editor:'textfield',
allowBlank: false,
menuDisabled:true
},
{
header: 'Email',
dataIndex: 'recip_email',
flex: 1,
editor:'textfield',
allowBlank: false,
menuDisabled:true
},
{
header: 'Date Time',
dataIndex: 'unix_time_stamp',
width: 120,
menuDisabled:true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
field:{ xtype:'datefield',
autoSync:true,
allowBlank:false,
editor: new Ext.form.DateField(
{format: 'm/d/y'}) }
}];
this.callParent(arguments);
},
});
Viewport:
Ext.Loader.setConfig({enabled:true});
// This array is for testing.
dateArray = ["12/14/2013","12/16/2013","12/18/2013","12/20/2013"];
Ext.application({
requires: ['Ext.container.Viewport'],
name: 'AM',
appFolder: 'app',
controllers: ['Users'],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items:
[
{
region: 'center',
//layout:'fit',
title:'The Title',
xtype: 'tabpanel', // TabPanel itself has no title
activeTab: 0, // First tab active by default
items:
[{
xtype: 'userlist',
listeners:
{
select: function(selModel, record, index, options)
{
// do something with the selected date
// Ext.Msg.alert(record.data.message_id, record.data.recip_email +'<br> ' + record.data.unix_time_stamp);
}
}
}]
},
{
region: 'west',
layout:'fit',
xtype: 'tabpanel',
activetab:0,
collapsible:false,
split: false,
title: 'The Title',
width:178,
maxWidth:400,
height: 100,
minHeight: 100,
items:
[
{
title: 'Tab 1',
xtype:'panel',
items:
[{
xtype: 'datepicker',
title: 'mydate',
minDate: new Date('12/15/2013'),
maxDate: new Date(),
// Disable dates is set to invert dates in array
disabledDates:["^(?!"+dateArray.join("|")+").*$"],
// disabledDates:["^("+dateArray.join("|")+").*$"],
handler: function(picker, date)
{
// do something with the selected date
Ext.Msg.alert('date picker example in init2.js');
}
}]
},
{
title: 'Tab 2',
html: 'ers may be added dynamically - Others may be added dynamically',
}
]
}
]
});
}
});
Update to Datepicker in Viewport:
One additional note is that i notice a property attribute in the JSON packet that has the date included even without making you suggested changes to the store. I notice there may be a bug in the link you provided?? If i set to false or remove it altogether from my store it has same behavior and is included in my JSON packet.
Do I need to encode the url also? when I click on a row in my grid and hit the update button i recive the grid row on my server side with what appears to be already url encoded by extjs perhaps?
Ext.Loader.setConfig({enabled:true});
// This array is for testing.
dateArray = ["12/14/2013","12/16/2013","12/18/2013","12/20/2013"];
Ext.application({
requires: ['Ext.container.Viewport'],
name: 'AM',
appFolder: 'app',
controllers: ['Users'],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items:
[
{
region: 'center',
//layout:'fit',
title:'The Title',
xtype: 'tabpanel', // TabPanel itself has no title
activeTab: 0, // First tab active by default
items:
[{
xtype: 'userlist',
listeners:
{
select: function(selModel, record, index, options)
{
// do something with the selected date
// Ext.Msg.alert(record.data.message_id, record.data.recip_email +'<br> ' + record.data.unix_time_stamp);
}
}
}]
},
{
region: 'west',
layout:'fit',
xtype: 'tabpanel',
activetab:0,
collapsible:false,
split: false,
title: 'The Title',
width:178,
maxWidth:400,
height: 100,
minHeight: 100,
items:
[
{
title: 'Tab 1',
xtype:'panel',
items:
[{
xtype: 'datepicker',
minDate: new Date('12/15/2013'),
maxDate: new Date(),
// Disable dates is set to invert dates in array
disabledDates:["^(?!"+dateArray.join("|")+").*$"],
// disabledDates:["^("+dateArray.join("|")+").*$"],
handler: function(picker, date)
{
// do something with the selected date
// Ext.Msg.alert('date picker example in init2.js' + '<br>' + Ext.Date.format(date,'m/d/Y'));
console.log('date picker example in init2.js' + Ext.Date.format(date,'m/d/Y'));
// get store by unique storeId
var store = Ext.getStore('Users');
// clear current filters
store.clearFilter(true);
// filter store
store.filter("unix_time_stamp", Ext.Date.format(date,'m/d/Y'));
// store.proxy.extraParams = { key:'test'};
store.load();
}
}]
},
{
title: 'Tab 2',
html: 'ers may be added dynamically - Others may be added dynamically',
}
]
}
]
});
}
});
If you want to filter records displayed in grid by selected date in date picker on the server side try to filter grid's store.
In your store configuration you need to set remoteFilter config attribute to true. Then store proxy will automatically add filter params into store load data requests. Also if you have only one instance of this store, add to configuration unique storeId.
In your datepicker handler you need set store filter to selected date:
handler: function(picker, date)
{
// get store by unique storeId
var store = Ext.getStore('storeId');
// clear current filters
store.clearFilter(true);
// filter store
store.filter("unix_time_stamp", date);
}
Then on server side you need to parse and process filter param.

How to get form on toolbar in gridpanel Extjs

I have tbar in grid panel. My example code like
tbar:[
{
xtype: 'form',
items: [{
xtype: 'filefield',
name: 'filefor',
labelWidth: 50,
allowBlank: false,
buttonConfig: {
text: 'up...'
}
}]
}
,{
text: 'add',
handler:function(){
var form = this.up('form').getForm(); // not working
form.submit({}); // not working
}
}
]
I can't get my form to submit. How can i do that thanks so much :).
The form is sibling of the add button. you may want to use .prev instead of .up to access the form
Here is the snippet that works
Ext.require([
'Ext.form.*',
'Ext.tip.*']);
Ext.onReady(function () {
Ext.QuickTips.init();
var f = Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
bodyStyle: 'padding: 5px 5px 0 5px;',
defaults: {
xtype: 'textfield',
anchor: '100%',
},
html:'text',
tbar: [{
xtype: 'form',
items: [{
xtype: 'filefield',
name: 'filefor',
labelWidth: 50,
allowBlank: false,
buttonConfig: {
text: 'up...'
}
}]
}, {
text: 'add',
handler: function () {
//var form = this.prev('form').getForm(); // working at extjs4.0.2a
var form =this.ownerCt.down('form').getForm();// working at extjs 4.2.0
form.submit({});
}
}]
});
});
For a live demo, here it is the jsfiddle link .
var form = this.up('form').getForm(); // not working
form.submit({}); // not working
change to:
this.ownerCt.down('form').getForm();

Unable to get callback response in form submit

I'm going crazy. I've read forum, questions, answers, no way to get callback response!!
My code:
var myFormTest = new Ext.form.FormPanel({
renderTo: 'divAllegati',
width: 500,
title: 'Allegati',
bodyPadding: '10 10 0',
standardSubmit: true,
items: [{
xtype: 'textfield',
fieldLabel: 'Name',
name: 'ciao',
value: 'ciao'
},{
xtype: 'filefield',
id: 'form-file',
emptyText: 'Seleziona un file',
fieldLabel: 'Allegato',
name: 'photo-path',
buttonText: '',
buttonConfig: {
iconCls: 'upload-icon'
}
}],
buttons: [{
text: 'Save',
handler: function(){
if (myFormTest.getForm().isValid()) {
myFormTest.getForm().submit({
url: '/uploadAllegati',
waitMsg: 'Caricamento allegati...',
success: function (form, action) {
Ext.Msg.alert('Success');
},
failure: function (form, action) {
Ext.Msg.alert('Failure');
}
});
}
}
}]
});
No way to get success or failure!!
My server send back this:
ResponseInfo.ResponseNo := 200;
ResponseInfo.ContentType := 'text/html';
ResponseInfo.ContentText := '{success:true}';
But all I have as response, is a blank page with
{success:true}
No message, no alert, no callback....
Please help, really going crazy!
standardSubmit: false,//true, <---------
Solved with standardSubmit: false
Sometimes, easy thing are invisible :D
I tried any way to solve my problem, changed my server in any way, but I didn't find the right answer.
Thanks Vlad!

Synchronous (old way) Ext.form.Panel submitting

I need to submit Ext.form.Panel instance in old way, without any AJAX stuff. I found a few solutions using standardSubmit: true parameter. I use it like this:
Ext.define('MyForm', {
id: 'myform',
extend: 'Ext.form.Panel',
url: '/some/url/'
standardSubmit: true,
...
buttons: {
...
handler: function () {
Ext.getCmp('myform').getForm().submit();
}
}
})
Clicking submit button leads to No URL specified error. I tried passing different params combinations in submit method but all I get is a lot of weird errors. Could someone share a working example please?
Here what the docs for Ext.form.Panel says
If subclassing FormPanel, any configuration options for the BasicForm must be applied to the initialConfig property of the FormPanel
So far, the code listed above, should look like this
Ext.define('MyForm', {
extend: 'Ext.form.Panel',
...
initComponent: function() {
var me = this
Ext.apply(me.initialConfig, {
url: '/some/url',
standardSubmit: true,
method: 'GET'
})
...
me.buttons = {
...
text: 'Submit',
handler: function () {
me.getForm().submit();
}
}
me.callParent()
}
})
Definitely not obvious. But it solves the problem.
It works! I've seeked for it for almost one week! The code of Radagast works! No other codes but ext-407-gpl.
var login_form = Ext.create('Ext.form.Panel', {
frame:true,
title: '<?php echo $this->escape($this->message); ?>',
url: '<?php echo $this->baseUrl ?>/auth/login',
standardSubmit: true,
bodyStyle:'padding:5px 5px 0',
width: 350,
fieldDefaults: {
msgTarget: 'side',
labelWidth: 75
},
defaultType: 'textfield',
defaults: {
anchor: '100%'
},
items: [{
fieldLabel: 'login',
name: 'login_id',
allowBlank:false
},{
fieldLabel: 'password',
name: 'passwd',
inputType: 'password'
}],
buttons: [{
text: 'submit',
type: 'submit',
handler: function() { this.up('form').getForm().submit(); }
}, {
text: 'reset',
type: 'reset',
handler: function() { this.up('form').getForm().reset(); }
}]
});

Resources