We Keep Coding

ExtJS4 - Tooltip not displaying column value

I'm trying to write a tooltip that's specific for each column in a grid.
My current implementation is failing to pick up the value of the record that's being hovered over. How do I reference the specific column/row value of the row entry?
fiddle
Code
Ext.onReady(function() {
var trackStore = new Ext.data.Store({
storeId: 'soundCloudStore',
proxy: {
type: 'memory',
data: [
{
title: 'Test', duration: '3434', genre: 'stuff', created_at: '2011/06/18', id: '1'
}
]
},
fields:['duration', 'genre', 'created_at', 'title', 'id']
});
trackStore.load(
function() {
Ext.create('Ext.grid.Panel', {
title: 'Tracks',
store: trackStore,
stripeRows: false,
columns: [
{
header: 'Title',
dataIndex: 'title'
},
{ header: 'Duration', dataIndex: 'duration' },
{ header: 'Genre', dataIndex: 'genre' },
{ header: 'Created At', dataIndex: 'created_at'}
],
height: 200,
width: 475,
renderTo: Ext.getBody(),
listeners: {
afterrender: function( )
{
view = this.getView();
view.tip = Ext.create('Ext.tip.ToolTip', {
target: view.el,
delegate: view.itemSelector,
trackMouse: true,
renderTo: Ext.getBody(),
listeners: {
beforeshow: function updateTipBody(tip) {
tip.update(this.data.title);
}
}
});
}
}
});
});
});
Error
Uncaught TypeError: Cannot read property 'title' of undefined

You could do it like this,
use the event "viewready" instead "afterrender" :
listeners: {
viewready: function(grid) {
var view = this.getView();
// record the current cellIndex
grid.mon(view, {
uievent: function(type, view, cell, recordIndex, cellIndex, e) {
grid.cellIndex = cellIndex;
grid.recordIndex = recordIndex;
}
});
grid.tip = Ext.create('Ext.tip.ToolTip', {
target: view.el,
delegate: '.x-grid-cell',
trackMouse: true,
renderTo: Ext.getBody(),
listeners: {
beforeshow: function updateTipBody(tip) {
console.log(grid.cellIndex);
if (!Ext.isEmpty(grid.cellIndex) && grid.cellIndex !== -1) {
header = grid.headerCt.getGridColumns()[grid.cellIndex];
tip.update(grid.getStore().getAt(grid.recordIndex).get(header.dataIndex));
}
}
}
});
}
}

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)

Bind Ext form data into GridPanel in ExtJS

I had created a demo page using ExtJS for the first time.
I have created the .JS file as below.
Ext.require([
//'Ext.form.*',
//'Ext.layout.container.Column',
//'Ext.tab.Panel'
'*'
]);
Ext.onReady(function() {
Ext.QuickTips.init();
var bd = Ext.getBody();
var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';
var simple = Ext.widget({
xtype: 'form',
layout: 'form',
collapsible: true,
id: 'userForm',
frame: true,
title: 'User Details',
bodyPadding: '5 5 0',
align: 'center',
width: 350,
buttonAlign: 'center',
fieldDefaults: {
msgTarget: 'side',
labelWidth: 75
},
defaultType: 'textfield',
items: [{
id: 'txtName',
fieldLabel: 'Name',
name: 'name',
afterLabelTextTpl: required,
allowBlank: false
}, {
id: 'dDOJ',
fieldLabel: 'Date Of Joining',
name: 'doj',
xtype: 'datefield',
format: 'd/m/Y',
afterLabelTextTpl: required,
allowBlank: false
}, {
id: 'txtAge',
fieldLabel: 'Age',
name: 'age',
xtype: 'numberfield',
minValue: 0,
maxValue: 100,
afterLabelTextTpl: required,
allowBlank: false
}, {
id: 'chkActive',
xtype: 'checkbox',
boxLabel: 'Active',
name: 'cb'
}],
buttons: [{
text: 'ADD',
listeners: {
click: {
fn: function() {
debugger;
if (Ext.getCmp('txtName').getValue() == "" || Ext.getCmp('dDOJ').getValue() == "" || Ext.getCmp('txtAge').getValue() == "") {
alert("Please Enter All Required Details!");
return false;
}
var reply = confirm("Are You Sure You Want To Save?")
if (reply != false) {
fnShowGrid();
}
}
}
}
}]
});
simple.render(document.body);
});
function fnShowGrid() {
debugger;
var vName = Ext.getCmp('txtName').getValue();
var vDOJ = Ext.Date.format(Ext.getCmp('dDOJ').getValue(), 'd/m/Y');
var vAge = Ext.getCmp('txtAge').getValue();
var vIsActive = "InActive";
if (Ext.getCmp('chkActive').getValue() == true) {
vIsActive = "Active";
}
var store = Ext.create('Ext.data.ArrayStore', {
storeId: 'myStore',
idIndex: 0,
fields: [
{ name: 'name' },
{ name: 'doj' },
{ name: 'age' },
{ name: 'active' }
],
//data: { name: vName, doj: vDOJ, age: vAge, active: vIsActive}
data: [[vName, vDOJ, vAge, vIsActive]]
});
store.load({
params: {
start: 1,
limit: 3
}
});
Ext.create('Ext.grid.Panel', {
title: 'User Details',
store: store,
columns: [
{
header: 'Name',
width: 160,
sortable: true,
dataIndex: 'name'
},
{
header: 'Date Of Join',
width: 75,
sortable: true,
dataIndex: 'doj'
},
{
header: 'Age',
width: 75,
sortable: true,
dataIndex: 'age'
},
{
header: 'Active',
width: 75,
sortable: true,
dataIndex: 'active'
}],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
//detailsGrid.render(document.body);
}
The gridPanel is being displayed. But each time add a new data its creating a new grid!
I want to display GridPanel only once including all before added data.
Here's fiddle: http://jsfiddle.net/pratikhsoni/wc9mD/1/

Here is the working example based on your fiddle!
Ext.require([
'*'
]);
store = Ext.create('Ext.data.ArrayStore', {
storeId: 'myStore',
idIndex: 0,
fields: [
{ name: 'name' },
{ name: 'doj' },
{ name: 'age' },
{ name: 'active' }
],
//data: { name: vName, doj: vDOJ, age: vAge, active: vIsActive}
});
Ext.onReady(function() {
Ext.QuickTips.init();
var bd = Ext.getBody();
var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';
var simple = Ext.widget({
xtype: 'form',
layout: 'form',
collapsible: true,
id: 'userForm',
frame: true,
title: 'User Details',
bodyPadding: '5 5 0',
align: 'center',
width: 350,
buttonAlign: 'center',
fieldDefaults: {
msgTarget: 'side',
labelWidth: 75
},
defaultType: 'textfield',
items: [{
id: 'txtName',
fieldLabel: 'Name',
name: 'name',
afterLabelTextTpl: required,
allowBlank: false
}, {
id: 'dDOJ',
fieldLabel: 'Date Of Joining',
name: 'doj',
xtype: 'datefield',
format: 'd/m/Y',
afterLabelTextTpl: required,
allowBlank: false
}, {
id: 'txtAge',
fieldLabel: 'Age',
name: 'age',
xtype: 'numberfield',
minValue: 0,
maxValue: 100,
afterLabelTextTpl: required,
allowBlank: false
}, {
id: 'chkActive',
xtype: 'checkbox',
boxLabel: 'Active',
name: 'cb'
}],
buttons: [{
text: 'ADD',
listeners: {
click: {
fn: function() {
debugger;
if (Ext.getCmp('txtName').getValue() == "" || Ext.getCmp('dDOJ').getValue() == "" || Ext.getCmp('txtAge').getValue() == "") {
alert("Please Enter All Required Details!");
return false;
}
var reply = confirm("Are You Sure You Want To Save?")
if (reply != false) {
fnShowGrid();
}
}
}
}
}]
});
simple.render(document.body);
});
function fnShowGrid() {
debugger;
var vName = Ext.getCmp('txtName').getValue();
var vDOJ = Ext.Date.format(Ext.getCmp('dDOJ').getValue(), 'd/m/Y');
var vAge = Ext.getCmp('txtAge').getValue();
var vIsActive = "InActive";
if (Ext.getCmp('chkActive').getValue() == true) {
vIsActive = "Active";
}
if (!Ext.getCmp('sample-grid')) {
store.add({
name: vName,
doj: vDOJ,
age: vAge,
active: vIsActive
});
Ext.create('Ext.grid.Panel', {
title: 'User Details',
store: store,
id: 'sample-grid',
columns: [
{
header: 'Name',
width: 160,
sortable: true,
dataIndex: 'name'
},
{
header: 'Date Of Join',
width: 75,
sortable: true,
dataIndex: 'doj'
},
{
header: 'Age',
width: 75,
sortable: true,
dataIndex: 'age'
},
{
header: 'Active',
width: 75,
sortable: true,
dataIndex: 'active'
}
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
} else {
store.add({
name: vName,
doj: vDOJ,
age: vAge,
active: vIsActive
});
}
}

First of All.
Its very good to see you getting touch with EXT js. Mistake's i will like to highlight in your code.
1. if (reply != false) {
fnShowGrid();
}
In this you are calling your grid to be created which is being called why you are creating a new grid . you just have to update the store.
Approach: You must call it only once check if it exist and if yes then update the store like this.
if (reply != false) {
if(!Ext.getCmp('hello')) {
fnShowGrid();
} else {
var store=Ext.getCmp('hello').getStore();
store.add ({
name: 'sadad',
doj:'25/01/2015',
age:'26',
active:'false'
});
store.reload();
}
}
So in all you have to update the store add the new records. I have hardcoded right now you can get the values as you have got when creating it.
Please find Updated fiddle.
Fiddle

EXTJS 4.2 Adding new entries to store/grid

I am having trouble adding new entries to a store / grid in ExtJS 4.2. The create action runs on the server and returns a generated id for the new record. I can start on edit on the row that does not show up in the grid. The error I get after syncing is: Uncaught TypeError: Cannot read property 'parentNode' of null.
projectStore.js:
var projectStore = Ext.create('Ext.data.Store', {
model: 'ProjectModel',
storeId: 'projectStore',
autoLoad: true,
autoSync: true,
proxy: {
type: 'ajax',
api: {
create: webPath+'server.php?action=createProjectStore',
read: webPath+'server.php?action=readProjectsStore',
update: webPath+'server.php?action=updateProjectStore',
destroy: webPath+'server.php?action=destroyProjectStore'
},
extraParams: {
token: userDetails.token,
userName: userDetails.UserName
},
reader: {
type: 'json',
successProperty: 'success',
idProperty: "ProjectID",
root: 'data',
messageProperty: 'message'
},
writer: {
type: 'json',
writeAllFields: true,
root: 'data',
encode: true,
allowSingle: false
},
listeners: {
exception: function(proxy, response, operation){
// Ext.MessageBox.show({
// title: 'REMOTE EXCEPTION',
// msg: operation.getError(),
// icon: Ext.MessageBox.ERROR,
// buttons: Ext.Msg.OK
// });
operation.records[0].reject();
}
},
onUpdateRecords: function(records, operation, success) {
console.log(records);
}
}
});
projectModel.js:
Ext.define('ProjectModel', {
extend: 'Ext.data.Model',
idProperty: 'ProjectID',
fields: [ {
name: 'ProjectID',
type: 'int'
}, 'AccountName', 'AccountID', 'ProjectName', 'Deleted']
});
userProfileProjects.js
Ext.require([
'Ext.grid.Panel',
'Ext.form.*',
'Ext.window.Window',
'Ext.data.*'
]);
$(document).data('mcal.userAccountFixPopupOpen', false);
$(document).data('mcal.newProjectRecord', false);
var userProfileProjectRowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1
});
Ext.define('User.Project.Grid', {
extend: 'Ext.grid.Panel',
alias: 'widget.userProjectsGrid',
initComponent: function(){
this.editing = userProfileProjectRowEditing;
this.onRemoveProject = function(grid, rowIndex, colIndex) {
grid.getStore().removeAt(rowIndex);
}
Ext.apply(this, {
dockedItems: [{
xtype: 'toolbar',
items: ['->',
{
text: 'Add Project',
handler : function() {
userProfileProjectRowEditing.cancelEdit();
// Create a model instance
var r = Ext.create('ProjectModel', {
ProjectName: 'New Project'
});
projectStore.insert(0, r);
$(document).data('mcal.newProjectRecord', true);
userProfileProjectRowEditing.startEdit(0, 0);
}
},
{
iconCls: 'icon-refresh',
text: 'Refresh',
scope: this,
handler: this.onRefresh
}]
}],
columns: [
{
text: 'Account',
width: 115,
sortable: true,
hidden: false,
dataIndex: 'AccountID',
renderer: function(value){
var accountID = userAccountTimeLimitedStore.getAt(userAccountTimeLimitedStore.find('key', value));
return accountID.get('AccountName');
},
editor: {
xtype: 'combobox',
valueField: 'key',
displayField: 'AccountName',
triggerAction: 'all',
queryMode: 'local',
store: userAccountTimeLimitedStore
},
flex: 1
},
{
text: 'Project',
width: 115,
sortable: true,
dataIndex: 'ProjectName',
field: {
type: 'textfield'
},
flex: 1,
hidden: false
},
{
xtype:'actioncolumn',
text: 'Delete',
width:45,
align: 'center',
editRenderer: function(){ return ''},
items: [{
icon: webPath+'/images/remove.png', // Use a URL in the icon config
tooltip: 'Edit',
handler: this.onRemoveProject
}]
}
],
selType: 'rowmodel',
plugins: [this.editing]
});
this.callParent();
},
onRefresh: function(){
this.store.reload();
}
});
function initUserProjectGrid(){
window.main = Ext.create('Ext.container.Container', {
padding: '0 0 0 0',
width: 380,
height: 200,
renderTo: Ext.get('userProjectGridDiv'),
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
itemId: 'userProfileProjectGrid',
xtype: 'userProjectsGrid',
title: 'Projects',
flex: 1,
store: 'projectStore'
}]
});
// main.getComponent('userProfileProjectGrid').editing.editor.form.findField('AccountName').disable();
var localEdit = main.getComponent('userProfileProjectGrid').editing;
localEdit.on('beforeedit', function(editor, context, eOpts){
if($(document).data('mcal.newProjectRecord') != true){
localEdit.editor.form.findField('AccountID').disable();
}else{
localEdit.editor.form.findField('AccountID').enable();
}
});
localEdit.on('afteredit', function(){
$(document).data('mcal.newProjectRecord', false);
});
}

How can I get the id in Extjs checkcolumn?

Im tiro in Extjs.
That is my model:
Ext.define('CatModel', {
extend: 'Ext.data.Model',
idProperty: 'id',
fields: [{
name: "name",
convert: undefined
}, {
name: "id",
convert: undefined
}]
});
store:
var store = Ext.create('Ext.data.TreeStore', {
model:'CatModel',
root: {
expanded: true
},
proxy: {
type: 'ajax',
reader: 'json',
url: 'item_access.jsp?fullpage=true&show_cat=1'
}
});
and treePanel:
var treePanel = Ext.create('Ext.tree.Panel', {
id: 'tree-panel',
title: 'Sample Layouts',
region:'north',
split: true,
height: 560,
minSize: 150,
rootVisible: false,
autoScroll: true,
store: store,
columns: [
{
xtype: 'treecolumn',
text: 'name',
flex: 2.5,
sortable: true,
dataIndex: 'name'
},
{
text: 'id',//I want to get this id
flex: 1,
dataIndex: 'id',
sortable: true
}
, {
xtype: 'checkcolumn',
text: 'Done',
dataIndex: 'done',
width: 55,
stopSelection: false,
menuDisabled: true,
listeners:{
checkchange:function(cc,ix,isChecked){
//alert(isChecked);
//I want to get this row id in here
}
}
}]
});
In checkchange function there are three parameter one unknown,two is index, and three is check status ...
So how can I get the the same row id where I check the checkbox??
Can I find that id number by checkbox row index??

You should be able to get the record from the TreeView with the row index, and then get the id property from it:
listeners:{
checkchange: function(col, idx, isChecked) {
var view = treePanel.getView(),
record = view.getRecord(view.getNode(idx));
console.log(record.get('id'));
}
}