I'm working Extjs 4.2. I have grid with rowediting plugin. Problem is when starting edit row, columns with align:center not showing correctly, but align:right works correct on editor row. I searched problem, but didn't find solve. Please Help with this.
This is my editor:
buildPlugins: function () {
var rowEditing = Ext.create("Ext.grid.plugin.RowEditing",{
autoCancel: false,
pluginId: 'rowedit',
errorSummary: false
});
return [rowEditing];
},
This is last three column code
{
text: Message.cameralGrid.columns.menu5,
menuDisabled: true,
columns: [
{
text: Message.cameralGrid.columns.cameralMustHoldDate,
dataIndex: "cameralMustHoldDate",
width: 120,
sortable: false,
xtype: "datecolumn",
style: "text-align:left;",
align: "center"
},
{
text: Message.cameralGrid.columns.cameralHoldDate,
dataIndex: "cameralHoldDate",
width: 100,
sortable: false,
xtype: "datecolumn",
style: "text-align:left;",
align: "center",
editor: {
xtype: "datefield",
format: "d.m.Y",
allowBlank: false
}
},
{
text: Message.cameralGrid.columns.fineSum,
dataIndex: "fineSum",
width: 120,
sortable: false,
xtype: "numbercolumn",
style: "text-align:left;",
align: "right",
editor: {
xtype: "numberfield",
minValue: 0,
allowBlank: false
}
}
]
}
Thanks for Help!
I needed to override Ext.grid.RowEditor class. After this problem is solved.
Ext.define('helper.RowEditor', {
override: 'Ext.grid.RowEditor',
requires: [
'Ext.grid.RowEditor'
],
addFieldsForColumn: function(column, initial) {
var me = this,
i,
length, field;
if (Ext.isArray(column)) {
for (i = 0, length = column.length; i < length; i++) {
me.addFieldsForColumn(column[i], initial);
}
return;
}
if (column.getEditor) {
// Get a default display field if necessary
field = column.getEditor(null, {
xtype: 'displayfield',
// Override Field's implementation so that the default display fields will not return values. This is done because
// the display field will pick up column renderers from the grid.
getModelData: function() {
return null;
}
});
if (column.align === 'right') {
field.fieldStyle = 'text-align:right';
}
// this block is added -------------------------------->
if (column.align === 'center') {
field.fieldStyle = 'text-align:center';
}
// <-----------------------------------------------------
if (column.xtype === 'actioncolumn') {
field.fieldCls += ' ' + Ext.baseCSSPrefix + 'form-action-col-field'
}
if (me.isVisible() && me.context) {
if (field.is('displayfield')) {
me.renderColumnData(field, me.context.record, column);
} else {
field.suspendEvents();
field.setValue(me.context.record.get(column.dataIndex));
field.resumeEvents();
}
}
if (column.hidden) {
me.onColumnHide(column);
} else if (column.rendered && !initial) {
// Setting after initial render
me.onColumnShow(column);
}
}
}
});
Related
I want to add some styling to the last row in my grid. I wont know what the row number is as there could be any number of rows. How can I go about this? I've seen rowClass and rowRenderer but not a working example. Here is the code I have:
var displayData = function (itemViewModelList) {
var fields = [
{
name: 'ConsultantName', type: 'text', width: 100, title: 'Consultant Name'
},
{
name: 'BranchName', type: 'text', width: 100, title: 'Branch Name', css: "red"
},
{ name: 'NumberOfInvestments', type: 'text', title: 'Number Of Investments' },
{
name: 'ValueOfInvestments', type: 'money', width: 150, title: 'Value Of Investments',
itemTemplate: function (value) {
return tisCommon.formatForMoney(value);
}
},
{
name: 'AverageValueOfInvestments', type: 'money', width: 150, title: 'Average Value Of Investments',
itemTemplate: function (value) {
return tisCommon.formatForMoney(value);
}
},
{
name: 'Month', type: 'text', width: 100, title: 'Month',
itemTemplate: function (value) {
return moment(value, 'M').format('MMMM');;
}
},
];
var options = {
inserting: false,
editing: false,
pageSize: 20,
fields: fields,
rowHeaders: false,
colHeaders: false,
data: itemViewModelList,
controller: controller = {
loadData: function () {
},
},
};
$('#investment-grid').tisGrid('', options);
if (itemViewModelList[0].ConsultantName != null) {
$("#investment-grid").jsGrid("fieldOption", "BranchName", "visible", false);
} else {
$("#investment-grid").jsGrid("fieldOption", "ConsultantName", "visible", false);
}
};
My data being passed "itemViewModelList" is an array of objects
I resolved this by using rowClass as follows:
controller: controller =
{
loadData: function () {},
},
rowClass: function (item, itemIndex) //item is the data in a row, index is the row number.
{
if ((item.ConsultantName == "Totals") || (item.BranchName == "Totals"))
{
return "totalItem highlight";
}
}
I have my if statement where I find the item in the last row based on my conditions. When they are met, I add my custom CSS classes to that row.
I am trying to use dummy event handler on select event on Ext.grid.Panel. But if I use fireEvent('RequestSelect'), to external observer(controller) checkcolumn is not working on selected row or after navigating with arrows on keyboard. If I comment row with this.fireEvent('RequestSelect') checkcolumn works good.
Ext.define('OrionWebClient.view.RequestList',{
extend: 'Ext.grid.Panel',
id:'rqstlst',
title:'Список запросов',
alias:'widget.requestlist',
border:true,
requires:['Client.model.Request'],
columns:{
defaults:{
draggable:false,
sortable:false,
hideable:false,
resizable:false
},
items:[
{ text: '#', xtype:'rownumberer', width: 30 },
{ text: 'команда', dataIndex: 'commandName', width: 250},
{ text: 'параметры', dataIndex: 'params', width: 250},
{ text: '*', dataIndex: 'check', xtype: 'checkcolumn', width: 30 }
]
},
store:{
model: 'Client.model.Request',
autoLoad:true
},
initComponent:function () {
this.callParent();
this.on({
select:this._OnRequestSelect
});
this.SetCurrentIndex(-1);
this.addEvents({
RequestSelect:true,
AddRequest: true,
RemoveRequest: true,
RequestUp: true,
RequestDown: true
});
},
GetCurrentIndex:function(){
return this.m_cur_index;
},
SetCurrentIndex:function (index,render) {
if (render){
var smodel = this.getSelectionModel();
if (index == -1){
smodel.deselectAll();
this.fireEvent('Deselect');
}
else{
smodel.select(index);
}
}
this.m_cur_index = index;
},
_OnSendRequest:function () {
var rqst_list = this._GetRequestToSend();
this.fireEvent('RequestSend',rqst_list);
},
_OnRequestSelect:function(grid, rec, index){
this.SetCurrentIndex(index, false);
this.fireEvent('RequestSelect', rec);
},
MoveSelection:function(start, stop, direct){
var index = {
_old: this.GetCurrentIndex(),
_new: this.GetCurrentIndex()
};
if (index._old==-1){
this.SetCurrentIndex(start,true);
return index;
}
if (index._old==stop){
return index;
}
index._new += direct;
this.SetCurrentIndex(index._new,true);
return index;
},
_OnButtonUp:function(){
var max = this.GetMaxIndex();
var index = this.MoveSelection(max, 0, -1);
this.fireEvent('RequestMove',index);
},
_OnButtonDown:function(){
var max = this.GetMaxIndex();
var index = this.MoveSelection(0, max, 1);
this.fireEvent('RequestMove', index);
},
GetMaxIndex:function () {
var store = this.getStore();
return store.getCount()-1;
}
});
PS Sorry my English is bad =(
There are several ways in handle events, the one i prefer is just listen for these events inside your controller without adding any logic to your view.
Ext.define('OrionWebClient.controller.Main', {
extend: 'Ext.app.Controller',
views: [
'RequestList'
],
init: function() {
this.control({
'RequestList': {
select: this.onSelect
}
});
},
onSelect: function(this, record, index, eOpts){
console.log('selected'+record);
}
});
I have this custom field in my form. But when i do the form.getValues() the values for this field is empty. Is this the right way to create custom form fields.
Ext.define("Tasks.view.BarcodeField", {
extend: 'Ext.Container',
alias:'widget.barcodeField',
xtype: 'barcodefield',
config: {
layout: 'hbox',
id: 'barcodeField',
itemId: 'barcodeField',
items: [
{
xtype: 'textfield',
label: 'Barcode',
labelWidth: '37.4%',
flex: 4
},
{
xtype: 'image',
id : 'barcodeScanner',
itemId : 'barcodeScanner',
src: 'resources/images/barcodes.png',
padding: '6 0 0 0',
flex: 1,
listeners: {
tap: function() {
console.log("Starting the barcode Scanner");
function success(result) {
alert("We got a barcode\n" +
"Result: " + result.text + "\n" +
"Format: " + result.format + "\n" +
"Cancelled: " + result.cancelled);
}
function fail(error) {
alert("Scanning failed: " + error);
}
cordova.plugins.barcodeScanner.scan(success, fail);
}
}
}
]
},
getValue : function()
{
console.log(this.getItems().getAt(0).getValue());
return this.getItems().getAt(0).getValue();
},
setValue : function(newvalue) {
this.getItems().getAt(0).setValue(newvalue);
}
});
Instead of extending from the Container i extended the Ext.field.Field and added the items as children to that component.
Ext.define("Tasks.view.BarcodeField", {
extend: 'Ext.field.Field',
alias:'widget.barcodeField',
xtype: 'barcodefield',
config: {
layout: 'hbox',
id: 'barcodeField',
itemId: 'barcodeField',
isField:false,
component : {
xtype:'panel',
layout:'hbox',
items: [
{
xtype: 'input',
label: 'Barcode',
labelWidth: '37.4%',
flex: 4,
id:'barcodeTextField',
itemId:'barcodeTextField'
},
{
xtype: 'image',
id : 'barcodeScanner',
itemId : 'barcodeScanner',
src: 'resources/images/barcodes.png',
padding: '6 0 0 0',
flex: 1,
listeners: {
tap: function() {
console.log("Starting the barcode Scanner");
var text = Ext.ComponentQuery.query("#barcodeTextField")[0];
text.setValue("123456");
}
}
}
]
}
},
getValue : function()
{
console.log(this.getComponent().getItems().getAt(0).getValue());
return this.getComponent().getItems().getAt(0).getValue();
},
setValue : function(newvalue) {
this.getComponent().getItems().getAt(0).setValue(newvalue);
}
});
You can easily add a formpanel as the first child wich will contain a textfield inside in.
And afterward do the formpanel.getValues() to get the values from every field inside that formpanel.
and the other thing is you can do
this.getItems()[0].getValue();
this.getItems()[0].setValue('someDesiredValue');
but that being said I will really prefer doing that on the controller class.
I am trying Kendo UI out and I am using the examples provided for studying purpose. Let's suppose I am using a large data source of several hundreds of thousand elements. If I'm using paging and the page size is 10, I would really like to be able to get only 10 elements from the web-page and if Kendo UI was able to know that in reality the number of elements is much bigger, but we are showing only 10.
This is what I currently have:
var initGrid = true;
var grid2Data;
function getDataSource()
{
return grid2Data.Data;
}
var grid;
function getPageIndex()
{
if (!(grid)) {
return 0;
}
return grid.pager.page() - 1;
}
function getPageSize() {
if (!(grid)) {
return 10;
}
return grid.pager.pageSize();
}
function getFilters() {
if (!(grid)) {
return "";
}
return grid.dataSource.filter();
}
function getSorts() {
if (!(grid)) {
return "";
}
return grid.dataSource.sort();
}
function getParams() {
return getPageSize();
}
function postTest() {
if (initGrid) {
$.post('myurl' + getParams(), function (data) {
grid2Data = data;
$("#grid").kendoGrid({
dataBound: onDataBound,
dataSource: {
data: getDataSource(),
schema: {
model: {
fields: {
Email: { type: "string" },
FullName: { type: "string" },
LogCreateDate: { type: "date" },
RoleName: { type: "string" },
UserName: { type: "string" }
}
}
},
pageSize: 10
},
height: 300,
scrollable: false,
sortable: true,
filterable: true,
pageable: {
input: true,
numeric: false
},
columns: [
{
field: "Email",
title: "Email",
width: 100
},
{
field: "FullName",
title: "Full Name",
width: 100
},
{
field: "LogCreateDate",
title: "Created",
template: '#= kendo.toString(LogCreateDate,"MM/dd/yyyy") #'
},
{
field: "RoleName",
title: "Role",
width: 50
},
{
field: "UserName",
width: 100
}
]
});
grid = $("#grid").data("kendoGrid");
});
}
else {
}
initGrid = false;
}
$(document).ready(function () {
postTest();
});
My problem is that the grid is showing that this is element 1-10 from 10 and it's the first page. I would like the grid to show me a page index and item count given by me. How can I set the number of elements and the page index of the grid? Is this possible? Thanks.
When you choose serverPaging in the DataSource by setting it to true. You receiver in the server information about the page number (page), the page size (pageSize), number of records to skip (skip)... (look for serverPaging in http://docs.kendoui.com/api/framework/datasource) and in exchange you should return not only the array with the data of that page but also the total number of rows. Then you implement in schema.total the function for accessing the number of records. I.e. Lets assume that you return as result the following object:
{
rows: [
{ id: 1, col1: "col1.1", col2: "col1.2" },
{ id: 2, col1: "col2.1", col2: "col2.2" },
{ id: 3, col1: "col3.1", col2: "col3.2" }
],
totalRows : 1000
}
Then you might implement schema.total as:
schema: {
total: function (response) {
return response.totalRows;
}
}
Where response is the object received from the server.
NOTE: Actually in this case would be enough defining the schema as:
schema: {
total: "totalRows";
}
}
Since total is directly stored in totalRows field.
Check http://demos.kendoui.com/web/grid/remote-data.html for an example.
how can i change the button-text ("Done" and "Cancel") in the selectfield to german or in any text i like?
xtype: 'selectfield',
name: 'sector',
width: 150,
prependText: 'Sector:',
options: [
{text: 'Alle Termine', value: 'alldates'},
]
one easy possibilty would be to override the defaults of the picker, e.g.:
Ext.override(Ext.Picker, {
doneButton: 'Fertig',
cancelButton: 'Abbrechen'
});
You can extend Ext.form.Select to allow you to apply your own configuration to the picker it uses.
Ext.ns('MySite.ux.form');
MySite.ux.form.Select = Ext.extend(Ext.form.Select , {
getPicker: function() {
if (!this.picker) {
this.picker = new Ext.Picker(Ext.apply({
slots: [{
align : 'center',
name : this.name,
valueField : this.valueField,
displayField: this.displayField,
value : this.getValue(),
store : this.store
}],
listeners: {
change: this.onPickerChange,
scope: this
}
}, this.pickerConfig));
}
return this.picker;
}
});
Ext.reg('myselectfield', MySite.ux.form.Select);
And your selectfield configuration might look like this:
{
xtype: 'myselectfield',
name: 'sector',
label: 'Sector',
pickerConfig: {
doneButton: 'Fertig',
cancelButton: 'Abbrechen'
}
}