We Keep Coding

How to POST a grid within a form in ExtJS

I have a form that has comboboxes, tagfields, date pickers, etc., and a grid. Each of these elements has a different store. The user is going to make selections from the comboboxes, etc,. and enter values into the grid. Then the values from the grid and other form elements are all sent on a POST to the server. I know how to POST the data from the comboboxes, tagfields, and date pickers. However, I don't know how to send the data in the grid with the form. Here is the form view:
Ext.define('ExtTestApp.view.main.List', {
extend: 'Ext.form.Panel',
xtype: 'cell-editing',
frame: true,
autoScroll: true,
title: 'Record Event',
bodyPadding: 5,
requires: [
'Ext.selection.CellModel',
'ExtTestApp.store.Personnel'
],
layout: 'column',
initComponent: function(){
this.cellEditing = new Ext.grid.plugin.CellEditing({
clicksToEdit: 1
});
Ext.apply(this, {
//width: 550,
fieldDefaults: {
labelAlign: 'left',
labelWidth: 90,
anchor: '100%',
msgTarget: 'side'
},
items: [{
xtype: 'fieldset',
//width: 400,
title: 'Event Information',
//height: 460,
//defaultType: 'textfield',
layout: 'anchor',
defaults: {
anchor: '100%'
},
items: [{
xtype: 'fieldcontainer',
fieldLabel: 'Event',
layout: 'hbox',
defaults: {
hideLabel: 'true'
},
items: [{
xtype: 'combobox',
name: 'eventTypeId',
width: 300,
//flex: 1,
store: {
type: 'events'
},
valueField: 'eventTypeId',
// Template for the dropdown menu.
// Note the use of the "x-list-plain" and "x-boundlist-item" class,
// this is required to make the items selectable.
allowBlank: false
}
]
},
{
xtype: 'container',
layout: 'hbox',
margin: '0 0 5 0',
items: [
{
xtype: 'datefield',
fieldLabel: 'Date',
format: 'Y-m-d',
name: 'startDate',
//msgTarget: 'under', //location of error message, default is tooltip
invalidText: '"{0}" is not a valid date. "{1}" would be a valid date.',
//flex: 1,
emptyText: 'Start',
allowBlank: false
},
{
xtype: 'datefield',
format: 'Y-m-d',
name: 'endDate',
//msgTarget: 'under', //location of error message
invalidText: '"{0}" is not a valid date. "{1}" would be a valid date.',
//flex: 1,
margin: '0 0 0 6',
emptyText: 'End',
allowBlank: false
}
]
}]
},
{
xtype: 'fieldset',
//height: 460,
title: 'Platform Information',
//defaultType: 'textfield',
layout: 'anchor',
defaults: {
anchor: '100%'
},
items: [
{
xtype: 'fieldcontainer',
layout: 'hbox',
fieldLabel: 'Platform',
//combineErrors: true,
defaults: {
hideLabel: 'true'
},
items: [
{
xtype: 'combobox',
name: 'platformId',
store: {
type: 'platforms'
},
valueField: 'platformId',
allowBlank: false
}
]
}
]
},
{
xtype: 'fieldcontainer',
layout: 'hbox',
fieldLabel: 'Software Type(s)',
//combineErrors: true,
defaults: {
hideLabel: 'true'
},
items: [
{
xtype: 'tagfield',
width: 400,
//height: 50,
fieldLabel: 'Software Type(s)',
name: 'softwareTypeIds',
store: {
type: 'softwareTypes'
},
labelTpl: '{softwareName} - {manufacturer}',
valueField: 'softwareTypeId',
allowBlank: false
}
]
},
{
xtype: 'gridpanel',
layout: 'anchor',
defaults: {
anchor: '100%'
},
width: 1300,
//columnWidth: 0.78,
//title: 'Metrics',
plugins: [this.cellEditing],
title: 'Personnel',
store: {
type: 'personnel'
},
columns: [
{ text: 'Name', dataIndex: 'name', editor: 'textfield' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone', flex: 1 }
]
}
],
buttons: [
{
text: 'Save Event',
handler: function() {
var form = this.up('form'); // get the form panel
// if (form.isValid()) { // make sure the form contains valid data before submitting
Ext.Ajax.request({
url: 'api/events/create',
method:'POST',
headers: { 'Content-Type': 'application/json' },
params : Ext.JSON.encode(form.getValues()),
success: function(form, action) {
Ext.Msg.alert('Success', action.result);
},
failure: function(form, action) {
//console.log(form.getForm().getValues());
Ext.Msg.alert('Submission failed', 'Please make sure you selected an item for each required field.', action.result);
}
});
// } else { // display error alert if the data is invalid
// Ext.Msg.alert('Submit Failed', 'Please make sure you have made selections for each required field.')
// }
}
}
]
});
this.callParent();
}
});
var grid = Ext.ComponentQuery.query('grid')[0];
Here is the store for the grid:
Ext.define('ExtTestApp.store.Personnel', {
extend: 'Ext.data.Store',
alias: 'store.personnel',
fields: [
'name', 'email', 'phone'
],
data: { items: [
{ name: 'Jean Luc', email: "jeanluc.picard#enterprise.com", phone: "555-111-1111" },
{ name: 'Worf', email: "worf.moghsson#enterprise.com", phone: "555-222-2222" },
{ name: 'Deanna', email: "deanna.troi#enterprise.com", phone: "555-333-3333" },
{ name: 'Data', email: "mr.data#enterprise.com", phone: "555-444-4444" }
]},
autoLoad: true,
proxy: {
type: 'memory',
api: {
update: 'api/update'
},
reader: {
type: 'json',
rootProperty: 'items'
},
writer: {
type: 'json',
writeAllFields: true,
rootProperty: 'items'
}
}
});

Ideally, you would need to create a custom "grid field" so that the grid data is picked up on form submit like any other field.
You can also use this workaround: in the "Save Event" button handler, dig out the grid store and fish data out of it:
var gridData = [];
form.down('gridpanel').store.each(function(r) {
gridData.push(r.getData());
});
Then get the rest of the form data and put the grid data into it:
var formData = form.getValues();
formData.gridData = gridData;
Finally, include it all in your AJAX call:
params: Ext.JSON.encode(formData)

Adding Drop down menu in the window heder using extjs4?

I need to add drop down menu when I click the top right icon on the window header display it like Google Chrome browser menu. Adding Drop down menu in the window header using extjs4.
Here is the code, but cannot able to see the menu.
code here:
Hi I need this looks like google chrome browser menu. i cannot see when i click the menu on window.
Ext.require([
'Ext.form.*'
]);
Ext.onReady(function() {
var win;
var options = [
{"name":"AAdvantage ",},
{"name":"PNR",},
{"name":"Bag File",}
];
Ext.regModel('Options', {
fields: [
{type: 'string', name: 'name'}
]
});
var store = Ext.create('Ext.data.Store', {
model: 'Options',
data: options
});
var menu = Ext.create('Ext.menu.Menu', {
id: 'mainMenu',
items: [
{
text: 'Search Customer',
checked: true
}, '-',
{
text: 'Customer Information',
checked: true
}, '-', {
text: 'Travel History',
checked: true
}, '-', {
text: 'Resolution'
}, '-', {
text: 'Future OD'
}, '-', {
text: 'History OD'
},'-', {
text: 'Help',
checked: true
}, '-', {
text: 'Upload Document',
checked: true
}
]
});
function showContactForm() {
if (!win) {
var form = Ext.widget('form', {
layout: {
type: 'vbox',
align: 'stretch'
},
border: false,
bodyPadding: 10,
fieldDefaults: {
labelSeparator: "",
labelAlign: 'top',
labelWidth: 100,
labelStyle: 'font-weight:bold'
},
defaults: {
margins: '0 0 10 0'
},
items: [{
xtype: 'fieldcontainer',
fieldLabel: 'Search Customer',
labelStyle: 'font-weight:bold;padding:0',
layout: 'hbox',
defaultType: 'textfield',
fieldDefaults: {
labelAlign: 'top'
},
},
{
xtype: 'combobox',
fieldLabel: 'Select Option',
name: 'suit_options_id',
id: 'ComboboxSuitOptions',
typeAhead:false,
labelAlign:'top',
labelSeparator: "",
store: store,
editable: false,
displayField: 'name',
hiddenName: 'id',
valueField: 'id',
queryMode: 'local',
listeners: {
change: function(combo) {
console.log(combo.getValue());
}
}
},
{
xtype: 'textfield',
fieldLabel: 'AAdvantage Number',
allowBlank: false
},
{
xtype: 'button',
text : 'Search',
handler: function() {
}
}]
});
win = Ext.widget('window', {
title: '<center>FCR</center>',
closeAction: 'hide',
width: 200,
height: 300,
minHeight: 300,
layout: 'fit',
closable: false,
tools: [
{ type:'left',
menu: menu
}
],
resizable: true,
modal: true,
items: form
});
}
win.show();
}
showContactForm();
});

The code does what it means:
tools: [
{ type:'left',
menu: menu
}
],
This code generates your left icon in the top window see the doc, but ool`has no property menu, so your code cannot work.
Define a handler function that shows your menu (this code works, but there is some tuning necessary to align the menu on the button) :
tools: [
{ type:'left',
handler: function(){menu.show()}
}
],
There are also some other problems with your code.
I get an warning Ext.regModel has been deprecated. Models can now be created by extending Ext.data.Model: Ext.define("MyModel", {extend: "Ext.data.Model", fields: []});.
Also, you should prefer use the launch method of Ext.app.Application to start rather than Ext.onReady which is ExtJS version 3

EXT JS: How to load selected grid row into window?

User Form
Ext.define('Patients.view.Form',{
extend: 'Ext.form.Panel',
xtype: 'patients_form',
title: 'Patient Info',
defaultType: 'textfield',
items: [{
fieldLabel:'Name',
name: 'name',
allowBlank: false,
},{
fieldLabel: 'Age',
name: 'age',
allowBlank: false
},{
fieldLabel: 'Phone',
name: 'phnumber',
allowBlank: 'false'
}],
dockedItems: [{
xtype:'toolbar',
dock: 'bottom',
items:[{
iconCls: 'icon-user-add',
text: 'Add',
scope: this,
itemId: 'addButton'
},{
iconCls: 'icon-reset',
itemId:'resetButton',
text: 'Reset',
scope: this
},{
iconCls: 'icon-save',
itemId: 'savebutton',
text: 'Save',
disabled: true,
scope: this
}]
}]
});
This is my grid which displays user input. On row double click a window launches but its empty. How do i display the information from the selected row in the grid in the window?
Ext.define('Patients.view.Grid',{
extend: 'Ext.grid.Panel',
store:'PatientsInfo',
xtype: 'patients_grid',
selType: 'rowmodel',
listeners:{
itemdblclick: function(record){
var win = Ext.create("Ext.Window",{
title: 'Patients Window',
height: 160,
width: 160,
})
win.show();
}
},
columns: [{
text: 'Name',
sortable: true,
resizable: false,
draggable: false,
hideable: false,
dataIndex: 'name'
},{
text: 'Age',
sortable: true,
resizable: false,
draggable: false,
hideable: false,
dataIndex: 'age'
},{
text: 'Phone Number',
sortable: false,
resizable: false,
draggable: false,
hideable: false,
dataIndex: 'phnumber'
}]
});
Thanks in advance!

you need to add refs to window objects
items: [{
fieldLabel:'Name',
name: 'name',
allowBlank: false,
ref : '../name'
},{
fieldLabel: 'Age',
name: 'age',
allowBlank: false,
ref : '../age'
},{
fieldLabel: 'Phone',
name: 'phnumber',
allowBlank: 'false',
ref : '../phnumber'
}],
and set data to them when you show window.
itemdblclick: function(record){
var win = Ext.create("Ext.Window",{
title: 'Patients Window',
height: 160,
width: 160,
})
win.name = record.get('name');
win.age = record.get('age');
win.prohne = record.get('phone');
win.show();
}

Add a form property to Grid as a reference to form, and also a showForm() function that when a user click on Add or dblClick on row's grid, you call it with id of selected row or null(when click add). showForm() checks the form reference, if it's null, create an instance of form and call this.form.loadFormData(id)
Ext.define('Patients.view.Grid',{
extend: 'Ext.grid.Panel',
store:'PatientsInfo',
xtype: 'patients_grid',
selType: 'rowmodel',
listeners:{
itemdblclick: function(record){
var win = Ext.create("Ext.Window",{
title: 'Patients Window',
height: 160,
width: 160,
})
win.show();
}
},
form:null,
showForm:function(id){
if(!form) this.form = new Patients.view.Form();
this.form.loadFormData(id);
},
//columns:....
and in form in loadFormData() you make a decision depend on id. if it is null create an instance of Model and load it, else retrieve record(with all your desire fields) and load it.
Ext.define('Patients.view.Form',{
extend: 'Ext.form.Panel',
xtype: 'patients_form',
title: 'Patient Info',
defaultType: 'textfield',
items: [{
fieldLabel:'Name',
name: 'name',
allowBlank: false,
},{
fieldLabel: 'Age',
name: 'age',
allowBlank: false
},{
fieldLabel: 'Phone',
name: 'phnumber',
allowBlank: 'false'
}],
// docked items and else...
loadFormData:function(id){
var me = this.
if(!id){
var record = new Patients.model.User();
this.loadRecord(record);
}
else{
var record = Patients.model.User.load(id,{
callback:function(record){
me.loadRecord(record);
var win = Ext.view.Window({
items:[me],
});
win.show();
}
}
}
}
Ext.data.Model.load() is static method.
Finally you create a window and add the form to it and call show()

File upload ExtJS 4

I have this field:
{
xtype: 'filefield',
labelAlign: 'top',
id: 'fileAllegato',
hidden: true,
margin: '0 15 5 10',
fieldLabel: 'Allegato',
allowBlank: false,
blankText:'Il campo &egrave obbligatorio!',
typeAhead: true,
selectOnFocus: true,
anchor: '100%',
buttonText: 'Allega'
}
When I load the file, I want to save it in db. The field does not belong to a form and, therefore, I can not do the submit. How can I do?

You can create a dummy form (without even displaying it). Something like
var f = Ext.create('Ext.form.Panel', {
items: [ your filefield item ]
})
And then do submit.

items: [{
xtype: 'filefield',
name: 'file',
fieldLabel: 'File',
labelWidth: 50,
anchor: '100%',
buttonText: 'Select File...'
}],
Live demo is here

Extjs getting the `formpanel` that is created dynamically from button click

I have ExtJS View-Port panel, that contain center panel, that contain tablpanel, in which I have added gridpanel in one tab, on this I have put Add Person button in tbar of , that will add a new tab of a formpanel, in its Reset button, I am not able to access Form to reset it.
Do any body have faced same issue?
Please help how to get it working.
Ext.onReady(function() {
// Ext.get(document.body, true).toggleClass('xtheme-gray');
var myBorderPanel = new Ext.Viewport({
title: 'Software Releases',
// renderTo: document.body,
renderTo: Ext.getBody(),
layout: 'border',
id: 'main',
items: [{
title: 'Center Region',
region: 'center', // center region is required, no width/height specified
tbar: [{
text: 'Add person', // only when user have write priovilege.
handler: function() {
var tabpanel = Ext.getCmp('main').findById('tabs');
var wtab = tabpanel.add({
// // var addrelease_win = new Ext.Window({
url: 'reledit-submit.json',
id: 'addform0',
// height: 300, width: 400,
layout: 'form',
frame: true,
title: 'Add New Release',
closable: true,
items: [{
xtype: 'textfield',
fieldLabel: 'Name'
}],
buttons: [{
text: 'Save',
scope: wtab,
handler: function() {
wtab.getForm().submit({
success: function(f, a) {
Ext.Msg.alert('Success', 'It worked');
},
failure: function(f, a) {
Ext.msg.alert('Warnning', 'Error');
}
});
}
}, {
text: 'Reset',
scope: wtab,
handler: function() {
// Ext.getCmp('addform0').getForm().reset();
// tabpanel.getActiveTab.reset();
// Ext.getCmp('main').findById('addform').getForm().reset();
// this.getForm().reset();
// this.getForm().reset();
// Ext.Msg.alert('sdfsd', 'asdfsd ' + Ext.getCmp('addform0').getValue() + ' sdfsd');
this.findById('addform0').getForm().reset();
// Ext.Msg.alert('sdfsd', 'asdfsd ');
}
}]
});
// addrelease_win.show();
tabpanel.activate(tabpanel.items.length - 1);
}
}],
xtype: 'tabpanel',
id: 'tabs',
activeTab: 0,
items: [{
title: 'Data',
xtype: 'editorgrid',
store: store,
stripeRows: true,
// autoExpandColumn: 'title',
columns: [{
header: "Name",
dataIndex: "name",
width: 50,
sortable: true
}, {
header: "DOB",
dataIndex: "dob",
sortable: true
}]
}],
margins: '5 5 0 0',
})
})
});

Doesn't wtab.getForm().reset(); work?
If not, use this.ownerCt to get to the buttons container and then just walk up the chain until you get to a point where you can access the form.
UPDATE
The real problem is that its a Panel with a form layout that is created and not a FormsPanel.
Change layout:'form' into xtype:'form' and .getForm() should work.