I had a extJS fiddle which will alert the user when the checkbox is clicked.
Here is the code:
Ext.application({
name : 'Fiddle',
launch : function() {
var myStore = Ext.create('Ext.data.Store',{
data: [
{
name: 'ex',
oldUser: 'Y'
},
{
name: 'ea',
oldUser: 'N'
}
],
fields: [
{
name: 'name'
},
{
name: 'oldUser'
}
]
});
Ext.create('Ext.grid.Panel', {
height: 250,
width: 579,
title: 'My Grid Panel',
renderTo: Ext.getBody(),
defaultListenerScope: true,
store: myStore,
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'name',
text: 'Name'
},
{
xtype: 'checkcolumn',
dataIndex: 'oldUser',
text: 'OldUser',
listeners: {
// problem here!
beforecheckchange: function(checkcolumn, rowIndex, checked, eOpts) { alert("asd"); }
}
}
]
});
}
});
The beforecheckchange event will fire when I use extjs 4.2.0 and onward, but it won't fire when I used extjs 4.1.1 and versions before that.
But when I check the api doc for version 4.1.1, beforecheckchange is listed as an event I could use.
I want to know why the above example doesn't work for 4.1.1
Looks like You have to add CheckColumn manually:
var myCheckColumn = Ext.create('Ext.ux.CheckColumn',{
text: 'OldUser',
dataIndex: 'oldUser',
listeners: {
beforecheckchange: function(checkcolumn, rowIndex, checked, eOpts) { alert(checked); }
}
});
Try this fiddle:
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.Loader.setConfig({enabled:true});
var myStore = Ext.create('Ext.data.Store',{
data: [
{
name: 'ex',
oldUser: true
},
{
name: 'ea',
oldUser: false
}
],
fields: [
{
name: 'name'
},
{
name: 'oldUser'
}
]
});
var myCheckColumn = Ext.create('Ext.ux.CheckColumn',{
text: 'OldUser',
dataIndex: 'oldUser',
listeners: {
beforecheckchange: function(checkcolumn, rowIndex, checked, eOpts) { alert(checked); }
}
});
Ext.create('Ext.grid.Panel', {
height: 250,
width: 579,
title: 'My Grid Panel',
renderTo: Ext.getBody(),
defaultListenerScope: true,
store: myStore,
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'name',
text: 'Name'
},
myCheckColumn
]
});
}
});
But, there can be a problem to render checkbox. Change background-image in CheckHeader.css or create new and add it into application.
CheckHeader.css:
.x-grid-checkheader {
height: 14px;
background-image: url('images/unchecked.gif');
background-position: 50% -2px;
background-repeat: no-repeat;
background-color: transparent;
}
.x-grid-checkheader-checked {
background-image: url('images/checked.gif');
}
.x-grid-checkheader-editor .x-form-cb-wrap {
text-align: center;
}
Related
Can anyone help me get my double click function working as intended on my grid? Every time a row is double clicked in the grid, I want a Window to pop up with the "command_output" field displayed in the new window.
Currently, I have the window opening without any data in it.
Controller Function
onDoubleClick: function(grid, record) {
var win = Ext.create("Ext.Window", {
id: 'DossierArea',
xtype:'form',
title: 'Dossier',
width: 600
})
win.show();
}
Grid Properties
id: 'ChangeLog',
xtype: 'grid',
viewConfig: {
listeners: {
itemdblclick: 'onDoubleClick'
}
},
split: true,
title: 'Log',
region: 'south',
width: 600,
height: 300,
bind: {store: '{tasks}'},
columns: {
defaults: {
width: 175
},
items:
[
{ text: 'Script Command', dataIndex: 'command_script', flex: 1},
{ text: 'Output', dataIndex: 'command_output', width: 250, flex: 1 },
{ text: 'Status', dataIndex: 'state', width: 175,
renderer: 'deploymentHistoryStatusRenderer'},
{ text: 'Timestamp Completed (GMT)', dataIndex: 'time_command_run', width: 225 },
]
},
bbar: ['->',{
xtype: 'button',
text: 'Refresh',
listeners: {
click: 'refreshActions'
}
}
]
}
Store
Store.model.Base.defineModel(
'Task',
{name: 'step', type: 'int'},
{name: 'state', type: 'int'},
{name: 'command_script', type: 'string'},
{name: 'command_output', type: 'string'},
{name: 'time_command_run', type: 'date', dateFormat: 'g:i A'}
],
true
);
Add textfield in new window config and set value to textField from record variable.
Modify your listener
onDoubleClick: function(grid, record) {
var win = Ext.create("Ext.Window", {
id: 'DossierArea',
title:'My New Window',
layout:'fit',
items:[
{
xtype:'form',
title: 'Dossier',
width: 600,
items:[
{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Output',
value:record.get("command_output"),
allowBlank: false
}
]
}
]
})
win.show();
}
I'm trying to change the column title of a Ext.grid.Panel afterrender the grid.
I/m trying to change column by next
this.headerCt.getHeaderAtIndex(j).setText(column_.text);
After i click to the column-menu -> Columns, the new header value is not displayed,
but the column itself has the new header.
How can I solve this problem
change column headers index in extjs
Ext.onReady(function () {
var userStore = Ext.create('Ext.data.Store', {
autoLoad: 'false',
fields: [
{name:'name'},
{name:'email'},
{name:'phone'}
],
data: [
{name:'Anil',email:'AnilThakurr54#gmail.com',phone:'989681806'},
{name:'Sunil',email:'SunilkumarGmail.com',phone:'8053173589'},
{name:'Sushil',email:'Sushil#gmail.com',phone:'9896133066'},
{name:'Puneet',email:'PuneetChawla#gmail.com',phone:'9729810025'},
{name:'Rahul',email:'RahulSain#gmail.com',phone:'9050438741'},
{name:'Anil2',email:'Ak3217106#gmail.com',phone:'9729935023'},
]
});
Ext.create('Ext.window.Window', {
height: 250,
width: 400,
xtype: 'panel',
layout: 'fit',
title: 'Change Header Of Extjs Grid Column on Button Click',
items:
[
{
layout: 'border',
height: 350,
renderTo: Ext.getBody(),
items:
[
{
xtype: 'panel',
region: 'north',
layout:'fit',
items: [
{
xtype:'grid',
id: 'GridId',
store: userStore,
tbar: [{
text: 'Change',
iconCls: 'employee-add',
handler: function () {
var grid = Ext.getCmp('GridId');
grid.headerCt.getHeaderAtIndex(0).setText('test');
grid.headerCt.getHeaderAtIndex(1).setText('MobileNo');
},
},
{
text: 'by Default',
iconCls: 'employee-add',
handler: function () {
var grid = Ext.getCmp('GridId');
grid.headerCt.getHeaderAtIndex(0).setText('Name');
grid.headerCt.getHeaderAtIndex(1).setText('Email Address');
}
}],
columns: [
{
header: 'Name',
width: 100,
sortable:true,
dataIndex: 'name'
},
{
header: 'Email Address',
width: 150,
dataIndex:'email',
},
{
header:'Phone Number',
flex: 1,
dataIndex:'phone'
}
]
}],
dockedItems: [
{
xtype:'pagingtoolbar',
itemId:'pagingLog',
store:userStore,
dock:'bottom',
displayInfo: true,
}]
}]
}]
}).show();
});
I have an issue in my recent implemented Rally Grid.
_CreatePSIObjectiveGrid: function(myStore) {
if (!this.objGrid) {
var colCfgs = [{
text: 'ID',
dataIndex: 'DragAndDropRank',
width: 50
}, {
text: 'Summary',
dataIndex: 'Name',
flex: 1
}, {
text: 'Success Rate',
dataIndex: 'c_SuccessRate',
width: 200
}];
if (!this.getSetting("useSuccessRatioOnly")) {
colCfgs.push({
text: 'Initial Business Value',
dataIndex: 'PlanEstimate',
width: 200
});
colCfgs.push({
text: 'Final Business Value',
dataIndex: 'c_FinalValue',
width: 200
});
}
this.objGrid = Ext.create('Rally.ui.grid.Grid', {
store : myStore,
enableRanking: true,
defaultSortToRank: true,
height: 550,
overflowY: 'auto',
margin: 10,
showPagingToolbar: false,
columnCfgs : colCfgs
});
Ext.getCmp('c-panel-obj-crud-table').add(this.objGrid);
}
}
Although I have set "enableRanking" to "true", the ranking drag and drop doesn't work if I add my grid to a component. However, the drag and drop function does work perfectly if I change the last statement from
Ext.getCmp('c-panel-obj-crud-table').add(this.objGrid);
to
this.add(this.objGrid);
I don't know if this is a Rally bug. Try to compare the final html file generated, no clue is found.
this few sec video shows that the code below, where a rankable grid is added to a child panel, and not directly to this (this points to the app's global scope) still preserves its ability to rerank:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
var panel = Ext.create('Ext.panel.Panel', {
layout: 'hbox',
itemId: 'parentPanel',
componentCls: 'panel',
items: [
{
xtype: 'panel',
title: 'Panel 1',
width: 600,
itemId: 'childPanel1'
},
{
xtype: 'panel',
title: 'Panel 2',
width: 600,
itemId: 'childPanel2'
}
],
});
this.add(panel);
this.down('#childPanel1').add({
xtype: 'rallygrid',
columnCfgs: [
'FormattedID',
'Name',
'ScheduleState',
'Owner'
],
context: this.getContext(),
enableRanking: true,
defaultSortToRank: true,
storeConfig: {
model: 'userstory'
}
});
}
});
I can't figure out why my customer renderer for my grouped-column grid isn't being called.
Ext.define('PT.view.deal.YearCol', {
extend: 'Ext.grid.column.Column',
alias: 'widget.yearcolumn',
columns: [
{
text: 1,
renderer: function(v, m, r) {
console.log('renderer called'); // THIS IS NEVER CALLED!!!!!!!!
return custom(r);
}
},
...
]
});
Ext.define('PT.view.deal.QuarterlyGrid', {
extend: 'Ext.grid.Panel',
columns: [
{
text: 'Item Number',
dataIndex: 'Item_Number'
},
{
xtype: 'yearcolumn',
text: 2013
},
...
]
});
The grid columns/headers are displayed correctly, but the grid data isn't rendered. Why is that function not being called?
What version are you using? This works ok for me in 4.2.0:
Ext.define('PT.view.deal.YearCol', {
extend: 'Ext.grid.column.Column',
alias: 'widget.yearcolumn',
columns: [{
text: 1,
renderer: function(v, m, r) {
return r.get('foo');
}
}]
});
Ext.define('Grid', {
extend: 'Ext.grid.Panel',
columns: [{
text: 'Item Number',
dataIndex: 'Item_Number'
}, {
xtype: 'yearcolumn',
text: 2013
}]
});
Ext.onReady(function() {
new Grid({
width: 200,
height: 200,
renderTo: document.body,
store: {
fields: ['Item_Number', 'foo'],
data: [{
Item_Number: 1,
foo: 2
}]
}
});
});
I am creating the form below, but for some reason the select button handler doesn't
get executed. Everything else is working properly (loading data into the grid).
Is there something I'm missing?
Ext.Loader.setConfig({enabled:true});
Ext.define('Project', {
extend: 'Ext.data.Model',
fields: ['PID', 'ProjectName']
});
var projectsStore = Ext.create('Ext.data.Store',
{
model: 'Project',
autoLoad: true,
proxy:{
type: 'ajax',
url : 'projects.php?action=read',
reader:{ type:'json', root:'projects', successProperty:'success' } }
});
Ext.onReady(
function()
{
var simple = Ext.create('Ext.form.Panel', {
url:'projects.php?action=select',
frame:true,
title: 'Projects',
bodyStyle:'padding:5px 5px 0',
width: 350,
fieldDefaults: {
msgTarget: 'side',
labelWidth: 75
},
defaultType: 'textfield',
defaults: {
anchor: '100%'
},
items: [{
columnWidth: 0.60,
xtype: 'gridpanel',
store: projectsStore,
height: 400,
title:'General',
columns: [
{header: 'Id', dataIndex: 'PID', flex: 1},
{header: 'Project Name', dataIndex: 'ProjectName', flex: 1},
]
}],
buttons: [{
text: 'Select',
handler: function() {
Ext.Msg.alert('Selecting', action.result.msg);
}
}]
});
simple.render('proj-form');
projectsStore.load();
}
);
Your code is crashing when it's running the handler because action.result.msg doesn't exist.
You can look in Firebug/Chrome Dev Tools and it would have shown you the problem.