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