I am creating a Extjs grid. In which most of the column is editable. what i need is if user change any column value on blur of that i will call my method do some calculation based on other column value.and replace the column value with calculated values.code is here.
var incomeTaxOverrideModel = new Ext.grid.ColumnModel([{
id : 'fromDate',
header : "From Date",
dataIndex : 'fromDate',
width : 80,
renderer : drenderer,
editor : this.fromDateEditor
}, {
id : 'toDate',
header : "To Date",
dataIndex : 'toDate',
width : 80,
renderer : drenderer,
editor : this.toDateEditor
}, {
id : 'rawTax',
header : "Raw Tax",
dataIndex : 'rawTax',
width : 80,
align : 'right',
selectOnFocus : true,
editor : new Ext.form.NumberField({"blur":this.calculateTaxForword}),
renderer : Gts.payItemRenderer()
}, {
id : 'surcharge',
header : "Surcharge",
dataIndex : 'surcharge',
width : 80,
align : 'right',
selectOnFocus : true,
editor : new Ext.form.NumberField({}),
renderer : Gts.payItemRenderer()
}, {
id : 'cess',
header : "Cess",
dataIndex : 'cess',
width : 80,
align : 'right',
selectOnFocus : true,
editor : new Ext.form.NumberField({}),
renderer : Gts.payItemRenderer()
}, {
id : 'totalTax',
header : "Total Tax",
dataIndex : 'totalTax',
width : 80,
align : 'right',
selectOnFocus : true,
editor : new Ext.form.NumberField({}),
renderer : Gts.payItemRenderer()
}, {
id : 'taxAmount',
header : "Taxable Income",
dataIndex : 'taxAmount',
width : 100,
align : 'right',
selectOnFocus : true,
editor : new Ext.form.NumberField({}),
renderer : Gts.payItemRenderer()
}, {
id : 'remarks',
header : "Remarks",
dataIndex : 'remarks',
width : 250,
editor : new Ext.form.TextField({})
}, {
id : 'modifiedDate',
header : "Modified On",
dataIndex : 'modifiedDate',
width : 100,
renderer : Ext.util.Format.dateRenderer('d M Y h:i:s A'),
width : 150
}
]);
this.itoGrid = new Ext.grid.EditorGridPanel({
store : this.itoStore,
cm : incomeTaxOverrideModel,
autoExpandColumn : 'remarks',
autoScroll : true,
containerScroll : true,
frame : false,
stripeRows : true,
width : 830,
height : 233,
clicksToEdit : 1,
layout : 'fit',
loadMask : true,
tbar : [this.addAction, this.deleteAction],
trackMouseOver : true
});
i created on method
calculateTaxForword :function(){
console.log(this.itoGrid)
//console.log(this.itoGrid.getStore().getModifiedRecords())
}
but its not coming anything.i have to calculate value based on raw tax.surcharge and cess so i need all the value in my method.how to do this any one please help
The CellEditing plugin has a beforeedit event that you can listen to:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.plugin.CellEditing-event-beforeedit
This will give you access to things like:
Parameters
editor : Ext.grid.plugin.CellEditing
e : Object
An edit event with the following properties:
grid - The grid
record - The record being edited
field - The field name being edited
value - The value for the field being edited.
row - The grid table row
column - The grid Column defining the column that is being edited.
rowIdx - The row index that is being edited
colIdx - The column index that is being edited
cancel - Set this to true to cancel the edit or return false from your handler.
eOpts : Object - The options object passed to Ext.util.Observable.addListener.
Each column object has editingPlugin.activeRecord property with record itself.
Related
Gts.app.report.chargesLog.SearchPanel = function(config) {
*****My Form Items Declarations*****
this.btnPDF = new Ext.Button({
iconCls : "pdf-button",
tooltip : "Export To PDF",
minWidth : 20,
handler : this.onFileImport.createDelegate(this, ["PDF"]),
colspan : 9,
style : 'margin-left:640px',
scope : this
});
Gts.app.report.chargesLog.SearchPanel.superclass.constructor.call(
this, {
height : 99,
border : false,
frame : true,
region : "north",
id : 'searchPanel',
layout : "table",
layoutConfig : {
columns : 11
},
defaults : {
xtype : "panel",
layout : "form",
border : false,
labelWidth : 63,
bodyStyle : "padding-right:5px;padding-left:3px;padding-top:3px"
},
items : [**** My Form Items ****,this.btnPDF]
});
}
In the extend of the panel, I am configured the handler, which is to be used to submit the details to a URL.
Ext.extend(Gts.app.report.chargesLog.SearchPanel, Ext.Panel, {
onFileImport : function(exportType) {
var form = this.getForm();
}
})
I have added many items to form including that button. But while calling that onFileImport button handler function, I cannot get the form by calling this.getForm() function. It is showing the below error.
Uncaught TypeError: this.getForm is not a function
I have an application which has is its first page build with different component.I am creating a userStore instance on page load(main.js) I want to access userStore in my header to get the firstname of user and display it on the header section.
Ext.create('store.User', {
storeId : 'storeUser'
});
Ext.define('OnlineApp.view.Main', {
extend : 'Ext.panel.Panel',
xtype : 'app-main',
requires : [
'Ext.plugin.Viewport'
],
controller : 'main',
viewModel : 'main',
layout : 'border',
padding : '0 0 0 0',
bodyStyle : 'border:0',
items : [
{
xtype : 'appHeader',
region : 'north'
},
{
xtype : 'tabpanel',
region : 'center',
bodyPadding : 0,
id : 'contentPanel',
reference : 'contentPanel',
layout : 'card',
border : false,
scrollable : true,
tabBar : {
hidden : true
},
items : [
firstPage,
contentFrame,
],
},
{
xtype : 'footer',
region : 'south'
}
]
});
** This is a Header file where I am trying to use the store below. Not sure what could be the best way to call store without creating a instance.**
Ext.define('OnlineApp.view.Header', {
extend: 'Ext.container.Container',
xtype : 'appHeader',
id : 'main-header',
height : 100,
layout : {
type : 'hbox',
align : 'middle'
},
initComponent: function() {
this.items = [
{
xtype : 'container',
flex : .55,
layout : {
type: 'vbox',
align : 'right'
},
collapsible : false,
padding : 5,
items : [
{
xtype : 'container',
id : 'app-header-user',
ui : 'usp-plain-button',
layout : {
type : 'hbox',
align : 'center'
},
items : [
{
xtype : 'component',
html : 'Welcome, <b>' + Ext.getStore('storeUser').data.firstname + '</b>' **// I am trying to use the store getting fiest name as undefined.**
},
{
xtype : 'gear-menu'
}
]
},
}
];
this.callParent();
}
});
If we assume that you have correctly generated/defined store. You have Ext.define('store.User') somewhere. Otherwise you should use Ext.create('Ext.data.Store',{storeId: 'storeUser'});
So Ext.getStore('storeUser') is returning store object in your header view. You can't just use data.firstname on it. Because data property in the store is Ext.util.Collection.
If you want to get data from your store you should use:
Ext.getStore('storeUser').getAt(0).get('firstname')
Where 0 is the index of the record in your store.
Btw in your case I would recommend you to use Ext.Temaples you can check the official example here. Or here is quite OK example on the stackoverflow.
I have the default view configuration for grid which is initialized when page is loading. Above the grid i have the dropdown menu which is containing predefined available views (which are representing vissible columns in grid).
Structure of predefined views is following:
"gridStructure" : {
"columns" : [ {
"id" : 6,
"position" : 12,
"title" : "Order archived",
"locked" : false,
"entityName" : null,
"width" : "auto",
"filterable" : {
"cell" : {
"dataTextField" : "archived",
"operator" : "eq"
}
}
}, {
"id" : 7,
"position" : 13,
"title" : "Creation time",
"locked" : false,
"entityName" : null,
"width" : "auto",
"filterable" : {
"cell" : {
"dataTextField" : "creationTime",
"operator" : "lte"
}
}
} ]
},
Question is:
Is possible destroy whole structure of the grid and set new to existing data which are holded in grid?
It means that i don't want to show/hide columns but recreate grid with new columns and old data.
How can i do it please?
Use the setOptions method of the Kendo UI grid.
In my J2EE web application there is a window with a form. It is showing when user clicks a button.
new Ext.Button({
text : 'Assign Vehicle',
handler : function() {
showVehicleAssignWin();
}
}
My showVehicleAssignWin() function is in TourPlan.js file. This is my TourPlan.js file.
function showVehicleAssignWin(){
assignVehicleWin.show(this);
}
My assignVehicleWin window is declaring in the DataEntryForms.js file.
var assignVehicleWin;
var assignVehicleForm = new Ext.FormPanel({
frame : true,
labelWidth : 200,
labelAlign : 'left',
// renderTo:document.body,
autoScroll : true,
// defaultType: 'displayfield',
bodyStyle : {
"background-color" : "#000000",
"padding" : "10px"
},
/*
* layout : { type : 'vbox', align : 'center' }, defaults : { labelWidth :
* 200, padding : '10 10 10 25' },
*/
items : [ {
xtype : 'combo',
name : 'include_type',
fieldLabel : '00Vehicle Registration Number',
editable : false,
}, {
xtype : 'combo',
name : 'include_type',
fieldLabel : '00Device ID',
editable : false,
}, {
xtype : 'combo',
name : 'include_type',
fieldLabel : '00Default Rep',
editable : false,
}, {
xtype : 'combo',
name : 'include_type',
fieldLabel : '00Driver',
editable : false,
}, {
xtype : 'combo',
name : 'include_type',
fieldLabel : '00Assistant',
editable : false,
}, {
xtype : 'combo',
name : 'include_type',
fieldLabel : '00Porter 1',
editable : false,
}, {
xtype : 'combo',
name : 'include_type',
fieldLabel : '00Porter 2',
editable : false,
}, {
xtype : 'combo',
name : 'include_type',
fieldLabel : '00Porter 3',
editable : false,
},
],
buttons : [ {
text : 'Delete',
handler : function() {
}
}, {
text : 'View',
handler : function() {
}
}, {
text : 'New',
handler : function() {
}
}, {
text : 'Exit',
handler : function() {
assignVehicleWin.hide();
}
} ]
});
assignVehicleWin = new Ext.Window({
title : 'Vehicle Assigning',
layout : 'fit',
// autoScroll: true,
// y: 120,
width : 480,
height : 530,
minWidth : 480,
minHeight : 530,
resizable : false,
draggable : true,
// modal: true,
plain : true,
// bodyStyle:'padding:8px;',
// buttonAlign:'center',
closeAction : 'hide',
// floating: true,
closable : true,
items : [ assignVehicleForm ]
});
I have to click the button two times to show the window. And also the window is showing up but it's empty. The FireBug console says
TypeError: this.layout.layout is not a function
I am using ExtJs 3.0.
Anyone has and idea what's going on here? Please help me to correct this error.
Thank You
i have prepared one sample code for you try this. i hope it will help you.
there is no need to use Ext.namespace();.
WindowLayout.js
var assignVehicleWin;
var assignVehicleForm = new Ext.FormPanel({
frame : true,
labelWidth : 200,
labelAlign : 'left',
autoScroll : true,
bodyStyle : {
"background-color" : "#000000",
"padding" : "10px"
},
defaults : {
},
items : [{
fieldLabel : '00Vehicle Registration Number',
},{
fieldLabel : '00Device ID'
},{
fieldLabel : '00Default Rep'
}, {
fieldLabel : '00Driver'
}, {
fieldLabel : '00Assistant'
}, {
fieldLabel : '00Porter 1'
}, {
fieldLabel : '00Porter 2'
}, {
fieldLabel : '00Porter 3'
}],
buttons : [{
text : 'Delete',
handler : function() {
}
},{
text : 'View',
handler : function() {
}
},{
text : 'New',
handler : function() {
}
},{
text : 'Exit',
handler : function() {
assignVehicleWin.hide();
}
}]
});
assignVehicleWin = new Ext.Window({
title : 'Vehicle Assigning',
layout : 'fit',
width : 480,
height : 530,
minWidth : 480,
minHeight : 530,
resizable : false,
draggable : true,
plain : true,
closeAction : 'hide',
items : assignVehicleForm
});
Panel.js
Ext.onReady(function(){
var BorderEx = new Ext.Panel({
renderTo : Ext.getBody(),
width : 300,
height : 300,
style : "margin : 10px 10px 10px 10px;", /* MARGINS config used in boxlayout Or border layout only */
title : 'test for stackoverflow',
monitorResize : true,
items : [{
xtype : 'button',
width : 50,
height : 50,
text : 'Open Window',
handler : function() {
assignVehicleWin.show();
}
}]
});
});
NOTE: make sure this both files are registered in index.html
I have used gridComplete to show HTML buttons but it shows the HTML text instead of button and encoded HTML as title which does not look good. Kindly help me remove or change the title (tooltip) and show the buttons
The Output
When I inspect this cell then I could see the following in chrome tools -
<td role="gridcell" style="" title="<input type='button' value='Publish' onclick='publish(100)' />" aria-describedby="list_actionBtn"><input type='button' value='Publish' onclick='publish(100)' /></td>
The jqgrid Code
var myColModel = [ {
name : "promoId",
index : 'Promotionid',
width : 60
}, {
name : "promoCode",
index : 'promotioncode',
width : 110
}, {
name : "name",
index : 'name',
width : 160
}, {
name : "description",
index : 'description',
width : 250
}, {
name : "distCode",
index : 'distributor_code',
width : 110
} , {
name : "statusId",
hidden : true
} , {
name : "statusVal",
index : 'status',
width : 90
}, {
name : "startDate",
index : 'start_date',
width : 100,
sorttype : "date",
align : "right"
}, {
name : "endDate",
index : 'end_date',
width : 100,
sorttype : "date",
align : "right"
}, {
name : "discount",
index : 'discount',
width : 80
}, {
name : "extension",
index : 'extension',
width : 80
}, {
name : "isDiscount",
hidden : true
}, {
name : "isExtension",
hidden : true
}, {
name : "actionBtn",
width : 100
} ];
$(function() {
$("#list")
.jqGrid(
{
url : '/suiactcodegen/action/promotion/promolist',
datatype : "json",
mtype : "GET",
colNames : [ "Promo ID", "Promo Code", "Name",
"Description", "Distributor Code", "Stt Id",
"Status", "Start Date", "End Date",
"Discount", "Extension", "Is Disc", "isExtn", "" ],
colModel : myColModel,
pager : "#pager",
rowNum : 10,
rowList : [ 10, 20, 30 ],
sortname : "end_date",
sortorder : "asc",
viewrecords : true,
gridview : true,
rownumber : true,
autoencode : true,
width : '1000px',
height : 'auto',
caption : "Promotion Summary",
gridComplete: function() {
var ids = $("#list").jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var rowId = ids[i],
statusId = $("#list").jqGrid ('getCell', rowId, 'statusId'),
activeBtn = "";
if (statusId == 0) { // Inactive
activeBtn = "<input type='button' value='Publish' " +
"onclick='publish(" + rowId + ")' />";
}
//else if (statusId == 1) { // Published
// activeBtn = "<input type='button' value='Expire' " +
// "onclick=\"expire(" + rowId + ");\" />";
//}
$("#list").jqGrid('setRowData', rowId, { actionBtn: activeBtn });
}
}
}).jqGrid('navGrid', '#pager', {
add : false,
edit : false,
del : false,
search : true,
refresh : false
}).jqGrid('navButtonAdd', '#pager', {
caption : " Edit ",
// buttonicon: "ui-icon-bookmark",
onClickButton : editPromo,
position : "last"
});
});
-- Update --
I have already tried autoencode = false for this column but it didn't work
IMP Update
The reason why it doesn't work I believe is because datatype is 'json' but button type is not json data type. How can I create it as a separate row? In case of 'local' data it works. See the fiddle http://jsfiddle.net/zpXCT/3/. Even tested it in my localhost
Sry I copied the basic grid from JqGrid site and then edited that and didn't notice that autoencode:true for grid level. So even though I mentioned it for column level it wasn't working. Now it appears.
Set colmodel datatype = 'html'