We Keep Coding

Extjs 4.1 - grid with drag & drop, vertical scroll doesn't work

I have 2 grids on a window which support drag and drop each by himself and also between each other.
I can't get the vertical scroll to work when dragging above the first row in the grid or below the last row in the grid.
currently, i must first scroll all the way down if i want to drag the record to the bottom of the grid.
using containerScroll didn't solve the problem.
Ext.define('MyApp.view.DDFieldsGrid', {
extend: 'Ext.grid.Panel',
xtype: 'ddfieldsgrid',
hideHeaders: true,
multiSelect: true,
autoScroll: true,
markDirty: false,
columns: [
{ dataIndex: 'item', flex: 1 }
],
viewConfig: {
plugins: {
containerScroll: true,
ptype: 'gridviewdragdrop',
ddGroup: 'firstGridDDGroup'
}
}
});
this.mainWin = Ext.create('Ext.window.Window', {
layout: 'centered',
title: 'Blotter Fields',
resizable: false,
closeAction: 'hide',
hidden: true,
shadow: true,
tbar: [{
xtype: 'combo',
fieldLabel: 'Fields Type',
id: 'comboCategories',
editable: false,
queryMode: 'local',
selectOnFocus: true,
forceSelection: true,
iconCls: 'no-icon',
triggerAction: 'all',
store: categoreyItems,
listeners: {
select: function (ele, newValue, oldValue) {
var category = this.valueModels[0].index;
var store = Ext.getStore('availableFields');
store.filterBy(function (record) {
return category == 0 /*All*/ || record.get('category') === category;
}, this);
}
}
}, ' ', {
xtype: 'checkbox',
fieldLabel: 'Show Details field',
margin: '0 10 0 20',
//hidden: this.customizationModel._customizationView.detailsCustomOptions.showDetailsFieldsOption == false,
checked: this.customizationModel._customizationView.detailsCustomOptions.showDetailsFieldsOption,
listeners: {
click: {
fn: this.onShowDetailsField,
scope: this
}
}
}, ' ', {
xtype: 'checkbox',
fieldLabel: 'Show custom fields',
margin: '0 10 0 20',
//hidden: this.customizationModel._customizationView.detailsCustomOptions.showUserCustomFieldsOptions == false,
checked: this.customizationModel._customizationView.detailsCustomOptions.showUserCustomFieldsOptions,
listeners: {
click: {
fn: this.onShowCustomFields,
scope: this
}
}
}],
dockedItems: [
{
xtype: 'toolbar',
flex: 1,
dock: 'bottom',
layout: {
pack: 'end',
type: 'hbox'
},
items: [
{
xtype: 'button',
text: 'Cancel',
listeners: {
click: {
fn: this.onCancelSettings,
scope: this
}
}
},
{
xtype: 'button',
text: 'OK',
listeners: {
click: {
fn: this.onAcceptSettings,
scope: this
}
}
}
]
}
],
items: [{
store: availableFieldsStore,
title: 'Available Fields'
}, {
store: selectedFieldsStore,
title: 'Selected Fields'
}],
layout: {
type: 'hbox',
align: 'stretch'
},
defaults: {
xtype: 'ddfieldsgrid',
height: 200,
margin: 8,
width: 300
}
});

Extjs using formBind: true, not disabling submit button

When I am using formBind: true, it does not seem to (save) and I am not sure why. Any ideas?
title: 'Edit Sessions',
modal: 'true',
items: [
{
xtype: 'form',
bodyPadding: 10,
title: "",
defaults: {
labelWidth: 90,
margin: '0 0 10 0',
anchor: '90%'
},
items: [
{
name: 'title',
xtype: 'textfield',
fieldLabel: 'Title',
allowBlank: false,
},
{
xtype: 'checkboxfield',
name: 'approved',
fieldLabel: 'Approved',
}
]
},
{
xtype: 'container',
padding: '10 10 10 10',
layout: {
type: 'hbox',
align: 'middle',
pack: 'center'
},
items:
[ //Buttons and handlers
{
xtype: 'button',
text: 'Save',
formBind: true,
type: 'submit',
margin: '5 5 5 5',
handler: function (button) {
var form = button.up().up().down('form');
form.updateRecord();
button.up('window').destroy();
}
},
{
xtype: 'button',
text: 'Cancel',
margin: '5 5 5 5',
handler: function (button) {
button.up('window').destroy();
}
}
]
}
]

The formBind only works if the button is in the form.
Working example: https://fiddle.sencha.com/#view/editor&fiddle/1o4t

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)

Difficulty in passing selected row from grid to new window in extjs

I have a grid panel and when the user selects the row and clicks the edit button or dbl clicks the row, I want to send the selected row to the new window. But I am having trouble in sending the data.
Here is my grid panel. (List.js)
Ext.define('MyApp.view.main.List', {
extend: 'Ext.grid.Panel',
xtype: 'mainlist',
require: [ 'MyApp.view.student.StudentForm' ],
title: 'Student Records',
scrollable: true,
margin: 20,
layout: {
type: 'vbox',
align: 'stretch'
},
reference: 'studentGrid',
frame: true,
collapsible: true,
store: 'StudentStore',
collapsible: true,
columns: [
{
text: 'Name',
dataIndex: 'name',
flex: 1
},
{
text: 'Address',
dataIndex: 'address',
flex: 1
},
{
text: 'Phone',
dataIndex: 'phone',
flex: 1
},
{
text: 'Email',
dataIndex: 'email',
flex: 1
},
{
text: 'Faculty',
dataIndex:'faculty',
flex: 1
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
text: 'Add',
iconCls: 'fa fa-plus',
listeners: {
click: 'onAdd'
}
},
{
xtype: 'button',
text: 'Edit',
iconCls: 'fa fa-edit',
id: 'editButton',
listeners: {
click: 'onEdit'
}
},
{
xtype: 'button',
text: 'Delete',
iconCls: 'fa fa-trash-o',
bind: {
disabled: '{ !mainlist.selection }'
},
listeners: {
click: 'onDelete'
}
}]
}
],
// toolbar for our store filter field
tbar: [{
xtype: 'textfield',
fieldLabel: 'Search Student',
emptyText: '...type to filter',
width: 300,
listeners: {
change: 'onSearch'
},
triggers: {
clear: {
cls: 'x-form-clear-trigger',
handler: function(){
this.reset();
}
}
}
}]
});
And this my Controller (MainController.js)
createDialog: function(record)
{
if (record)
{
var form = Ext.create('MyApp.view.student.StudentForm');
form.loadRecord(record);
form.show();
}
Ext.create('MyApp.view.student.StudentForm').show();
},
onEdit: function(button, e, options){
var row = button.up('mainlist').getSelection();
debugger;
this.createDialog(row[0]);
},
And here is the pop up window where the data has to be loaded(StudentForm.js)
Ext.define('MyApp.view.student.StudentForm', {
extend: 'Ext.window.Window',
xtype: 'student-form',
height: 400,
width: 500,
layout: {
type: 'fit'
},
reference: 'form',
title: 'Add Student',
closable: true,
modal: true,
items: [{
xtype: 'form',
id : 'formId',
bodyPadding: 5,
modelValidation : true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'fieldset',
flex: 1,
title: 'Student Information',
layout: 'anchor',
defaultType: 'textfield',
defaults: {
anchor: '100%',
msgTarget: 'side'
},
items: [
{
xtype: 'hiddenfield',
name: 'id',
fieldLabel: 'Label'
},
{
fieldLabel: 'Name',
name: 'name'
},
{
fieldLabel: 'Address',
name: 'address'
},
{
fieldLabel: 'Phone',
name: 'phone'
},
{
fieldLabel: 'Email',
name: 'email'
},
{
xtype: 'combo',
fieldLabel: 'Faculty',
name: 'facultyName',
queryMode: 'local',
displayField: 'facultyName',
valueField: 'facultyName',
store: {
fields: ['facultyName'],
data: [{
facultyName: 'computing'
}, {
facultyName: 'multimedia'
}, {
facultyName: 'networking'
}]
}
}
]
}],
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
layout: {
pack: 'end',
type: 'hbox'
},
items: [
{
xtype: 'button',
text: 'Save',
iconCls: 'fa fa-check',
listeners: {
click: 'onSave'
}
},
{
xtype: 'button',
text: 'Cancel',
iconCls: 'fa fa-times',
listeners: {
click: 'onCancel'
}
}
]
}]
}]
});
What am I missing here?Any suggestions?

It says loadRecord() is not a function
Your MyApp.view.student.StudentForm is not actually a form. It is a window, hence there is no loadRecord method.
Instead of form.loadRecord(record); call form.down('form').loadRecord(record).
Remember, it is worth naming things what they are.

Timefield combobox issue in grid using extjs4

1) Create a grid and add a coulmn of type 'timefield' in grid with renderer of format ('h:i A').
2) Add a row and mke a selection in 'timefield' column, say 4:00 AM.
3) Add another adjecent row and select the same data i.e. 4:00 AM in the dropdown. You will not be able to do this action, and you need to select another time and then come back to the initial selection. It looks to be an ExtJS bug. how to solve this issue.
I have code the following in grid
this.mcmGridPanel = new Ext.grid.GridPanel({ height: 360, width: 680, title: 'Shifts', store: App.mcmAgentShiftStore, multiSelect: true, x: 0, y: 100, columns: [
{ xtype: 'gridcolumn', header: 'Name', width: 120, dataIndex: 'Name',
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{ xtype: 'gridcolumn', header: 'Initials', width: 45, dataIndex: 'Initials',
editor: { xtype: 'textfield' }
},
{ xtype: 'gridcolumn', header: 'Employee Id', width: 75, dataIndex: 'EmployeeId',
editor: {
xtype: 'numberfield',
allowBlank: false
}
},
{ xtype: 'gridcolumn', header: 'Phone#', width: 100, dataIndex: 'MobilePhoneId',
editor: {
//TCS: 12/3/2013 cell phone table modified
xtype: 'combobox',
typeAhead: true,
editable: true,
triggerAction: 'all',
selectionOnTab: true,
// lazyRender: true,
// forceSelection: true,
store: App.mcmAllMobilePhoneStore,
displayField: 'MobileIdentifier',
valueField: 'MobilePhoneId',
value: 'MobilePhoneId',
queryMode: 'local',
queryDelay: 100,
specialkey: function(f, e) {
if(e.getKey() === e.ESC) {
this.hide(); }
},
listeners: {
load: function(store, recs, success) {
if(Ext.typeOf(this.getPicker().loadMask) != "boolean") {
console.log("trying to hide the loadmask");
this.getPicker().loadMask.hide();
}
}
}
},
> renderer: function(value,metaData,record) {
if(value) {
var MobileStore = Ext.getStore( App.mcmAllMobilePhoneStore);
var Record = MobileStore.findRecord('MobilePhoneId', value);
return Record ? Record.get('MobileIdentifier'): record.get('MobileIdentifier');
} else return "";
}//TCS: 12/3/2013 cell phone table modified end*/ },
{ xtype: 'datecolumn', header: 'Start Date', width: 84, dataIndex: 'StartAvailability', format: 'Y-m-d',
editor: {
xtype: 'datefield',
allowBlank: false,
format: 'Y-m-d'
}
},
{ header: 'Start', width: 65, dataIndex: 'StartAvailabilityTime', format: 'H:i',
editor: {
xtype: 'timefield',
id: starttime,
format: 'H:i',
increment: 15,
allowBlank: false
}
},
{ xtype: 'datecolumn', header: 'End Date', width: 84, dataIndex: 'EndAvailability', format: 'Y-m-d',
editor: {
xtype: 'datefield',
allowBlank: false,
format: 'Y-m-d'
}
},
{ header: 'End', width: 65, dataIndex: 'EndAvailabilityTime', format: 'H:i',
editor: {
xtype: 'timefield',
id: endtime,
format: 'H:i',
increment: 15,
allowBlank: false
}
} ], tbar: [
{
text: 'Add',
tooltip: 'Add Shift',
iconCls: 'icon-shift-add',
scope: me,
handler: function() {
var agent = this.mcmAgentCombobox.getValue();
if(agent) {
addShift.call(this, agent);
} else {
App.mcmShowMessageBox({
title: 'Important',
message: 'Please select an agent',
time: 2000
});
}
}
},
{
itemId: 'removeShift',
text: 'Remove',
tooltip: 'Remove Selected Shifts',
iconCls: 'icon-shift-remove',
scope: me,
handler: function() {
this.mcmRemoveShifts();
},
disabled: true
},
{
itemId: 'closeoutShift',
text: 'Closeout',
tooltip: 'Closeout Selected Shifts',
iconCls: 'icon-shift-closeout',
scope: me,
handler: function() {
var selection = this.mcmGridPanel.getSelectionModel().getSelection();
if(selection.length && selection.length > 1) {
App.mcmShowMessageBox({
title: 'Important',
message: 'Please enter a single shift to perform closeout',
time: 2000
});
return;
}
App.mcmCloseoutShift(selection[0]);
},
disabled: true
},
//TCS: 12/3/2013 cell phone table modification
{
text: 'Add Cell Phone',
tooltip: 'Add CellPhone',
iconCls: 'icon-cellphone-add',
scope: this,
handler: function()
{
this.hide;
App.mcmShowMobilePhoneWindow();
}
},
//TCS: 12/3/2013 cell phone table modification end ], plugins: [ this.mcmRowEditing ], viewConfig: {}, listeners: {
scope: me,
beforeedit : function(editor, e) {
editor.down('[#id=starttime]').clearValue();
editor.down('[#id=endtime]').clearValue();
} }
I reset the values before edit. but it not working.