I'm trying to invoke headerclick event using ext js listener but unable to invoke.
here is my code:
var myGrid = Ext.Create('Ext.grid.Panel', {
renderTo: 'shrGrid',
renderTo: myGrid,
store: myStore, //JSON object
columns: myGrid.columns, //JSON object
viewConfig: {
listeners: {
cellclick: function (view, cell, cellIndex, record, row, rowIndex, e) {
alert("cell clicked");
},
headerclick function (shrGrid, columns , e, t, eOpts) {
alert("header clicked");
}
}
}
});
Here the cellclick is being invoked without any issue.
but headerclick is neither being invoked neither nor giving any error.
I just used headerclick here only. pls help me I missed anything or give me some example link.
Your myGrid.columns probably looks something like this:
columns : [{
header : 'Name',
dataIndex : 'name',
sortable : false,
field : {
allowBlank : false
}
}, {
id: 'headerid', //Set your id here
header : 'Description',
dataIndex : 'description',
sortable : false,
field : {}
}, {
header : 'Order',
width : 40,
dataIndex : 'sortOrder',
hidden : true
}, {
header : '',
dataIndex : 'id',
width : 30,
fixed : true,
sortable : false,
hideable : false,
align : 'center',
renderer : function (v, p, r) {
return "<img alt='Delete this record' src='images/icons/delete.gif'>";
}
}],
If you do that you can access the id and add a listener like this
var myGrid = Ext.Create('Ext.grid.Panel', {
renderTo: 'shrGrid',
renderTo: myGrid,
store: myStore, //JSON object
columns: myGrid.columns, //JSON object
viewConfig: {
listeners: {
render: function(component) {
Ext.get('headerid').on('click',function() { //reference the id you defined for the column header
alert('header clicked');
});
}
}
}
});
Related
In the MVVM structure I am very confused of how can I trigger some functions in the controller from some view elements. Handlers for buttons and some simple things are working, but here I have an example, which I couldn't figure out properly.
https://fiddle.sencha.com/#fiddle/qcf
Or see
Ext.define('MVVM.view.Master', {
extend : 'Ext.grid.Panel',
xtype : 'mvvm-MasterView',
requires: [
'Ext.grid.column.Action',
'Ext.ProgressBarWidget',
'Ext.slider.Widget',
'Ext.sparkline.*'
],
title : 'Master Panel',
store : 'People',
columns: [
{
text : 'Name',
dataIndex : 'name'
},{
text : 'Slider',
xtype : 'widgetcolumn',
width : 120,
dataIndex: 'progress',
widget: {
xtype: 'sliderwidget',
minValue: 0,
maxValue: 1,
decimalPrecision: 2,
listeners: {
change: function(slider, value) {
//how to trigger something in the controller?
}
}
}
}
},
{
text : 'Email',
dataIndex : 'email',
flex : 1
},
{
text : 'Phone',
dataIndex : 'phone'
}
]
});
Every time the slider changes, I need to call a function in the controller. How to do that?
This doesn't work:
listeners: {
change: 'controllerFunction'
}
Thanks
If you mean a normal Controller rather than a ViewController then you can do something like this:
var controller = MyApp.app.getController('MyApp.controller.MainController');
controller.doMethod();
If you mean a View Controller then this article is very useful:
https://www.sencha.com/blog/using-viewcontrollers-in-ext-js-5/
I am using JQuery EasyUI 1.3.4, I am having some trouble catching onUnselect event, following code illustrates my problem:
function NavigateProcess() {
$(function () {
var data = list;
$('#dg').datagrid({
view: detailview,
cache: true,
data: data,
loadMsg: 'Processing, please wait …',
singleSelect: true,
columns: [[
{
title: 'Name', field: 'Name', width: 180, editor: 'text'
//,formatter: formatProgress
},
{ field: 'ID', title: 'ID', width: 60, align: 'right', editor: 'text' },
{ field: 'RatePlan', title: 'RatePlan', width: 80, editor: 'text' },
{ field: 'ActivationDate', title: 'ActivationDate', width: 80, editor: 'text' },
{ field: 'DataType', title: 'DataType', hidden: 'true' }
]],
onUnselect: function (rowIndex, rowData) {
alert('unselect');
if (lastselectedrow) {
$('#dg').datagrid('endEdit', lastselectedrow);
}
},
onSelect: function (rowIndex, rowData) {
alert('select');
lastselectedrow = rowIndex;
$('#dg').datagrid('beginEdit', rowIndex);
},
detailFormatter: function (index, row) {
return '<div style="padding:1px"><table id="ddv-' + index + '"></table></div>';
}
});
});
function doSearch() {
$('#tt').datagrid('load', {
itemid: $('#itemid').val(),
productid: $('#productid').val()
});
}
}
I put two alert statements in onSelect and onUnselect events, onSelect is triggered when I click on a row. Since singleSelect property is true, selecting another row will result in an onUnselect and onSelect events, at least that's my understanding. When I click on rows only onSelect alert pops up, alert of onUnselect never pops up, can somebody point me how to capture onUnselect event? Any help will be appreciated.
there is an inherent bug that prevents invoking onUnselect event
I have an Ext grid panel as following.
var plannedGrid = new Ext.grid.GridPanel({
store : plannedGridStore,
cm : new Ext.grid.ColumnModel([ selectModel, {
sortable : true,
header : "Drop/Pick Loc",
dataIndex : 'locationName',
width : 170,
renderer : function(value, metaData, record, rowIndex,
colIndex, store) {
var refColor = record.data.tourTypeColor;
//console.log(record);
metaData.attr = 'style="background-color:' + refColor + ';"';
return record.get('locationName');
}
}, {
xtype : 'actioncolumn',
header : "GPS",
items : [ {
icon : 'images/gps.jpg',
tooltop : 'Get GPS',
handler : function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Edit " + rec.get('locationName'));
}
} ]
}, {
header : "EST.Un/Load Time",
sortable : true,
dataIndex : 'estimatedTime',
width : 100
}, {
header : "",
sortable : true,
dataIndex : 'colorCode',
width : 30
} ]),
sm : selectModel,
//width : 435,
height : 400,
//autoHeight : true,
autoWidth : true,
frame : true,
iconCls : 'icon-grid'/*,
listener : {
selectionchange : function() {
Ext.getCmp('btnHold').enable();
}
}*/
//renderTo : document.body
});
The data of this grid panel are coming from another grid. And also I have a button in a button group as following.
{
text : 'Hold Drop/Pick',
id : 'btnHold',
iconCls : 'add',
width : 120,
// textAlign: 'center',
//style : 'margin:5px',
style : {
textAlign: 'center',
margin : '5px'
},
disabled : true
}
This button is disabled. What I want is, I need to enable this button when user clicks a row of the grid panel.
I am using ExtJs 3.4.
How should I do that ?
Kind regards
Use 'rowclick' listener (for grid):
listeners: {
rowclick: function(grid, idx){
Ext.getCmp('btnHold').enable();
}
}
P.S. It's very bad when you use 'id' parameter in your components. Try to remove it and get access to button by using another components. Sorry for my english, guys!
I got a problem on Ext 4.1.0 and Ext 4.1.1
Double click first cell to edit it and then click window close button, the editor still floats on the page.But it is ok for last cell.
Anyone met this problem before? Thanks
Ext.onReady(function(){
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa#simpsons.com", "phone":"1224" },
{ 'name': 'Bart', "email":"bart#simpsons.com", "phone":"1234" },
{ 'name': 'Homer', "email":"home#simpsons.com", "phone":"1244" },
{ 'name': 'Marge', "email":"marge#simpsons.com", "phone":"1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
var table = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{
text: 'Name',
dataIndex: 'name',
editor: { xtype: 'textfield', toFrontOnShow: false }
},
{
text: 'Email',
dataIndex: 'email',
flex: 1
},
{
text: 'Phone',
dataIndex: 'phone',
editor: {
xtype: 'numberfield',
hideTrigger: true,
validateOnChange : false
}
}
],
height: 200,
width: 400,
plugins:[ Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 2
})]
});
var window = new Ext.Window({
id: 'abc',
title :'abc',
modal : true,
layout: 'border',
resizable : true,
draggable : true,
closable : true,
closeAction : 'hide',
width :410,
height :210,
items : [table]
});
window.show();
});
The easiest way to handle this for you, would be to listen to the window's beforeclose event and cancel any editing in this event using the celleditor's cancelEdit method as described here in the docs.
For example, here is your window object (from your code above) with the listener applied:
var window = new Ext.Window({
id: 'abc',
title :'abc',
modal : true,
layout: 'border',
resizable : true,
draggable : true,
closable : true,
closeAction : 'hide',
width :410,
height :210,
items : [ table],
// add this listener to your window
listeners: {
beforeclose: function(panel) {
var view = panel.down('gridview');
if (view && view.editingPlugin) {
view.editingPlugin.cancelEdit();
}
}
}
});
Reply to comment:
Here's an override that would do the same thing. You would have to include this override in each app after ExtJS initialization though.
Of course it is also possible to replace the init function in the Ext.grid.plugin.Editor source code with this one (then you wouldn't have to include the override in the app) but I wouldn't recommend doing that for a number of reasons.
Ext.override(Ext.grid.plugin.Editor, {
init: function(grid) {
// the normal init code (below) must be included in the override
var me = this;
me.grid = grid;
me.view = grid.view;
me.initEvents();
me.mon(grid, 'reconfigure', me.onReconfigure, me);
me.onReconfigure();
grid.relayEvents(me, [
'beforeedit',
'edit',
'validateedit',
'canceledit'
]);
grid.isEditable = true;
grid.editingPlugin = grid.view.editingPlugin = me;
// additional code to cancel editing before a grid is hidden
grid.on('beforehide', function(grid) {
var view = grid.view;
if (view && view.editingPlugin) {
view.editingPlugin.cancelEdit();
}
});
// additional code to cancel editing before a grid is destroyed
grid.on('beforedestroy', function(grid) {
var view = grid.view;
if (view && view.editingPlugin) {
view.editingPlugin.cancelEdit();
}
});
}
});
I would also recommend looking into MVC architecture, it would make handling things like this alot easier for you.
Is there any way to set the width of an ExtJS (version 4) ComboBox's dropdown menu to be wider than that of the actual input box?
I have a comboxbox that i want to be around 200px but I have paging on the results dropdown and that width is not even big enough to show all the paging bar's controls.
Here's my code to create the combo:
var add_combo = Ext.create('Ext.form.field.ComboBox',
{
id : 'gbl_add_combo',
store : Ext.create('Ext.data.Store',
{
remoteFilter : true,
fields : ['gb_id', 'title'],
proxy :
{
type : 'ajax',
url : 'index.php/store/get_items',
reader :
{
type : 'json',
root : 'records',
totalProperty : 'total',
successProperty : 'success'
},
actionMethods :
{
read : 'POST',
create : 'POST',
update : 'POST',
destroy : 'POST'
}
}
}),
listConfig:
{
loadingText: 'Searching...',
emptyText: 'No results found'
},
queryMode : 'remote',
hideLabel : true,
displayField : 'title',
valueField : 'gb_id',
typeAhead : true,
hideTrigger : true,
emptyText : 'Start typing...',
selectOnFocus : true,
width : 225,
minChars : 3,
cls : 'header_combo',
pageSize : 15
});
There are two parts to this. Firstly, you need to set matchFieldWidth: false in your combobox config. You can then specify width attributes in the listConfig section to style just the dropdown, while specifying the width of the combobox itself in the main config.
This varies from the pervious version, which just let you specify the listWidth property.
I didn't find way to change 'matchFieldWidth' property dynamically. So I found another solution:
{
xtype: 'combobox',
fieldLabel: 'Short Options',
queryMode: 'local',
store: ['Yes', 'No', 'Maybe'],
matchFieldWidth: false,
listConfig: {
listeners: {
beforeshow: function(picker) {
picker.minWidth = picker.up('combobox').getSize().width;
}
}
}
}
Source: http://www.sencha.com/forum/showthread.php?293120-Setting-BoundList-minWidth-to-the-width-of-a-parent-ComboBox-without-matchFieldWidth
In ExtJS 7+ modern, you need to use the beforepickercreate event if you wish to control the width of the combobox's picker.
It's not very intuitive, but it works.
xtype: 'combobox',
...
listeners: {
beforepickercreate: {
fn: function(cmp, newV) {
newV.listeners = {
beforeshow: function(cmp) {
cmp.setMinWidth(400);
cmp.setWidth(400);
}
}
return newV;
}
}
}