Binding checkbox selectionmodel in initComponent is not working as expected in grid component of extjs
What could be the problem in the code? attaching fiddle
https://fiddle.sencha.com/#view/editor&fiddle/2g8r
In order to bind a checkbox in grid, there is a built in plugin.How ever ,if you need to attach the selModel ONLY in the initComponent.Then define grid,attach selmodel and create instance of it. .Here is the updated fiddle https://fiddle.sencha.com/#view/editor&fiddle/2ghc
Ext.define('OuterGrid', {
extend: 'Ext.grid.Panel',
store: userStore,
storeId: 'mystore',
width: 400,
height: 500,
title: 'Sample Application',
columns: [{
text: 'Name',
dataIndex: 'name',
width: 100,
sortable: true
}, {
text: 'Email Address',
dataIndex: 'email',
width: 150,
}, {
text: 'Phone Number',
dataIndex: 'phone',
flex: 1,
}],
initComponent: function() {
this.selModel = Ext.create('Ext.selection.CheckboxModel', {
columns: [{
xtype: 'checkcolumn',
text: 'Active',
dataIndex: 'id'
}],
});
this.callParent();
}
});
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('OuterGrid', {
renderTo: Ext.getBody(),
});
}
});
Related
I have two js files, the maincomp and the nestedcomp. nestedcomp would be used as a reusable component and that is why I need to send parameters to it. This maincomp file:
Ext.define('mycomponents.maincomp', {
extend: 'Ext.window.Window',
itemId: 'maincomp',
xtype: 'maincomp',
modal: true,
bodyPadding: 10,
height: 350,
width: 270,
closeAction: 'destroy',
resizable: false,
renderTo: Ext.getBody(),
requires: [
'mycomponents.nestedcomponent'
],
layout: {
type: 'table',
columns: 1
},
items: [
{
xtype: 'textfield',
fieldLabel: 'Name',
name: 'name',
labelAlign : 'right',
width: 265,
allowBlank: false
},
{
xtype: 'textfield',
fieldLabel: 'Age',
name: 'age',
labelAlign : 'right',
width: 265,
allowBlank: false
}
{
xtype: 'nestedcomp'
}
]
});
and this is my nestedcomp file:
Ext.define('mycomponents.nestedcomponent', {
extend: 'Ext.container.Container',
id: 'nestedcomp',
xtype: 'nestedcomp',
items: [
{
xtype: 'textfield',
fieldLabel: 'Address',
name: 'address',
id: 'address',
labelAlign : 'right',
width: 265,
allowBlank: false
}
],
constructor: function (config) {
this.callParent(arguments);
this.initConfig(config);
return this;
},
initComponent: function () {
}
});
Maybe this is very naive question but the thing is I have no idea on how to pass parameters from maincomp to nestedcomp. I went into the official documentation, and google for an answer, but I was unable to find a solution in order to achieve this, so my question is how to pass parameters from one component into its nested components?
I mostly pass extra parameters to nested component in initComponent:
Ext.define('mycomponents.maincomp', {
extend: 'Ext.window.Window',
itemId: 'maincomp',
xtype: 'maincomp',
modal: true,
bodyPadding: 10,
height: 350,
width: 270,
closeAction: 'destroy',
resizable: false,
renderTo: Ext.getBody(),
requires: [
'mycomponents.nestedcomponent'
],
layout: {
type: 'table',
columns: 1
},
initComponent: function () {
this.items = [
{
xtype: 'textfield',
fieldLabel: 'Name',
name: 'name',
labelAlign : 'right',
width: 265,
allowBlank: false
},
{
xtype: 'textfield',
fieldLabel: 'Age',
name: 'age',
labelAlign : 'right',
width: 265,
allowBlank: false
},
{
xtype: 'nestedcomp',
abc: this.xyz
}
];
this.callParent(arguments);
}
});
Or i just do something method on this view in ViewController like form.loadRecord(r), form.setValues(v) where form is the Ext.form.Panel after view is rendered.
I am working on Ext JS 6.5 modern. I have some condition to disable the grid component, user has only rights to view the grid no one else.
I have tried disabled config and disable method but not working. Here is my Fiddle.
Code snippet
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.data.Store', {
storeId: 'gridStore',
fields: ['name'],
data: [{
name: 'Test 1'
}, {
name: 'Test 2'
}, {
name: 'Test 3'
}, {
name: 'Test 4'
}]
});
Ext.create({
xtype: 'grid',
layout: 'fit',
fullscreen: true,
title: 'Baisc grid example',
store: 'gridStore',
//Here I have put {disabled: true} but not working
disabled: true,
columns: [{
text: 'Name',
flex: 1,
dataIndex: 'name'
}],
listeners: {
childtap: function (grid, location, eOpts) {
alert('childtap');
}
},
items: [{
xtype: 'toolbar',
items: {
xtype: 'button',
ui: 'action',
text: 'Disabled grid',
iconCls: 'x-fa fa-ban',
handler: function () {
//IT is also not working
this.up('grid').setDisabled(true);
this.up('grid').disable();
}
}
}]
//renderTo:Ext.getBody()
});
}
});
Somebody please help me with a solution for disabling the grid component.
As a workaround we can use grid.setMasked(true);
Here is the example Fiddle.
Another approach is to set grid's hideMode to opacity and then set it to hidden (this.up('grid').setHidden(true);).
For Example (editing your fiddle)
Ext.create('Ext.data.Store', {
storeId: 'gridStore',
fields: ['name'],
data: [{
name: 'Test 1'
}, {
name: 'Test 2'
}, {
name: 'Test 3'
}, {
name: 'Test 4'
}]
});
Ext.create({
xtype: 'grid',
layout: 'fit',
fullscreen: true,
title: 'Baisc grid example',
store: 'gridStore',
//Here I have put {disabled: true} but not working
//disabled: true,
hideMode: 'opacity',
columns: [{
text: 'Name',
flex: 1,
dataIndex: 'name'
}],
listeners: {
childtap: function (grid, location, eOpts) {
alert('childtap');
}
},
items: [{
xtype: 'toolbar',
items: {
xtype: 'button',
ui: 'action',
text: 'Disabled grid',
iconCls: 'x-fa fa-ban',
handler: function () {
this.up('grid').setHidden(true);
}
}
}]
//renderTo:Ext.getBody()
});
Also you need this css override:
<style>
.x-hidden-opacity {
opacity: 0.2 !important; //default is 0
pointer-events: none;
}
</style>
I want to implement grid bufferrenderer in my simple grid panel that shows a list of information using ExtJS 4.2.1. Without using the bufferrenderer plugin, it shows all the data, but when i used this plugin, my grid contains no data.
This is my grid without using the plugin
This is my grid using the plugin
The grid panel's code is:
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.panel.Panel',
itemId: 'myPanel',
title: '',
requires: ['Ext.grid.plugin.BufferedRenderer'],
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'gridpanel',
autoRender: true,
autoShow: true,
itemId: 'gridPanel',
title: 'My Grid Panel',
store: 'MyJsonStore',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'id',
text: 'Id'
},
{
xtype: 'gridcolumn',
dataIndex: 'firstName',
text: 'FirstName'
},
{
xtype: 'gridcolumn',
dataIndex: 'middleName',
text: 'MiddleName'
},
{
xtype: 'gridcolumn',
dataIndex: 'lastName',
text: 'LastName'
},
{
xtype: 'gridcolumn',
dataIndex: 'age',
text: 'Age'
},
{
xtype: 'gridcolumn',
dataIndex: 'country',
text: 'Country'
},
{
xtype: 'gridcolumn',
dataIndex: 'city',
text: 'City'
},
{
xtype: 'gridcolumn',
dataIndex: 'street',
text: 'Street'
},
{
xtype: 'gridcolumn',
dataIndex: 'mobile',
text: 'Mobile'
},
{
xtype: 'gridcolumn',
dataIndex: 'phone',
text: 'Phone'
},
{
xtype: 'gridcolumn',
dataIndex: 'zip',
text: 'Zip'
}
],
plugins: 'bufferedrenderer'
/*plugins: {
ptype: 'bufferedrenderer',
trailingBufferZone: 20,
leadingBufferZone: 25
}*/
}
]
});
me.callParent(arguments);
}
});
The Store's code is:
Ext.define('MyApp.store.MyJsonStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.GridModel'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
model: 'MyApp.model.GridModel',
storeId: 'MyJsonStore',
buffered: true,
clearOnPageLoad: false,
clearRemovedOnLoad: false,
leadingBufferZone: 25,
pageSize: 500,
purgePageCount: 10,
trailingBufferZone: 20,
proxy: {
type: 'ajax',
url: 'data/users.json',
reader: {
type: 'json',
root: 'users',
totalProperty: 'total_user'
}
}
}, cfg)]);
}
});
Can anyone help me with this? Thanks
Setting the height property in grid will fix this issue.
height: 300
Make sure that all panels up to the viewport have their layout set to “fit”. Also, region of the grid should be “center”.
I have not tested, but something like this should work:
var grid = Ext.create('MyApp.view.MyPanel', {
layout: 'fit',
region: 'center'
});
var viewport = Ext.create('Ext.container.Viewport', {
renderTo: Ext.getBody(),
items: [
grid
]
});
I have an ExtJS grid with a toolbar button to save the date. The save works and the data is stored. But the grid is not refreshed. How do I reload the grid data after the save?
Ext.define('MyLodge.view.content.MemberGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.membergrid',
initComponent: function(){
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');
var store = Ext.create('MyLodge.store.Members');
Ext.apply(this, {
height: this.height,
plugins: [rowEditing],
store: store,
stripeRows: true,
columnLines: true,
columns: [{
id :'id',
text: 'ID',
width: 40,
sortable: true,
dataIndex: 'id'
},{
text : 'Name',
flex: 1,
sortable : true,
dataIndex: 'name',
field: {
xtype: 'textfield'
}
},{
text : 'E-Mail',
width : 150,
sortable : true,
dataIndex: 'email',
field: {
xtype: 'textfield'
}
},{
text : 'Href',
width : 200,
sortable : true,
dataIndex: 'href',
field: {
xtype: 'textfield'
}
}],
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Add',
iconCls: 'icon-add',
handler: function(){
// empty record
store.insert(0, new MyLodge.model.Member());
rowEditing.startEdit(0, 0);
}
}, {
text: 'Delete',
iconCls: 'icon-delete',
handler: function(){
var selection = grid.getView().getSelectionModel().getSelection()[0];
if (selection) {
store.remove(selection);
}
}
},'-',{
text: 'Save',
iconCls: 'icon-save',
handler: function(){
store.sync();
}
}]
}]
});
this.callParent(arguments);
}
});
You can load store in callback of sync
store.sync({
success: function( response ) {
store.load();
}
});
You will probably want to call store.reload() in a callback from store.save() (what is store.save() anyway? it is not part of Ext.data.Store interface)
I have a GRID which works properly. Now I need to add this GRID to the first Tab Panel. How can I do that?
my code:
GRID.JS
Ext.create('Ext.grid.Panel', {
xtype:'grid',
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
TAB.JS
Ext.create('Ext.tab.Panel', {
width: 300,
height: 200,
activeTab: 0,
items: [
{
title: 'Tab 1',
xtype:'grid'
},
{
title: 'Tab 2',
html : 'Another one'
}
],
renderTo : Ext.getBody()
});
I have added the xtype:grid in GRID.JS and I am trying to access that Grid from TAB.JS in the 1st tab, but it is not getting displayed.
xtype: 'grid' - means create standard Ext.grid.Panel and add it here.
You have two options:
Create your grid and save it into variable.
var _grid = Ext.create('...', {...});
Ext.create('Ext.tab.Panel', {
...
items: [
_grid
]
});
Or, define your own class with new xtype
Ext.define('MyGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.mygrid',
...
});
Ext.create('Ext.tab.Panel', {
...
items: [{
xtype: 'mygrid'
}]
});