I am trying to access the number of checkcolumn's selected which are the first columns of a grid.
xtype: 'grid',
itemId: "gdMain",
store: {
type: 'webapi',
api: {
read: 'api/Report/Get'
},
autoLoad: true,
},
columns: [
{ header: 'User', dataIndex: 'user'},
{ header: 'Date', dataIndex: 'date'}
], selModel: {
selType: 'checkboxmodel',
itemId: 'chkUser',
showHeaderCheckbox: true
}
I tried using ComponentQuery
Ext.ComponentQuery.query('#gdMain')
But I am not finding any properties that will tell me the number of rows checked.
Please tell me how to get the number of checkcolumn's selected inside a grid.
You can get the number of selections by accessing the selection model:
theGrid.getSelectionModel().getCount();
Related
I have a datagrid in my code and I am hoping to click through the text and copy it to clipboard but the app is not letting me copy it. Here is some code. Not sure how to enable selection.
Ext.define('xxxxx', {
extend: 'Ext.grid.Panel',
alias: 'widget.xxxxxx',
requires: [
'Ext.grid.*',
'Ext.util.*',
'Ext.data.*',
'Ext.XTemplate',
'Ext.grid.plugin.BufferedRenderer',
...
],
xtype : 'gridpanel',
viewConfig: {
enableTextSelection : true
},
itemId: 'gridId',
ui: 'uipanel-default',
cls: 'uigridpanel-body uigridpanel-column someSummaryGridCls',
header: false,
The enableTextSelection field is set to true and still it doesn't work.
Some code from the DataGrid
initComponent: function () {
var me = this;
Ext.applyIf(me, {
columns: [{
xtype: 'gridcolumn',
draggable: false,
itemId: 'iDColmn',
width: '8%',
autoSizeColumn: true,
dataIndex: 'id',
name: 'id',
text: 'ID',
tdCls: 'gridcellwrap',
menuDisabled: true,
stateId : 'id'
},
{
xtype: 'gridcolumn',
draggable: false,
itemId: 'testColmn',
width: '15%',
tdCls: 'gridcellwrap',
autoSizeColumn: true,
dataIndex: 'test',
name: 'test',
text: 'Test',
menuDisabled: true,
stateId: 'test'
},
You put "enableTextSelection" to the wrong place in your code. That config parameter is tied to columns, not to the grid view.
So, you must use it in your column objects starting with xtype:"gridcolumn". You can enable text selection, for each column separately
Reference: https://docs.sencha.com/extjs/6.6.0/classic/Ext.grid.column.Column.html#cfg-enableTextSelection
Here is the relevant code from the view file:
Ext.define('MARS.view.listings.SummarySetupView', {
extend: 'Ext.Container',
xtype: 'summarysetupview',
requires: [
'MARS.view.listings.SummarySetupController'
],
controller: 'summarysetup',
title: "Summary",
items: [
{
xtype: 'deliverablesGridPanel'
},
{
xtype: 'button',
text: 'Submit',
handler: 'onSubmit'
}
]
});
Here is the relevant code from the controller file:
Ext.define('MARS.view.listings.SummarySetupController', {
extend: 'Ext.app.ViewController',
alias: 'controller.summarysetup',
onSubmit: function () {
console.log(this.getView().refs.gridDeliverables.getChecked());
// Returns [] - empty array
}
});
And here is the definition of my xtype "deliverablesGridPanel":
Ext.define('MARS.view.DeliverablesGridPanel', {
extend: 'Ext.tree.TreePanel',
xtype: 'deliverablesGridPanel',
title: 'Deliverables',
reference: 'gridDeliverables',
flex: 1,
autoScroll: true,
rootVisible: false,
bind: {
store: '{jobTreeStore}'
},
columns: [
{
xtype: 'treecolumn',
dataIndex: 'Name',
text: 'Name',
width: 200
},
{
xtype: 'gridcolumn',
dataIndex: 'Description',
text: 'Description',
flex: 1
}
]
});
It clearly knows that it is a grid because the function works, it just always returns empty...
Checkbox selection columns in grids are usually part of a selection model. I know from old extjs3 days you would do something like grid.getSelectionModel().getSelections() and that would achieve what you are trying to do here.
when a field is 'hidden' in Rally, they will not be shown in any of the SDK's UI components. for example, I cannot make a rallygrid with a column with dataIndex of _ref because _ref is a hidden field. I also have custom fields that are hidden, but I really need to use them to make columns in the rallygrid.
I have looked through the sdk source and know that these are removed from the SDK's ui components, so I guess I'm looking for a workaround, or a hack to get around this issue.
I commented on this issue here
It is possible to include _ref in a grid based on a custom store. I modified a custom data grid example to populate a Reference column with _ref values of each record:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
items:{ html:'App SDK 2.0rc3 Docs'},
launch: function() {
Ext.create('Rally.data.wsapi.Store', {
model: 'userstory',
autoLoad: true,
listeners:{
load: this._onDataLoaded,
scope: this
},
fetch: ['FormattedID', 'Name', '_ref']
})
},
_onDataLoaded: function(store,data){
var records = _.map(data, function(record){
return Ext.apply({
Ref: record.get('_ref')
}, record.getData());
});
this.add({
xtype: 'rallygrid',
showPagingToolbar: false,
showRowActionsColumn: false,
editable: false,
store: Ext.create('Rally.data.custom.Store', {
data: records
}),
columnCfgs:[
{
xtype: 'templatecolumn',
text: 'ID',
dataIndex: 'FormattedID',
width: 100,
tpl: Ext.create('Rally.ui.renderer.template.FormattedIDTemplate')
},
{
text: 'Name',
dataIndex: 'Name'
},
{
text: 'Reference',
dataIndex: 'Ref',
flex: 1
}
]
})
}
});
This is probably an easy one to do with formatting, when I add a row to the grid it comes up blank
code to add the row:
var innerArray = Array(
{'ID':'aaa','Text':'aaa'}
);
searchCriteria.add(innerArray);
Code that makes the table
var searchCriteria = Ext.create('Ext.data.Store', {
// store configs
autoDestroy: true,
storeId: 'myStore',
// reader configs
idIndex: 0,
fields: [
'ID',
'Text'
]
});
Panel
var resultsPanel = Ext.create('Ext.panel.Panel', {
title: 'Search Criteria',
layout: 'fit',
height: 400,
renderTo: Ext.getBody(),
layout: {
type: 'vbox', // Arrange child items vertically
align: 'stretch', // Each takes up full width
padding: 5
},
items: [{ // Results grid specified as a config object with an xtype of 'grid'
xtype: 'grid',
columns: [
{
header: 'ID'
},
{
header: 'Text'
}
], // One header just for show. There's no data,
store: searchCriteria,
flex: 1 // Use 1/3 of Container's height (hint to Box layout)
}]
});
Rows get added, but blank what am I doing wrong?
In your grid columns, add a dataIndex property:
columns: [{
header: 'ID',
dataIndex: 'ID'
},{
header: 'Text',
dataIndex: 'Text'
}
The dataIndex property is what tells the grid where to pull the information from in the stores model
I have a formPanel with a column layout. It works perfectly as long as there are visible fields in every column.
I tried adding in hidden fields to provide space for the parts of the column where I need it but it's displaying very strangely. I did try changing to adding in textFields and hiding them but it was not keepingany space at all.
The screenshot below shows what I mean. There is a hidden field at the end of the 1st row at column 3 and at the bottom of the column 1 and 3 but the layout doesn't show that.
The hidden fields have been implemented as (with unique id/name values):
{
id:'my_field_id',
name: 'my_field_name',
xtype: 'hidden'
}
And my formpanel columns have been configured similar to:
id: 'myForm'
,title: 'Search Form'
,frame:true
,waitMessage: 'Please wait.'
,initComponent: function() {
var config = {
items: [{
layout:'table',
items:[{
//columnWidth:.25,
layout: 'form',
items: [{
xtype: 'datefield',
fieldLabel: "From Date",
id: 'date1'
},
{
xtype:'combo',
id: 'fieldSelecCmb1',
hiddenName: 'ddi_country',
anchor:'98%',
store: fieldStore,
displayField: 'name',
valueField: 'alpha2code',
selectOnFocus: true,
mode: 'local',
typeAhead: true,
editable: false,
triggerAction: 'all',
value: 'emp_id',
listeners:{
select: {
fn:function(combo, value){
myStore.load({params:{ddi_country: this.value}});
}
}
}
},
{
id:'my_field',
name: 'my_field',
xtype: 'hidden'
}
]
},
had the same problem .. we defined a component
Ext.define('NCEN.extended.columnSpacer', {
extend: 'Ext.form.field.Display',
alias: 'widget.columnSpacer',
value: ' '
});
and just use it like
xtype: 'columnSpacer'