Related
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'));
i'm trying to select my combobox items with only one click, but, when clicked once, this doesn't works, just when i click two times this has been selected, but i don't need that. But, here's an interesting (weird) thing, sometimes works with one click and other times with the double click.
here's my code:
items: [{
xtype: 'combo',
anchor: '100%',
padding: 10,
fieldLabel: 'Type',
name: 'fieldType',
labelStyle: "font-weight:bold;",
store: new Ext.data.Store({
fields: [{
name: 'description',
type: 'string'
}, {
name: 'name',
type: 'string'
}, {
name: 'uuid',
type: 'string'
}],
autoLoad: true,
hideTrigger: true,
minChars: 1,
triggerAction: 'query',
typeAhead: true,
proxy: {
type: 'ajax',
url: "../",
extraParams: {
action: "catalog",
catalog: "fieldtypeoptions",
params: JSON.stringify({
uuidToken: Ext.connectionToken
})
},
reader: {
type: 'json',
root: 'dataTypesList'
},
listeners: {
exception: function(proxy, response, operation, eOpts) {
var responseArray = JSON.parse(response.responseText);
Ext.Notify.msg(responseArray.message, {
layout: "bottomright",
delay: 5000,
type: "error"
});
}
},
}
}),
typeAhead: true,
triggerAction: 'all',
valueField: 'uuid',
displayField: 'description',
listeners: {
change: function(combo, value) {
console.log(value);
console.log(combo);
console.log(combo.getValue());
},
click: function() {
alert('One click event');
}
},
element: 'combo'
}, {
xtype: 'fieldcontainer',
anchor: "100%",
layout: 'hbox',
padding: 10,
fieldDefaults: {
msgTarget: 'under',
labelAlign: 'top'
},
items: [{
xtype: 'numberfield',
minValue: 0,
maxValue: 100,
emptyText: 'Length',
name: 'length',
allowBlank: false,
flex: 1,
listeners: {
afterrender: function(field) {
Ext.create('Ext.tip.ToolTip', {
target: field.getId(),
html: 'Length'
});
}
}
}, {
xtype: 'numberfield',
emptyText: 'Decimal',
name: 'decimal',
minValue: 0,
allowBlank: false,
maxValue: 100,
flex: 1,
listeners: {
afterrender: function(field) {
Ext.create('Ext.tip.ToolTip', {
target: field.getId(),
html: 'Decimal'
});
}
}
}]
}]
I'm newbie with extjs, so, i just don't know for what reason this is happening... so, if anyone can help me with this, i'll be very grateful!
UPDATE:
I've seen my console, so i found some problem..
The problem:
Uncaught TypeError: Cannot read property 'fields' of null
and theoritically, the problem is over here:
classifyFields: function (field, list) {
var me = this;
var type = null;
// the next if, it is assumed is the problem.
if (field.fields.variableLengthField) {
type = "variableLenghtField";
} else if (field.fields.journalSaved) {
type = "journalField";
}
console.log(type, field, list);
list.forEach(function (item) {
if (item.name == type) {
me.dataFields.push({
"uuidFielMonitorType": item.uuid,
"fieldProperties": field.fields
});
}
});
console.log(me.dataFields);
}
I try to show colorpicker in grid cell. But i can't do it correct. It must look like show/hide panel whith colorpiker and save piked color in grid cell.
I try to use several controls. But allways have problems. Please explain to do it right way.
Now it's look like this:
and the code:
{
xtype: "widgetcolumn",
dataIndex: "color",
text: "Color",
width: 60,
widget: {
xtype: 'colorpicker',
align: 'right',
value: '993300',
},
listeners: {
select: function(picker, selColor) {
value = selColor,
hide(this);
}
}
}
show color picker in grid cell.double click on grid row then select menu bar color and click on update plugin color show on grid row.code check in js fiddler
Ext.onReady(function () {
var userStore = Ext.create('Ext.data.Store', {
autoLoad: 'false',
fields: [
{ name: 'name' },
{ name: 'email' },
{ name: 'colorCode' }
],
data: [
{ name: 'Lisa', email: 'lisa#simpsons.com'},
{ name: 'Bart', email: 'bart#simpsons.com'},
{ name: 'Homer', email: 'homer#simpsons.com'},
{ name: 'Marge', email: 'marge#simpsons.com'},
{ name: 'Homer', email: 'homer#simpsons.com' },
{ name: 'Marge', email: 'marge#simpsons.com'},
]
});
var customColors = ['FF4848', 'FF7575', 'FFA8A8', 'FFBBBB', 'FFCECE', 'FFECEC', 'FF68DD', 'FF86E3', 'FFACEC', 'FFC8F2', 'FF62B0', 'FF73B9', 'FF86C2', 'FFA8D3',
'E469FE', 'EA8DFE', 'EFA9FE', 'D568FD', 'D97BFD', 'DD88FD', 'E7A9FE', '9669FE', 'A27AFE', 'C4ABFE', 'D0BCFE', 'DDCEFF', 'FFA4FF', 'EAA6EA', 'D698FE', 'CEA8F4',
'BCB4F3', 'A9C5EB', '8CD1E6', 'FFBBFF', 'EEBBEE', 'DFB0FF', 'DBBFF7', 'CBC5F5', 'BAD0EF', 'A5DBEB', 'FFCEFF', 'F0C4F0', 'E8C6FF', 'E1CAF9', 'D7D1F8', 'CEDEF4',
'B8E2EF', '62A9FF', '62D0FF', '06DCFB', '01FCEF', '03EBA6', '01F33E', '99E0FF', '63E9FC', '74FEF8', '62FDCE', '72FE95', 'C0F7FE', 'CEFFFD', 'BEFEEB', 'CAFFD8',
'1FCB4A', '59955C', '48FB0D', '2DC800', '59DF00', '9D9D00', 'B6BA18', 'DFDF00', 'DFE32D', '93EEAA', 'A6CAA9', 'AAFD8E', '6FFF44', 'ABFF73', 'FFFF84', 'E7F3F1',
'EEF093', 'BDF4CB', 'C9DECB', 'CAFEB8', 'A5FF8A', 'D1FFB3', 'FFFFB5', 'F5F7C4', 'BABA21', 'C8B400', 'DFA800', 'DB9900', 'FFB428', 'FF9331', 'FF800D', 'D8F0F8',
'E6E671', 'E6CE00', 'FFCB2F', 'FFB60B', 'FFC65B', 'FFAB60', 'FFAC62', 'F7DE00', 'FFD34F', 'FFBE28', 'FFCE73', 'FFBB7D', 'FFBD82', 'EEEECE', 'EADFBF', 'E4C6A7',
'E6C5B9', 'DEB19E', 'E8CCBF', 'DDB9B9', 'E1E1A8', 'DECF9C', 'DAAF85', 'DAA794', 'CF8D72', 'DAAC96', 'D1A0A0', 'FF8E8E', 'E994AB', 'FF7DFF', 'D881ED', 'B7B7FF',
'A6DEEE', 'CFE7E2', 'FFC8C8', 'F4CAD6', 'FFA8FF', 'EFCDF8', 'C6C6FF', 'C0E7F3', 'DCEDEA', 'FFEAEA', 'F8DAE2', 'FFC4FF', 'EFCDF8', 'DBDBFF'];
Ext.create('Ext.window.Window', {
height: 400,
width: 350,
xtype: 'panel',
layout: 'fit',
items:
[
{
layout: 'border',
height: 200,
renderTo: Ext.getBody(),
items:
[
{
xtype: 'grid',
// height: 300,
region: 'center',
id: 'GridId',
store: userStore,
columns: [
{
header: 'Name',
width: 100,
sortable: false,
hideable: false,
dataIndex: 'name',
editor: {
xtype: 'textfield'
}
},
{
header: 'Email Address',
width: 150,
dataIndex: 'email',
editor: {
xtype: 'textfield',
}
},
{
header: 'Color',
dataIndex: 'colorCode',
width: '20%',
renderer: function (value, metaData) {
metaData.tdAttr = 'bgcolor=' + value;
return value;
},
editor: {
xtype: 'button',
text: 'Color Menu',
menu: new Ext.menu.ColorPicker({
resizable: true,
scrollable: true,
listeners: {
select: function (metaData, value) {
metaData.up('grid').getSelection()[0].dirty = true;
metaData.up('grid').getSelectionModel().getSelection()[0].data.colorCode = value;
}
}
}),
listeners: {
render: function (metaData, value) {
metaData.down('colorpicker').colors = [];
metaData.down('colorpicker').value = metaData.ownerCt.context.grid.getSelectionModel().getSelection()[0].data.colorCode;
for (var i = 0; i < customColors.length; i++) {
metaData.down('colorpicker').colors.push(customColors[i]);
}
metaData.down('colorpicker').updateLayout();
}
}
}
},
],
selModel: 'rowmodel',
plugins: {
ptype: 'rowediting',
clicksToEdit: 2
},
}
]
}]
}).show();
});
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);
});
}