ExtJS4 fireEvent in select event checkcolumn not work - grid

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);
}
});

Related

How to add a css class to the last row in jsGrid

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.

Why doesn't ui-grid in Angular Meteor show its data when filter is activated?

Hello I have a problem
Working:
Meteor
Angular Meteor
ui-grid
I follow the plunker example in documentation ui-grid link
The problem is that the data don't show when filters are activated.
I have no errors in console.
I put my code:
html file
<button id='toggleFiltering' ng-click="inventario.toggleFiltering()" class="btn btn-success">Toggle Filtering</button>
<div id="grid1" ui-grid="inventario.gridOptions" class="grid"></div>
js file
class Inventario {
constructor($scope, $reactive, $uibModal, $http, uiGridConstants) {
'ngInject';
$reactive(this).attach($scope);
this.$uibModal = $uibModal;
var today = new Date();
var nextWeek = new Date();
this.highlightFilteredHeader = (row, rowRenderIndex, col, colRenderIndex) => {
if( col.filters[0].term ){
return 'header-filtered';
} else {
return '';
}
};
this.gridOptions = {
enableFiltering: true,
onRegisterApi: (gridApi) => {
this.gridApi = gridApi;
},
columnDefs: [
// default
{ field: 'name', headerCellClass: this.highlightFilteredHeader },
// pre-populated search field
{ field: 'gender', filter: {
term: '1',
type: uiGridConstants.filter.SELECT,
selectOptions: [ { value: '1', label: 'male' }, { value: '2', label: 'female' }, { value: '3', label: 'unknown'}, { value: '4', label: 'not stated' }, { value: '5', label: 'a really long value that extends things' } ]
},
cellFilter: 'mapGender', headerCellClass: this.highlightFilteredHeader },
// no filter input
{ field: 'company', enableFiltering: false, filter: {
noTerm: true,
condition: (searchTerm, cellValue) => {
return cellValue.match(/a/);
}
}},
// specifies one of the built-in conditions
// and a placeholder for the input
{
field: 'email',
filter: {
condition: uiGridConstants.filter.ENDS_WITH,
placeholder: 'ends with'
}, headerCellClass: this.highlightFilteredHeader
},
// custom condition function
{
field: 'phone',
filter: {
condition: (searchTerm, cellValue) => {
var strippedValue = (cellValue + '').replace(/[^\d]/g, '');
return strippedValue.indexOf(searchTerm) >= 0;
}
}, headerCellClass: this.highlightFilteredHeader
},
// multiple filters
{ field: 'age', filters: [
{
condition: uiGridConstants.filter.GREATER_THAN,
placeholder: 'greater than'
},
{
condition: uiGridConstants.filter.LESS_THAN,
placeholder: 'less than'
}
], headerCellClass: this.highlightFilteredHeader},
// date filter
{ field: 'mixedDate', cellFilter: 'date', width: '15%', filter: {
condition: uiGridConstants.filter.LESS_THAN,
placeholder: 'less than',
term: nextWeek
}, headerCellClass: this.highlightFilteredHeader
},
{ field: 'mixedDate', displayName: "Long Date", cellFilter: 'date:"longDate"', filterCellFiltered:true, width: '15%',
}
]
};
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
.success((data) => {
this.gridOptions.data = data;
this.gridOptions.data[0].age = -5;
data.forEach( function addDates( row, index ){
row.mixedDate = new Date();
row.mixedDate.setDate(today.getDate() + ( index % 14 ) );
row.gender = row.gender==='male' ? '1' : '2';
});
});
this.toggleFiltering = () => {
this.gridOptions.enableFiltering = !this.gridOptions.enableFiltering;
this.gridApi.core.notifyDataChange( uiGridConstants.dataChange.COLUMN );
};
}
}
const name = 'inventario';
// Módulo
export default angular
.module(name, [
uiRouter,
EditarArticulo
])
.component(name, {
templateUrl: `imports/ui/components/${name}/${name}.html`,
controllerAs: name,
controller: Inventario
})
.config(config)
.filter('mapGender', function() {
var genderHash = {
1: 'male',
2: 'female'
};
return function(input) {
if (!input){
return '';
} else {
return genderHash[input];
}
};
});
Given that everything seems to work when filtering is disabled, you must have a problem with the (multiple) filters you have declared.
It is most likely a combination of the filters that is excluding all of your data. Start by commenting out all of the filters (you should see all the data), and then re-introduce the filters one by one until you see the problem again.
This will narrow down the problem, and allow you to see which filter is wrong.

datagrid's editor can not align and auto fill the cell

I use easyui implements inline edit of datagrid,dynamically add new rows and save back by one click. But when click a row and starting to edit, the editor in the cell can not align to it's column and can not auto fill the whole cell. So it looks a mess.
The essential code is below:
//add numberspinner into datagrid.
$.extend($.fn.datagrid.defaults.editors, {
numberspinner: {
init: function(container, options){
var input = $('<input type="text">').appendTo(container);
return input.numberspinner(options);
},
destroy: function(target){
$(target).numberspinner('destroy');
},
getValue: function(target){
return $(target).numberspinner('getValue');
},
setValue: function(target, value){
$(target).numberspinner('setValue',value);
},
resize: function(target, width){
$(target).numberspinner('resize',width);
}
},
empty:{
init: function(container, options){
return $('<div style="padding:0 4px"></div>').appendTo(container);
},
getValue: function(target){
return $(target).html();
},
setValue: function(target, value){
$(target).html(value);
}
}
});
var editIndex = undefined;
$(function(){
$('#dg').datagrid({onClickRow:function(index,data){
var row=$('#dg').datagrid('getSelected');
}});
$('#adddg').datagrid({
columns: [[{
field:'id',hidden:true
},{
field:'code',title:'代码',width:"50",hidden:true,
editor:{type:'text'}
},{
field:'name',title:'所属线路',width:"100",
editor:{
type:'combobox',
options:{
valueField:'text',
textField:'text',
url:"<c:url value='/nnmis/view/zzjg/comboidLine.tg'/>",
onSelect:function(item){
var ed = $('#adddg').datagrid('getEditor', {index:editIndex,field:'code'});
$(ed.target).val(item.id);
}
}
}
},{
field:'seq',title:'线路中排序',width:"60",
editor:{
type:'text',
min:0
}
},{
field:'kmupstart',title:'上行公里开始',width:"70",
editor:{
type:'numberspinner',
min:0
}
},{
field:'kmupend',title:'上行公里结束',width:"70",
editor:{
type:'numberspinner',
min:0
}
},{
field:'kmdownstart',title:'下行公里开始',width:"70",
editor:{
type:'numberspinner',
min:0
}
},{
field:'kmdownend',title:'下行公里结束',width:"70",
editor:{
type:'numberspinner',
min:0
}
}]],
onClickRow:function(index,data){
var row=$('#adddg').datagrid('getSelected');
if(editIndex == undefined){
$('#adddg').datagrid('beginEdit', index);
editIndex = index;
}else{
$('#adddg').datagrid('endEdit', editIndex);
$('#adddg').datagrid('beginEdit', index);
editIndex = index;
}
},
onBeforeEdit:function(index,row){
row.editing = true;
updateActions(index);
},
onAfterEdit:function(index,row){
row.hadedit='1';
row.editing = false;
updateActions(index);
},
onCancelEdit:function(index,row){
row.editing = false;
updateActions(index);
}
});
});
function updateActions(index){
$('#adddg').datagrid('updateRow',{
index: index,
row:{}
});
}
function getRowIndex(target){
var tr = $(target).closest('tr.datagrid-row');
return parseInt(tr.attr('datagrid-row-index'));
}
function addline(){
/*var dta = $('#adddg').datagrid('getData');
if(dta){
if(dta.rows.length == 0){
$('#adddg').datagrid('appendRow',{
id:'',
code:'',
seq:'0',
kmupstart:'0',
kmupend:'0',
kmdownstart:'0',
kmdownend:'0'
});
}
}*/
$('#adddg').datagrid('appendRow',{
id:'',
code:'',
seq:'0',
kmupstart:'0',
kmupend:'0',
kmdownstart:'0',
kmdownend:'0'
});
}
I had the same issue when I didn't wrapped the output with <html><body> tags.
When I added <html><body> everything became OK.

Grid column center align not applying for rowediting

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);
}
}
}
});

Rally Grid load event is not firing

I've been trying to make sure that the load event in the Rally.ui.grid.Grid is firing since I have a problem because my Grid is not filtering. I tried calling the methods myStore.setFilter() and myStore.load(), these two are firing, but I can't be sure the Grid is working properly since the first time, when it all loads, it does the filtering right, but then when I change the dropdown or combobox it doesn't.
This is how I load myStore:
this.myStore=Ext.create("Rally.data.wsapi.Store",{
model:"Task",
autoLoad:true,
filters: myFilters,
listeners:{
load:function(myStore,myData,success){
if(!this.myGrid) //IT CREATES THE GRID FOR THE FIRST TIME
{
this._loadGrid(myStore)
console.log('Grid Created!');
// this.myStore.setFilter();
// this.myStore.load();
}
else
{
this.myStore.setFilter();
//this.myStore.load();
console.log('Grid reloaded!');
console.log(myFilters);
}
},
scope:this
},
fetch:["FormattedID","State","Iteration", "Release"]
}
)
}
And this is how I load myGrid:
_loadGrid:function(myStoryStore){
this.myGrid = Ext.create("Rally.ui.grid.Grid",{
store:myStoryStore,
columnCfgs:["FormattedID","State","Iteration", "Release"],
listeners: {
load: function(myGridy){
console.log('myGrid did load!');
},
scope:this
}
});
this.add(this.myGrid);
}
Here is an example by David Thomas from his videos on building Rally apps that uses reconfigure method to which a store is passed: _myGrid.reconfigure(myStore)
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
var relComboBox = Ext.create('Rally.ui.combobox.ReleaseComboBox',{
listeners:{
ready: function(combobox){
//console.log('loaded release name', combobox.getRecord().get('Name')); //getRecord() returns currently selected item
var releaseRef = combobox.getRecord().get('_ref');
this._loadStories(releaseRef);
//console.log('what is this', this);
},
select: function(combobox){
var releaseRef = combobox.getRecord().get('_ref');
this._loadStories(releaseRef);
},
scope: this
}
});
this.add(relComboBox);
},
_loadStories: function(releaseRef){
console.log('loading stories for ', releaseRef);
var myStore = Ext.create('Rally.data.WsapiDataStore',{
model: 'User Story',
autoLoad:true,
fetch: ['Name','ScheduleState','FormattedID'],
filters:[
{
property : 'Release',
operator : '=',
value : releaseRef
}
],
listeners: {
load: function(store,records,success){
console.log("loaded %i records", records.length);
this._updateGrid(myStore);
},
scope:this
}
});
},
_createGrid: function(myStore){
console.log("load grid", myStore);
this._myGrid = Ext.create('Ext.grid.Panel', {
title: 'Stories by Release',
store: myStore,
columns: [
{text: 'ID', dataIndex: 'FormattedID', flex: 1},
{text: 'Story Name', dataIndex: 'Name', flex: 2},
{text: 'Schedule State', dataIndex: 'ScheduleState', flex: 2}
],
height: 400
});
this.add(this._myGrid);
},
_updateGrid: function(myStore){
if(this._myGrid === undefined){
this._createGrid(myStore);
}
else{
this._myGrid.reconfigure(myStore);
}
}
});

Resources