I want that the CheckboxModel appear all checked when grid is rendered:
This is my code:
sm = Ext.create('Ext.selection.CheckboxModel', {
listeners: {
selectionchange: function (sm, selections) {
// Must refresh the view after every selection
sm.view.refresh();
}
}
})
The grid:
{
xtype: 'gridpanel',
title: 'gridTitle',
selModel: sm,
store: my_store,
columns: {
items:[
..
]
}
}
You could use afterrender listeners of the grid to select all the rows :
listeners:{
afterrender:function( thisObj, eOpts ){
var sm=thisObj.getSelectionModel();
sm.selectAll(true);
}
},
afterrender may not work, try afterlayout instead:
// in your grid
listeners: {
afterlayout : function (thisObj, eOpts) {
thisObj.getSelectionModel().selectAll();
}
},
// ...
Related
I would like to ask if there is a possibility to only show a button in the toolbar whenever a if statement is true.
for my case i have a snippet here
{
xtype: 'toolbar',
dock: 'bottom',
items: [
{
xtype: 'button',
text: 'Pay!',
handler: function() {
console.log('haha');
}
}
]
}
a toolbar that has a button
but i only want to show the button pay whenever the grid is not empty(I also have a grid)
how is this possible.
THANKS!
You have to bind to all events that indicate changes of the row count. Most of them are store events:
xtype:'grid',
tbar:[{
xtype:'button',
itemId:'Test'
}],
buttonchange:function() {
this.down('button[itemId=Test]').setVisible(this.getStore().getCount()>0);
},
listeners:{
viewready:function(gridview) {
var grid = gridview.ownerCt;
grid.buttonchange();
store.on({
load: grid.buttonchange(),
add: grid.buttonchange(),
remove: grid.buttonchange(),
clear: grid.buttonchange(),
filterchange: grid.buttonchange(),
scope: grid
});
}
}
Since your grid data handled by a store you have to add store load event listener.
I create working fiddle for you.
If you are using ExtJs5/6+ you might be able to bind the visibility of your button to the store count.
Something like:
{
xtype: 'toolbar',
dock: 'bottom',
items: [
{
xtype: 'button',
text: 'Pay!',
bind: {
hidden: '{!storeCount}'
}
handler: function() {
console.log('haha');
}
}
]
}
And you need to set the storeCount yourself as the property is not accessible directly (see https://www.sencha.com/forum/showthread.php?286770-unable-to-bind-view-to-store-size)
Assuming you have yourStore declared in your ViewModel, in the ViewController you should be able to do
initViewModel: function(viewModel) {
viewModel.bind('{yourStore}', function(store) {
if(store) {
store.on('datachanged', function () {
this.set('storeCount', this.getCount()) // this is the viewModel as I set the scope of the function
});
}
}, viewModel);
}
I have a view 'EmployeeList'. Inside it there is a grid. I need to handle the actioncolumn's click event from controller. Here is the view:
Ext.define('ExtApp.view.Employees', {
extend: 'Ext.panel.Panel',
alias: 'widget.employees',
.
.
.
.
.
});
This view contains a grid:
xtype: 'grid',
columns:[{
.
.
.
.
xtype: 'actioncolumn',
text: 'Delete',
width: 100,
items: [{
icon: 'images/deleteEmployee.jpg',
tooltip: 'Delete'
}]
}]
How do I handle the actioncolumn's click event in my controller?
Here is the controller's code:
Ext.define('ExtApp.controller.Employees', {
extend: 'Ext.app.Controller',
refs: [{
ref: 'employees',
selector: 'employees'
}],
init: function () {
//reference for the grid's actioncolumn needed here
}
});
If you wanna handle the clicks with your controller, you will have to add a handler to your actioncolumn like this:
xtype:'actioncolumn',
width:50,
items: [{
icon: 'extjs/examples/shared/icons/fam/cog_edit.png', // Use a URL in the icon config
tooltip: 'Edit',
handler: function(view, rowIndex, colIndex, item, e, record, row) {
this.fireEvent('itemClick', view, rowIndex, colIndex, item, e, record, row, 'edit');
}
}]
And then add event handler in your controller for the itemClick event
init: function() {
this.control({
'actioncolumn': {
itemClick: this.onActionColumnItemClick
}
});
},
onActionColumnItemClick : function(view, rowIndex, colIndex, item, e, record, row, action) {
alert(action + " user " + record.get('firstname'));
}
And you should see it working, fiddle here: https://fiddle.sencha.com/#fiddle/grb
I have a view with the following in my initComponent:
initComponent: function() {
var me = this;
Ext.applyIf(me, {
buttons: [
{
text: 'Guardar',
action: 'commit',
glyph: Glyphs.SAVE
}
],
items: [{
xtype: 'shiftpattern.window.formcode',
height: 50
},
{
xtype: 'shiftpattern.window.grid',
flex: 1
},
{
xtype: 'shiftpattern.window.formpattern',
height: 180
}
]
});
// here i need to listen to the grid's selectionchange event
me.on('selectionchange', me.onGridSelectionChange, me);
me.callParent(arguments);
},
onGridSelectionChange: function(grid, records) {
console.log('daysoff grid selection');
var me = this,
record = records[0];
}
I know that I can do that inside a controller, but in this case this view has it'w own behavior and I can reuse it in my sections of my application.
Is there a way to insert a selector to me.on('selectionchange', me.onGridSelectionChange, me);
Any clue on how to do that?
Just solved it:
me.on('selectionchange', me.onGridSelectionChange, me);
has to go after:
me.callParent(arguments);
I want to get the value of the selected cell in my grid. I have the following codes:
methods:
createPlaylist: function(record){
var scope = this;
var srecords
= getShowImages.getSelectionModel().getSelection();
console.log(srecords);
}
I use the console.log to check if I am getting any value.
grid view:
Ext.ns('dlti.view.widget');
Ext.define('dlti.view.widget.ShowImages' ,{
extend: 'Ext.grid.Panel',
id: 'dlti-grid-images',
alias: 'widget.ShowImages',
forceFit: true,
stripeRows: true,
selType: 'checkboxmodel',
multiSelect: true,
autosync: true,
height: 250,
width: 470,
store: new dlti.store.UploadStore(),
columns: [
{
text: 'Images',
dataIndex: 'imagepath',
renderer: function renderIcon(val) {
return '<img src="' + val + '"width="100px" height="100px" align="middle">';
},
},
{
text: 'Filename',
dataIndex: 'filename',
renderer: function renderDescTarget(val, p, record) {
var desc = '';
desc = '<p style="color:#000;font-size:12px;">' + val + '</p>';
return desc;
}
}
]
});
You need to add a Select listener such as;
selModel: Ext.create('Ext.selection.CellModel', {
allowDeselect: true,
mode: 'SINGLE',
listeners: {
select: {
fn: me.onCellModelSelect,
scope: me
}
}
})
Following that, the function to alert the value of the cell should be something like follows;
onCellModelSelect: function(cellmodel, record, row, column, eOpts) {
/*an if statement is required to parse the column chosen as
record.get() only accepts string values of the column name so
if the columns are named "first", "second", "third", the
following if statement applies*/
var columnName;
if(column === 0){
columnName= 'first';
}else if(column === 1){
columnName= 'Second';
}else if(column === 2){
columnName= 'Third';
}
Ext.Msg.alert('Cell Value',record.get(columnName));
}
});
Hope it works for you. If you want me to send you the whole page of code for this, PM me! <3
You have to listen to gridpanel's cellclick event. In your view, you have to add the following on your gridpanel's config:
listeners : {
cellclick : function(view, cell, cellIndex, record, row, rowIndex, e) {
//handle event
}
}
The grid has a cellclick event you can use:
Fired when table cell is clicked.
EDIT:
In your grid you can add a listener that will be fired each time a cell is clicked (you can add it to the controller instead), like:
listeners : {
cellclick : function(view, cell, cellIndex, record, row, rowIndex, e) {
console.log(cell);
}
}
I think this is just simple, but I have no idea, how to load an existing panel on Tree ItemClick in the region of a viewport!?
TreeController snipped
init: function() {
this.control({
'treemenu': {
itemclick: function(view, node, record, item, index, e ) {
if(node.isLeaf()) {
}
},
itemexpand: function (t,e){
console.log(t.data.value);
}
}
});
}
Viewport snipped:
{
region: 'center',
layout: 'fit',
items: [{
xtype: ''
}]
}
The GridPanel:
Ext.define('MyProject.view.FlyerGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.flyergrid',
border:'0 0 0 0',
title:'Flyer Übersicht',
bbar: Ext.create('Ext.toolbar.Paging', {
//store: store
}),
columns: [
{ text: 'Typ', dataIndex: 'type',flex:1 },
{ text: 'year', dataIndex: 'year' ,flex:1},
]
});
First define a ref that will fetch the panel and the view
refs: [{
ref: 'panel',
selector: 'panel[region=center]' // you might give the panel a itemId instead of using region=center
}]
and a controller method that will add the view
showPanel: function(view, node, record, item, index, e ) {
if(node.isLeaf) {
var grid= this.getFlyerGrid();
if(!grid) {
this.getPanel().add({xtype:'flyergrid'});
}
}
}
As a alternative way for the ref you can also use Ext.ComponentQuery let's say if you need a grid for each record Id and remove a old
showPanel: function(view, node, record, item, index, e ) {
if(node.isLeaf) {
var grid= Ext.ComponentQuery.query('flyergrid[itemId=record.data.id]');
if(!grid) {
var panel = this.getPanel();
Ext.suspendLayouts();
panel.removeAll();
panel.add({xtype:'flyergrid',itemId:record.data.id});
Ext.resumeLayouts(true);
}
}
}
Update your control
this.control({
'treemenu': { itemclick: this.showPanel}
}
});
Please note that all this code is untested and should just show you the trick.