I have view name PurchaseReport.js
Ext.define("App.view.tabs.PurchaseReport", {
extend: "Ext.panel.Panel",
alias: "widget.PurchaseReportTab",
requires: [
"App.model.PurchaseReport", "Ext.toolbar.Toolbar"
],
border: false,
layout: "fit",
items: [
App.Util.buildBrowseConfig({}, {
controller: "PurchaseReport",
primaryKeyField: "PurchaseReportId",
stateful: true,
stateId: "App.view.windows.PurchaseReport-grid",
columns: [
{ dataIndex: "PurchaseCost", filter: true, header: "Purchase Cost", width: 150 }
],
features: [{ ftype: "filters", autoReload: false, local: true }],
store: { model: "App.model.PurchaseReport", sorters: [{ property: "Name", direction: "asc" }],
height: 200,
width: 400,
bbar: [
{
dataIndex: "PurchaseCost",
reference: 'purchaseCostField',
xtype: 'textfield',
name: 'Total',
fieldLabel: 'Total',
allowBlank: false
}
],
renderTo: Ext.getBody()
}
})
]
});
This is my controller part where my grid get bind as PurchaseReport.js,
Ext.define("App.controller.tabs.PurchaseReport", {
extend: "Ext.ux.app.BrowseController",
views: ["tabs.PurchaseReport"],
refs: [
{
ref: "myPurchaseReportGrid",
selector: "PurchaseReportTab > gridpanel"
}
],
init: function () {
this.control({
PurchaseReportTab: {
bind: function (a, c) {
**//Grid bind start**
var b = this.getMyPurchaseReportGrid();
b.getSelectionModel().deselectAll();
b.store.removeAll();
b.fireEvent("bind", b, c)
**//Grid bind End**
**//Combobox Bind start**
var combo = this.getCoachCombo(),
store = combo.store,
options = store.lastOptions || {};
options = Ext.apply({
callback: function () {
combo.select(App.coach.CoachId)
//console.log("called rajesh");
}
}, options);
store.load(options);
if (App.coach.IsAdmin) {
combo.show()
}
**//Combobox Bind end**
var abilities = App.coach.Abilities,
toolbar = this.getToolbar();
for (var x = 0; x < abilities.length; x++) {
var ability = abilities[x],
button = toolbar.query("button[tooltip=" + ability.Name + "]");
if (button.length) {
button[0].setVisible(true)
}
}
store.load(options);
var purchaseCostField = this.getReferences().purchaseCostField;
purchaseCostField.setValue(store.sum('PurchaseCost'));
}
},
"PurchaseReportTab > gridpanel": {
bind: this.bind,
itemdblclick: this.handleRecord,
selectionchange: this.selectionChange
}
})
}
});
This is my model part name as PurchaseReport.js
Ext.define("App.model.PurchaseReport", {
extend: "Ext.data.Model",
fields: [
{
name: "PurchaseCost",
type: "date"
}
],
proxy: {
type: "ajax",
url: "ControllerFactory.aspx",
extraParams: {
controller: "PurchaseReport",
operation: "GetPurchaseReportsByCoachIdAndDates"
},
reader: {
type: "json",
root: "data",
successProperty: "success"
}
}
});
The page looks like this and I want display total of PurchaseCost in Textbox like to total of PurchaseCost around 1195 as per the below Image
A quick way to do it
Add a reference to your textfield:
{
dataIndex:"PurchaseCost",
reference: 'purchaseCostField',
xtype: 'textfield',
name: 'Total',
fieldLabel: 'Total',
allowBlank: false
}
In your controller after your store load add the value to the textfield:
store.load(options);
var purchaseCostField = this.getReferences().purchaseCostField;
purchaseCostField.setValue(store.sum('PurchaseCost'));
Related
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));
}
}
}
});
}
}
I am trying to implement server-side sorting with Sencha Ext JS and noticed something odd. The paging portion of the JSON looks fine but the sort property is set as a String and not an Array:
Actual:
{"page":1,"start":0,"limit":50,"sort":"[{\"property\":\"firstName\",\"direction\":\"ASC\"}]"}
Expected:
{"page":1,"start":0,"limit":50,"sort":[{"property":"firstName","direction":"ASC"}]}
ExtJs Code:
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.panel.*',
'Ext.layout.container.Border'
]);
Ext.define('Customer',{
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'firstName', type: 'string'},
{name: 'lastName', type: 'string'},
{name: 'companyName', type: 'string'}
]
});
Ext.onReady(function(){
var itemsPerPage = 50; // Paging
var store = Ext.create('Ext.data.Store', {
pageSize: itemsPerPage,
// autoLoad: true,
autoLoad: {start: 0, limit: itemsPerPage},
autoSync: true,
model: 'Customer',
remoteSort: true,
proxy: {
paramsAsJson: true,
actionMethods: {
read: 'POST'
},
type: 'rest', // was... 'ajax',
url: '/customers',
reader: {
type: 'json',
root: 'content',
totalProperty: 'totalElements'
},
writer: {
type: 'json'
},
listeners: {
write: function(store, operation){
var record = operation.getRecords()[0],
name = Ext.String.capitalize(operation.action),
verb;
if (name == 'Destroy') {
record = operation.records[0];
verb = 'Destroyed';
} else {
verb = name + 'd';
}
Ext.example.msg(name, Ext.String.format("{0} user: {1}", verb, record.getId()));
}
}
}
});
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
listeners: {
cancelEdit: function(rowEditing, context) {
// Canceling editing of a locally added, unsaved record: remove it
if (context.record.phantom) {
store.remove(context.record);
}
}
}
});
// create the grid
var grid = Ext.create('Ext.grid.Panel', {
bufferedRenderer: false,
store: store,
columns: [
{text: "ID", width: 120, dataIndex: 'id', sortable: true},
{text: "First Name", flex: 1, dataIndex: 'firstName', sortable: true, editor: 'textfield'},
{text: "Last Name", width: 125, dataIndex: 'lastName', sortable: true, editor: 'textfield'},
{text: "Company Name", width: 125, dataIndex: 'companyName', sortable: true}
],
forceFit: true,
height:210,
split: true,
region: 'north',
plugins: [rowEditing],
// Paging
dockedItems: [{
xtype: 'pagingtoolbar',
store: store, // same store GridPanel is using
dock: 'bottom',
displayInfo: true
}],
});
// define a template to use for the detail view
var customerTplMarkup = [
'ID: {id}<br/>',
'First Name: {firstName}<br/>',
'Last Name: {lastName}<br/>',
'Company Name: {companyName}<br/>'
];
var customerTpl = Ext.create('Ext.Template', customerTplMarkup);
Ext.create('Ext.Panel', {
renderTo: 'binding-example',
frame: true,
title: 'Customer List',
width: 580,
height: 400,
layout: 'border',
items: [
grid, {
id: 'detailPanel',
region: 'center',
bodyPadding: 7,
bodyStyle: "background: #ffffff;",
html: 'Please select a customer to see additional details.'
}]
});
// update panel body on selection change
grid.getSelectionModel().on('selectionchange', function(sm, selectedRecord) {
if (selectedRecord.length) {
var detailPanel = Ext.getCmp('detailPanel');
detailPanel.update(customerTpl.apply(selectedRecord[0].data));
}
});
});
i added beforeload listener to the store
here is a working example:
listeners: {
beforeload: function(store, operation, eOpts){
var sort = [];
var filter = [];
if(operation._sorters){
for(var i = 0; i< operation._sorters.length; i++){
var direction = operation._sorters[i]._direction;
var property = operation._sorters[i]._property;
sort.push({
"direction" : direction,
"property" : property
});
}
operation._proxy.extraParams = {sort:sort};
}
if(operation._filters){
for(var i = 0; i< operation._filters.length; i++){
var operator = operation._filters[i]._operator;
var property = operation._filters[i]._property;
var value = operation._filters[i]._value;
filter.push({
"operator" : operator,
"property" : property,
"value" : value
});
}
operation._proxy.extraParams = {filter:filter};
}
}
}
I have the following column specified in my Ext.grid.Panel:
{text: 'Home Country', dataIndex: 'homeCountryId', width: 250, xtype: 'country-column'},
The xtype is "country-column" which is defined as:
Ext.define("RateManagement.view.Columns.CountryColumn", {
extend: 'Ext.grid.column.Column',
xtype: 'country-column',
text: 'Country',
editor: { xtype: 'country-combo', allowBlank: false, blankText: 'Country is required.'},
renderer: function(val) {
var locationStore = Ext.data.StoreManager.lookup('RateManagement.store.CountryStore');
var index = locationStore.findExact('value', val);
if (index != -1) {
var record = locationStore.getAt(index).data;
return record.label;
}
},
sortable: true
});
When I click the column header in the grid ("Home Country"), it doesn't sort at all.
How can I make it sort by the record.label to sort alphabetically?
Edit: Here is how I have changed my model:
{name:'homeLocationId', type: 'string'},
{name:'homeLocation', type: 'string', convert: function (newValue, model) {
// homeCountryId is appened for uniqueness and additional sort
return (newValue ? newValue : '' ) + '_' + model.get('homeLocationId');
}
},
Here is my grid column:
{text: 'Home Location', dataIndex: 'homeLocationId', width: 250, xtype: 'location-column'},
You can set label as dataIndex and attach renderer with display 'Home Country'
Here is working sample: http://jsfiddle.net/KLX5q/
// Monel
Ext.define('CountryModel', {
extend: 'Ext.data.Model',
fields: [
{ name:'homeCountryId', type:'int'},
{ name:'HomeCountryName', type:'string'},
{ name:'label', type:'string',
convert: function (newValue, model) {
// homeCountryId is appened for uniqueness and additional sort
return (newValue ? newValue : '' ) + '_' + model.get('homeCountryId');
}
}
]
});
// store
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['homeCountryId', 'HomeCountryName', 'label'],
data:{'items':[
Ext.create('CountryModel',{ homeCountryId: 1, HomeCountryName: 'Australia', label:'nnnn' }),
Ext.create('CountryModel',{ homeCountryId: 2, HomeCountryName:'Germany', label:'bbbb' }),
Ext.create('CountryModel',{ homeCountryId: 3, HomeCountryName:'Russia', label:'aaaa' }),
Ext.create('CountryModel',{ homeCountryId: 4, HomeCountryName:'United States', label:'zzzz' })
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
// gridpanel
Ext.create('Ext.grid.Panel', {
title: 'Countries',
margin: 5,
frame: true,
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{
text: 'HomeCountryName',
dataIndex: 'label',
flex: 1,
renderer: function(value, column, record){
return record.data.HomeCountryName;
}
}
//,{ text: 'homeCountryId', dataIndex: 'homeCountryId' } // uncomment if need
//,{ text: 'display label', dataIndex: 'label' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
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);
});
}
Hey there,
I would like to be able to drag an item (bookmark) from a grid to a tree (categories) but I don't want the dropped bookmark-item to be added to the categories-tree as a new node and I don't want it to be removed from the grid. I just want to catch the dropnode-event and update the category-id of the bookmark.
How can this be done? What I've got so far is the following:
http://jsfiddle.net/suamikim/A3T6W/
Ext.onReady(function() {
// define model for tree
Ext.define('Category', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'parentCatId', type: 'int' },
{ name: 'name', type: 'string' }
]
});
// define model for grid
Ext.define('Bookmark', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'catId', type: 'int' },
{ name: 'title', type: 'string' },
{ name: 'url', type: 'string' }
]
});
// Create the tree-panel
var catTree = Ext.create('Ext.tree.Panel', {
itemId: 'catTree',
title: 'Categories',
flex: 0.5,
hideHeaders: true,
rootVisible: false,
allowDeselect: true,
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop',
dropGroup: 'bkmDDGroup',
enableDrag: false,
appendOnly: true
}
},
store: Ext.create('Ext.data.TreeStore', {
model: 'Category',
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'categories'
}
}
}),
root: [],
columns: [{
xtype: 'treecolumn',
dataIndex: 'name',
flex: 1
}],
listeners: {
afterrender: function(tree) {
var root = tree.getRootNode();
// load static data
root.appendChild([{
id: 0,
parentCatId: -1,
name: 'Cat1',
expanded: true,
categories: [{
id: 2,
parentCatId: 0,
name: 'Cat1.1',
categories: []
},{
id: 3,
parentCatId: 0,
name: 'Cat1.2',
categories: []
}]
},{
id: 1,
parentCatId: -1,
name: 'Cat2',
categories: []
}]);
// select the first item
tree.getSelectionModel().select(root.getChildAt(0));
},
selectionChange: function(model, selected, opts) {
bkmGrid.filterBookmarks((selected && selected[0]) ? selected[0].get('id') : -1);
}
}
});
// Create the grid-panel
var bkmGrid = Ext.create('Ext.grid.Panel', {
itemId: 'bkmGrid',
title: 'Bookmarks',
flex: 1,
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: 'bkmDDGroup'
}
},
store: Ext.create('Ext.data.Store', {
model: 'Bookmark',
proxy: {
type: 'memory'
},
data: [
{ id: 0, catId: 0, title: 'bkm1', url: 'http://www.url1.com' },
{ id: 1, catId: 0, title: 'bkm2', url: 'http://www.url2.com' },
{ id: 2, catId: 1, title: 'bkm3', url: 'http://www.url3.com' },
{ id: 3, catId: 1, title: 'bkm4', url: 'http://www.url4.com' },
{ id: 4, catId: 2, title: 'bkm5', url: 'http://www.url5.com' },
{ id: 5, catId: 3, title: 'bkm6', url: 'http://www.url6.com' }
]
}),
columns: [{
text: 'Title',
dataIndex: 'title',
flex: 0.7
},{
text: 'URL',
dataIndex: 'url',
flex: 1,
renderer: function(value, meta) {
meta.tdAttr = 'data-qtip="' + value + '"';
return '' + value + '';
}
}],
filterBookmarks: function(catId) {
var store = this.getStore();
store.clearFilter();
if (catId >= 0) {
store.filter('catId', catId);
}
}
});
// Create window which holds the dataview
Ext.create('Ext.window.Window', {
width: 500,
height: 300,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [ catTree, bkmGrid ]
}).show();
});
This throws the following exception after dropping a bookmark on the tree:
"Uncaught TypeError: Object [object Object] has no method 'updateInfo'"
The exception is thrown in the appendChild-method which finally shouldn't be called at all. Therefore the exception doesn't matter but how can i prevent the tree from trying to add a new node after the drop?
Thanks
I just found a solution which looks like this:
http://jsfiddle.net/suamikim/A3T6W/4/
The "magic" is to just delete the records-array in the beforedrop-listener. Before deletion i saved the array to a custom config-object of my tree (this.droppedRecords) to be able to access the data again in the drop-listener:
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop',
dropGroup: 'bkmDDGroup',
enableDrag: false,
appendOnly: true
},
listeners: {
beforedrop: function(node, data, overModel, dropPos, opts) {
this.droppedRecords = data.records;
data.records = [];
},
drop: function(node, data, overModel, dropPos, opts) {
var str = '';
Ext.iterate(this.droppedRecords, function(record) {
str += record.get('title') + ' (id = ' + record.get('id') + ') dropped on ' + overModel.get('name') + '\n';
});
alert(str);
this.droppedRecords = undefined;
}
}
},
That's it.
Thanks