I see the example in ExtJS, but it seems the checkColumn doesn't update the XML. The API is also not so helpful. What I wanted to do is something like this. When the user clicks the checkbox in the grid it will send an AJAX request.
columns: [{
xtype: 'checkcolumn',
width: 30,
sortable: false,
id: 'check1',
dataIndex: 'check11',
editor: {
xtype: 'checkbox',
cls: 'x-grid-checkheader-editor'
},
listeners: {
checkchange: function (column, recordIndex, checked) {
alert(checked);
alert("hi");
}
}
}
]
worked for me :)
in extjs4 you can do this. there is the 'checkchange' event, so you can have something like this :
{
header: 'State',
dataIndex: 'STATE',
xtype: 'checkcolumn',
editor: {
xtype: 'checkbox',
cls: 'x-grid-checkheader-editor'
},
listeners: {
checkchange: function(column, recordIndex, checked) {
console.log(checked);
//or send a request
}
}
}
You are going to want to fire the ajax request on the check change event. Or if you are trying to use the CheckboxSelectionModel in a grid put a listener on rowselect to fire off the ajax request.
if You are going to or want to fire the ajax request on the check change event. I think this will help for you.
columns: [{
xtype: 'checkcolumn',
width: 30,
sortable: false,
id: 'check1',
dataIndex: 'check11',
editor: {
xtype: 'checkbox',
cls: 'x-grid-checkheader-editor'
},
listeners: {
checkchange: function (column, recordIndex, checked) {
Ext.Ajax.request({
url: 'abc.com/index.php',
scope: this,
params: { postData: postdata },
method: 'POST',
success: function (a) {
}
});
}
}
]
Related
I want to use onkeyup event of text field, so we can count that character when enter the text.
enableKeyEvents: true
For key events to work, you need to explicitly specify it.
Working POC code:
Ext.onReady(function () {
Ext.create({
xtype: 'panel',
renderTo: Ext.getBody(),
items: [{
xtype: 'form',
height: 100,
items: [{
xtype: 'textfield',
fieldLabel: 'field label',
value: '1',
enableKeyEvents: true,
listeners: {
keyup: function() {
console.log("key Up called");
},
change: function() {
console.log('changed');
}
}
}]
}]
})
});
Working Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2cbd
You are almost there. In the doc field key events, it is written that key events get fired only if enableKeyEvents is set to true.
{
xtype: 'textfield',
fieldLabel: 'Address',
width: '100%',
enableKeyEvents : true,
listeners: {
keyup : function(obj) {
alert('test fire ' + obj.getValue());
}
}
},
I am new to EXTJS. I have a grid , where I have checkbox column . What I wanted is , how to capture the check or uncheck events happening in the checkbox .
Here is my code for checkbox in my grid
columns : [
{
xtype: 'checkcolumn',
header: 'Enabled',
dataIndex: 'isEnabled',
width: 55
},
....
]
Please help
Just what Evan Trimboli said, with the checkchange event on the grid you can capture when a checkbox changes value.
Ext.create('Ext.grid.Panel', {
//...
columns : [{
xtype: 'checkcolumn',
header: 'Enabled',
dataIndex: 'isEnabled',
width: 55,
listeners: {
checkchange: function(column, rowIdx, checked, eOpts){
//Logic here
}
}
}],
});
There is a little change in the give answer, the checkchange event is for Ext.grid.column.check not for Ext.grid.Panel
Ext.create('Ext.grid.Panel', {
//...
columns : [{
xtype: 'checkcolumn',
header: 'Enabled',
dataIndex: 'isEnabled',
width: 55,
listeners: {
checkchange: function(column, rowIdx, checked, eOpts){
//Logic here
}
}
}]
});
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 am using extjs 4 and I have a grid which shows a field name Approval. Here I have showed checkbox that will be checked when the grid is loaded if the value is true. But if the dataIndex value is fault only the checkbox will appear. Now I want that if I click on unchecked checkbox it will do a action using listeners. But I am not being able to do it. Can anyone please help me on this ? My codes are given below :
{
text: 'Approval',
dataIndex: 'approve',
flex: 1,
align: 'left',
renderer: function(value, metaData, record, row, col, store, gridView){
if(value == true)
{
return '<input type="checkbox" checked="true" />';
}else{
return '<input type = "checkbox" />';
listeners: {
this.approve();
}
}
}
}
approve: function(){
alert('hi');
}
Old answer
The checkbox has a change listener which will get fired after the value has changed.
{
xtype : 'checkbox'
boxLabel : 'This is my checkbox',
name : 'mycheckbox',
inputValue: true,
listeners : {
change: function(cbx, newValue, oldValue){
me.approve();
}
}
}
Note that you can't use this inside the listener because the function gets called inside another scope.
Edit:
Start using a Ext.ux.CheckColumn on your grid.
Now you can use:
{
xtype: 'checkcolumn',
text: 'Approval',
dataIndex: 'approve',
flex: 1,
align: 'left',
sortable: false,
listeners:{
checkchange:function(cc,ix,isChecked){
alert(isChecked);
}
}
}
What you are trying to archive is not possible out of the box.
I guess you want to display the checkbox all the time? Otherwise the CellEditor Plugin is already what you are looking for.
But it should anyway the point to start (I guess). Here is a example code the uses ExtJS classes & images to display a sort of fake combo in a cell along with a celleditior. There is one think you still have to fix; you need to override the cellcontent before the edits starts cause the celleditor seems to remove only default types.
Way going this way? Of course you could modify the checkbox with a unique id and fetch the Ext.Element for it which would now enable you to register events. But that approach has one downside, you need to care about render time otherwise your combos does not exist when you are trying to fetch it. Therefore I recommend you this approach. It you be quite easy to wipe the image before the rendering starts.
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{"name":"Lisa", "email":"lisa#simpsons.com", "phone":true},
{"name":"Bart", "email":"bart#simpsons.com", "phone":false},
{"name":"Homer", "email":"home#simpsons.com", "phone":true},
{"name":"Marge", "email":"marge#simpsons.com", "phone":true}
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{header: 'Name', dataIndex: 'name', editor: 'textfield'},
{header: 'Email', dataIndex: 'email', flex:1},
{header: 'Phone', dataIndex: 'phone',
editor: { xtype: 'checkbox', inputValue: 'true', uncheckedValue: 'false' }, renderer: function(value){
return value ? '<span class="x-form-cb-checked"><div class="x-form-checkbox"></div></span>' : '<div class="x-form-checkbox"></div>';
}
}
],
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
Here's the JSFiddle
After reading this article, I've managed to change rendering.
I'm calling an internal function:
renderer: this.onRenderCell
And this function is like this:
onRenderCell: function(value, metaData, record, rowIndex,
colIndex, store, view) {
metaData.css = 'ini-cell-pas-traduit';
return '«'+value+'»';
}
If you read carefully I return '«'+value+'»'; so for each value it is transformed to: '«value»'; . This is a proof that on every single line, it works perfectly. So should it be for the css. But the css is applied one time out of two!! This drives me nuts.
Here's what it gives (latest Firefox, same with latest Chrome):
Any idea where I should take a look?
Here's a big sample of my source code:
Ext.define('Lang.grid.Panel', {
extend: 'Ext.grid.Panel',
alias: 'widget.langgrid',
requires: [
'Ext.grid.plugin.CellEditing',
'Ext.form.field.Text',
'Ext.toolbar.TextItem'
],
initComponent: function(){
this.editing = Ext.create('Ext.grid.plugin.CellEditing');
Ext.apply(this, {
iconCls: 'icon-grid',
plugins: [this.editing],
dockedItems: [{
xtype: 'toolbar',
items: [{
iconCls: 'icon-add',
text: 'Add',
scope: this,
handler: this.onAddClick
}, {
iconCls: 'icon-delete',
text: 'Delete',
disabled: true,
itemId: 'delete',
scope: this,
handler: this.onDeleteClick
}]
}],
columns: [{
text: 'label',
flex:2,
sortable: true,
dataIndex: 'label'
},{
header: 'fr',
flex: 3,
sortable: true,
dataIndex: 'fr',
renderer: this.onRenderCell,
field: {
type: 'textfield'
}
},{
header: 'es',
flex: 3,
sortable: true,
dataIndex: 'es',
renderer: this.onRenderCell,
field: {
type: 'textfield'
}
},{
header: 'us',
flex: 3,
sortable: true,
dataIndex: 'us',
renderer: this.onRenderCell,
field: {
type: 'textfield'
}
}
]
});
this.callParent();
this.getSelectionModel().on('selectionchange', this.onSelectChange, this);
},
(...)
(snip useless code)
(...)
onRenderCell: function(value, metaData, record, rowIndex,
colIndex, store, view) {
metaData.css = 'ini-cell-pas-traduit';
return '<span style="color:red; font-weight:bold;">«'+
value+'»</span>';
}
});
In the metadata.css (ini-cell-pas-traduit) do this for background-color
background-color : red !important //or whichever color you've specified.
EDIT :
This is happening because the grid is configured with stripeRows : true. I dunno if this is done by default or you did it in the config but forgot to mention it here. When you use stripeRows it sets a background-color which can be overriden using the !important keyword.
Varun Achar is right about using !important, but since you are using Ext JS 4 you should also change
metaData.css = 'ini-cell-pas-traduit';
to
metaData.tdCls = 'ini-cell-pas-traduit';
The 'css' and 'attr' members of metaData have now been replaced with tdCls and tdAttr and the old ones will only work in Ext JS 4 if you also install the Ext 3 compatibility layer.