Extjs MVVM - Slider widget change event - javascript

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/

Related

How to implement a drop-down button inside a table header in Ext.js

For a month I have started working with Ext.Js 4, creating all kind of widgets. Right now I am tying to implement a drop-down option for a column header.
That can be based on something like this ColorPicker
https://docs.sencha.com/extjs/4.2.1/#!/api/Ext.menu.ColorPicker
My code creates a Grid Panel like in this img
Ext.apply(me, {
items : [{
xtype : 'gridpanel',
itemId : 'gridpanelId',
margin : '0 0 0 0',
layout : 'fit',
viewConfig : {
emptyText : '',
deferEmptyText : false,
markDirty : false
},
ftype : 'filters'
}],
store : errorstore,
plugins : [Ext.create('Ext.grid.plugin.CellEditing', {
pluginId : 'celledit',
clicksToEdit : 1
})],
tbar : [{
xtype : 'ixbutton',
itemId : 'tbarswitcha',
text : '',
bgCls : 'but-image-base tbar_error_quit',
height : 60,
width : 90,
margin : '0 10 0 10'
}],
columns : [{
header : 'Startdate',
itemId : 'ColumnStartdate',
dataIndex : 'startdate',
flex : 2,
sortable : true,
renderer : function(value) {
return MyApp.app.formatDate(value);
}
},{
header : 'Source',
itemId : 'ColumnSource',
dataIndex : 'source',
flex : 3,
sortable : false
}
],
bbar : {
xtype : 'ixpagingtoolbar',
itemId : 'ixpt',
margin : '5 10 5 10',
numbButtons : 4,
width : 400
}
}]
});
I am trying to build a possibility for the user to choose a specific type of 'Source'. Something like a filter, where the user has pre-defined options from which to choose, and not to type in.
How should I define a drop-down inside this
columns : {
header : 'Source'
}
Any items you put in a column is placed in the header. Simple example without any styling:
columns = [
{
header: 'Source',
items: [
{
xtype: 'button',
text: 'Options',
menu: {
items: [
{
text: 'Item1'
},
{
text: 'Item2'
},
]
}
}
]
},
]

headerclick event not working on gridpanel using extjs

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');
});
}
}
}
});

Displaying components in Ext.form.Panel

I have a custom component (a grid), that i want to add to a panel, and then have a strip of components on the top.
All the examples on the internet look like this :
var extPanel = Ext.create('Ext.form.Panel', {
items: [{
fieldLabel: 'Send To',
name: 'to',
anchor:'100%'
},{
fieldLabel: 'Subject',
name: 'subject',
anchor: '100%'
},
I want to add my own custom component, called myGrid. I would expect some kind property called component passing in the items, but I have no idea, because there is no documentation on what this 'items' array can be.
var extPanel = Ext.create('Ext.form.Panel', {
items: [{
component : myGrid
anchor:'100%' // anchor width by percentage
}
You can use xtype to explicitly create already defined components.You can refer this fiddle : Demo
I solved my problem by nesting items in items, like so :
this.packageGrid = Ext.create('js.grid.PackageGrid', {
xtype: 'packageGrid',
// title: 'Packages',
width: '100%'
});
var extPanel = Ext.create('Ext.Panel', {
layout:'border',
bodyPadding: 5,
items:[{
region:'center'
,layout:'fit'
,border:false,
items:[
this.packageGrid
]
},{
region:'north'
,layout:'fit'
,border:false
,height:50
,collapsible:false,
items:[
button
]
}],
width: '979px',
height: '400px'
});

Editor cannot disappear after closing Window

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.

Extjs combo not working in IE7

Ext js combo is not working in IE7. I need this combo act like textbox with virtual combo (like google search). It is working in IE9 and FF but not in IE7
This is my code:
SearchIncidentForm=new Ext.FormPanel ({
border:false,
renderTo:'searchIncidentDiv',
id: 'searchIncidentForm',
items : [{
xtype:'panel',
id :'panelsearchIncident',
layout:'column',
defaults:{
columnWidth:0.50,
labelAlign : 'top',
layout:'form',
border:false,
bodyStyle:'margin-top:5px; '
},
border:false,
items : [{
defaults:{anchor:'100%'},
items:[{
id : "incidentId",
fieldLabel : 'Incident Id',
labelStyle: 'color: #6C6C6C;width:85px;padding-top:7px;height: 22px;',
xtype : 'combo',
store:incidentStores,
//style: 'width:85px;height: 18px;',
width:100,
allowBlank : false,
labelAlign: 'top',
displayField : 'incidentId',
valueField : 'incidentId',
selectOnFocus : true,
typeAhead : false,
mode : 'remote',
triggerAction : 'all',
editable: true,
msgTarget:'qtip',
listAlign : 'tl-bl?',
//anchor : '80%',
minChars : 1,
hideTrigger:true,
hiddenName: 'incidentId',
listWidth:100,
listHeight:50,
submittValue:true,
listeners : {
specialkey : function(field, e){
var key=e.getKey();
if (key==e.ENTER) {
incidentSearchButtonHandler();
}
},
beforequery : function(){
var val=Ext.getCmp('incidentId').getValue();
if(isNaN(this.getEl().dom.value)){
Ext.Msg.alert("","Please type numeric value");
}
else{
Ext.getCmp('incidentId').getStore().proxy.setUrl('getIncidentId.html?&query='+this.getEl().dom.value);
}
}
}
}]
},{
items:[{
xtype : 'button',
text : 'Search',
style: 'margin-top:19px;margin-left:20px;width:50px;',
width: 35,
height:15,
handler : incidentSearchButtonHandler
}]
}]
}]
});
}
but it's not working in IE. When I press Search button, an alert is shown that please type Id. That means it doesn't take the value that has been typed. Please help.
I've been bitten by this before with IE: you have an extra comma after the last element of your array:
items:[{
submittValue:true,
listeners : {
specialkey : function(field, e){
var key=e.getKey();
if (key==e.ENTER) {
incidentSearchButtonHandler();
}
}, // <------ Extra comma. Delete it.
]}

Categories