We Keep Coding

Delete is not working in jqx-grid in angularjs

function deleteRender(row, column, value) {
if (!value) {
return;
}
var status = getUserStatus(value);
var actionText = deleteBlockHtml;
if (!isUserContext()) {
actionText = '<span>Delete</span>';
}
if (status) {
actionText = '<span>Activate<span>';
}
return '<span class="grid-link-render"><a class="delete-grid-row" href="#" id="deleteUser_' + value.trim() + '">' + actionText + '</a></span>';
}
columnList = [
{text: 'Status', datafield: 'status', width: "8%", groupable: true, editable: false},
{text: 'Action', datafield: '_id', cellsrenderer: deleteRender, width: "10%", groupable: true, editable: false, filterable: false, sortable: false, menu: false},
];
I am calling the deleteRender() function on click of my delete button which is present in action.Unfortunately,when i scroll down to bottom it is not getting called in grid.
Can anyone plese help me.Thanks.

Please share some more code. The method in cellsrenderer method takes care of tailoring the html to be rendered into that cell of that column using the bounded data for that column which is called for each row when the grid is being painted.
i don't think deleteRender should contain the column list in there. Also, can you please show where you are defining the delete event that is attached for that 'Delete' link in the action column ?
Or please let me know if i'm missing something.

ExtJS reusable views and controllers

I just started with Extjs and I have few basic doubts.I have created a simple view(ScreenPropertiesPage) which has 1 select box and 1 custom view inside it. onchange of the select box value, view field is updated which is done in controller. I am done with creating view and controller which has listener for onchange select box value and updates associated view field.
But now the problem is : in my application I have to create 4 instances of ScreenPropertiesPage view and when onchange event is triggered from any views the textbox of 1st view is updated always. How to combine the event to specific view? What is the best procedure to combine controller and views and to reuse it(Even link to the documents from where I can learn controller view reusability is enough)? Any help is greatly appreciated.
Code skeleton for view:
Ext.define('Configurator.view.screenproperties.ScreenPropertiesPage', {
extend: 'Ext.container.Container',
alias: 'widget.screenpropertiespage',
requires: [
'Configurator.store.screenproperties.ScreenProperties'
],
autoScroll: true,
config: {
overLayMode: false
},
initComponent: function () {
var me = this;
this.items = [{
xtype: 'container',
componentCls: 'screenComboSelectorPanel',
layout: {
type: 'hbox',
align: 'center',
pack: 'center'
},
items: [{
xtype: 'combo',
store: Ext.create(
'Configurator.store.screenproperties.ScreenProperties'
),
itemId: 'screenSelector',
margin: 3,
width: 400,
listConfig: {
maxHeight: 200
},
fieldLabel: 'Screen Name',
disabledCls: 'disabledBtn',
disabled: me.getOverLayMode(),
queryMode: 'local',
emptyText: '-SELECT-',
valueField: 'screenName',
displayField: 'screenName',
forceSelection: true,
selectOnTab: true,
autoSelect: true,
height: 25,
tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div class="x-boundlist-item comboContainer "><div class="rowExpanedrTextArea " style="">{screenName} </div>{[this.isExpandable(xkey,parent,values,xindex)]}</div>',
'</tpl>'
),
displayTpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'{screenName}',
'</tpl>'
)
}]
}, {
xtype: 'screenpropertieseditor',
itemId: 'messagesEditor',
margin: '25',
header: true,
frame: false,
border: true,
collectionName: 'messages',
title: 'Messages'
}]
me.callParent(arguments);
}
});
When user changes the value in combobox I want to update the screenpropertieseditor type view.
Controller for view :
Ext.define('Configurator.controller.ScreenProperties', {
extend: 'Ext.app.Controller',
refs: [{
ref: 'screenPropertiesPage',
selector: 'screenpropertiespage'
}, {
ref: 'screenSelector',
selector: 'screenpropertiespage combobox[itemId=screenSelector]'
}, {
ref: 'screenPropertiesMessagesEditor',
selector: 'screenpropertieseditor[itemId=messagesEditor]'
}, {
ref: 'screenPropertiesPage',
selector: 'screenpropertiespage'
}],
init: function (application) {
var me = this;
this.control({
'screenpropertiespage combobox[itemId=screenSelector]': {
change: this.screenPropertiesPageStoreHandler
}
});
},
screenPropertiesPageStoreHandler: function (thisObj, eOpts) {
var messagesEditor = this.getScreenPropertiesMessagesEditor();
var screenSelector = this.getScreenSelector();
var screenSelected = screenSelector.getValue();
//Screen tile store first time loading handling
if (screenSelected === undefined) {
screenSelected = screenSelector.getStore().getAt(0).data.screenName;
}
var selectedRecord = screenSelector.getStore().findRecord(
'screenName',
screenSelected, 0, false, false, true);
if (selectedRecord != undefined) {
Ext.apply(messagesEditor, {
'screenName': screenSelected
});
try {
messagesEditor.bindStore(selectedRecord.messages());
} catch (e) {}
}
}
});
ScreenPropertiesPage will hava lot more extra fields along with this. I have to create multiple instances of ScreenPropertiesPage. screenPropertiesPageStoreHandler method of Configurator.controller.ScreenProperties will be triggered whenever value changes in the combobox of any ScreenPropertiesPage view. But since my ref and selector in controller are not proper it always refers to the first ScreenPropertiesPage view.

You need to know that Controller in Extjs is singleton.
But you can force Controller in your case ScreenProperties to handle multiple instances of views. This is done by firing events from particular view instance to Controller to handle more complex logic.
Before i throw an example you need to be aware that using refs with handling multiple instance of the same view is wrong because it uses this code(it is just a wrapper): Ext.ComponentQuery.query('yourComponent')[0]; So from your view instances pool it gets first.
So you need to get rid off refs in your controller since it does not work with multiple instance of the same view.
Alright, lets make this happen and implement good way to handle multiple instances of the same view/components.
In your view:
initComponent: function () {
var me = this;
this.items = [{
xtype: 'container',
componentCls: 'screenComboSelectorPanel',
layout: {
type: 'hbox',
align: 'center',
pack: 'center'
},
items: [{
xtype: 'combo',
store: Ext.create(
'Configurator.store.screenproperties.ScreenProperties'
),
itemId: 'screenSelector',
margin: 3,
width: 400,
listConfig: {
maxHeight: 200
},
fieldLabel: 'Screen Name',
disabledCls: 'disabledBtn',
disabled: me.getOverLayMode(),
queryMode: 'local',
emptyText: '-SELECT-',
valueField: 'screenName',
displayField: 'screenName',
forceSelection: true,
selectOnTab: true,
autoSelect: true,
height: 25,
tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div class="x-boundlist-item comboContainer "><div class="rowExpanedrTextArea " style="">{screenName} </div>{[this.isExpandable(xkey,parent,values,xindex)]}</div>',
'</tpl>'
),
displayTpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'{screenName}',
'</tpl>'
),
listeners: {
change: function (cmp, newValue, oldValue) {
this.fireEvent('onCustomChange',cmp,newValue, oldValue)
},
scope: this
}
}]
}
In your Controller - ScreenProperties you need to listen on this event and handle particular instance of component in view:
init: function (application) {
var me = this;
this.listen({
// We are using Controller event domain here
controller: {
// This selector matches any originating Controller
'*': {
onCustomChange: 'onCustonChangeHandler'
}
}
});
},
onCustonChangeHandler: function(componentInstance, newValue, oldValue) {
//Your complex logic here.
//componentInstance is the instance of actual component in particular view
}
In this way you can handle multiple instances of the same view with one controller since every particular component that is created in your view is passed by event.

AngularJS kendo grid with custom command which includes template doesn't handle events

I have an angularjs - kendo UI grid-based solution. In the controller for the grid I have placed the following code:
$scope.customClick = function(e) {
$scope.$apply(
function() {
e.preventDefault();
alert('customClick');
});
};
$scope.gridOptions = {
dataSource: $scope.gridData,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
scrollable: true,
sortable: true,
filterable: true,
selectable: true,
editable: "inline",
columns: [
{
command :[ {text: "", template: '<input type="checkbox" id="check-all" />', click: $scope.customClick} ]
},
{field: "DocumentKey", title: "Document Key"},
{field: "Sender", title: "Sender"},
{field: "Recipient", title: "Recipient"},
{field: "ChangeDate", title: "ReceivedBy Time"},
{field: "FlowComment", title: "Comment"},
{field: "Location", title: "Location"}
]
};
});
Added checkbox is displayed fine, but I don't know how to handle the click event. $scope.customClick is not triggered after clicking on check box.

A fairly old question, the user had probably found a solution long ago, but in case google search gets someone to this question, it's good to have an answer. JavaScript combined with libraries like KendoUI and AngularJS usually allow us to solve problems by using several different approaches, but here is one of them:
Say you have a grid defined like this:
<div kendo-grid="kendo.myGrid" k-options="gridOptions"></div>
Your JavaScript code to define this grid might look like this:
$scope.gridOptions = {
dataSource: new kendo.data.DataSource({
data: dataFromSomeLocalVariableMaybe,
pageSize: 10
}),
sortable: true,
pageable: {
pageSizes: [10, 20, 50]
},
columns: [{
field: "column1",
title: "Column 1",
width: "100px"
}, {
field: "column2",
title: "Column 2",
width: "120px"
}, {
command: [{
template: "<span class='k-button' ng-click='doSomething($event)'> Do something</span>"
}, {
template: "<span class='k-button' ng-click='doSomethingElse($event)'> Do something else</span>"
}],
title: " ",
width: "100px"
}]
};
Notice the $event that is passed to ng-click call to a function. That $event contains the actual click event data.
If it would be like this, then you would need to have these two functions defined:
$scope.doSomething = function($event) {
// Get the element which was clicked
var sender = $event.currentTarget;
// Get the Kendo grid row which contains the clicked element
var row = angular.element(sender).closest("tr");
// Get the data bound item for that row
var dataItem = $scope.kendo.myGrid.dataItem(row);
console.log(dataItem);
};
$scope.doSomethingElse = function($event) {
// Do something else
};
And that's it.

Omit $scope.
It should as follows:
{ command : {text: "", click:customClick}, template: '<input type="checkbox" id="check-all"/>}

Your command template should include ng directive, in your case ng-change for the checkbox input, which would point to your target function:
{
command :[{
text: "",
template: '<input type="checkbox" id="check-all" ng-change="customClick"/>'
}]
}

Getting height of ExtJS panel used as border region

I'm struggling mightily to get the height of an ExtJS panel and the only reason I can think it's any different is that it's the panel defined as a border region, because I've not had this problem otherwise (maybe I need to report a bug to them). I'll begin with some code that demonstrates how I'm trying to get the height, with results demonstrating what the height really is, what ExtJS says it is, and how it's not an issue with a panel using a different layout (one of the panels inside the border region):
'cmBuildTab #cmProductExplorer': {
afterrender: function(productExplorer) {
var domNode = Ext.getDom(productExplorer.el),
savedSearchesPanel = productExplorer.down('#savedSearchesPanel');
console.log('productExplorer.getHeight(): ' + productExplorer.getHeight());
console.log(productExplorer.componentLayout);
console.log(productExplorer.componentLayout.lastComponentSize);
console.log(domNode);
console.log('domNode.style.height: ' + domNode.style.height);
console.log('savedSearchesPanel.getHeight(): ' + savedSearchesPanel.getHeight());
}
},
I was initally encouraged I might have a couple of alternate ways to get the height, via the dom node, or via componentLayout.lastComponentSize but neither of these are accessible to Javascript code, only the chrome console. My final try then would be to parse the returned dom string but that is a horrible hack. Suggestions appreciated; below the console.log results is the pertinent portion of my view config.
console.log results:
productExplorer.getHeight(): 2
Ext.Class.newClass
autoSized: Object
borders: Object
calculateDockBoxes_running: false
childrenChanged: true
frameSize: Object
id: "dock-1155"
info: Object
initialized: true
initializedBorders: true
lastComponentSize: Object
height: 787
width: 254
__proto__: Object
layoutBusy: false
layoutCancelled: false
onLayout_running: false
owner: Ext.Class.newClass
previousComponentSize: undefined
targetInfo: Object
__proto__: Class.registerPreprocessor.prototype
undefined
<div id=​"panel-1049" class=​"x-panel x-box-item x-panel-default" role=​"presentation" aria-labelledby=​"component-1198" style=​"margin:​ 0px;​ width:​ 254px;​ height:​ 787px;​ left:​ 0px;​ top:​ 0px;​ ">​…​</div>​
domNode.style.height:
savedSearchesPanel.getHeight(): 151
View config (partial):
},{
region: 'west',
collapsible: true,
title: 'Product Explorer',
itemId: 'cmProductExplorer',
split: true,
width: '20%',
minWidth: 100,
layout: {
type: 'vbox',
pack : 'start',
},
items: [{
collapsible: true,
width: '100%',
border: false,
title: 'Search',
itemId: 'savedSearchesPanel',
items: [{
border: false,
xtype: 'cmSearchTermAccordionPanel'
},{
border: false,
margin: '5 20 0 20',
html: 'Saved Searches:<hr>'
}]
},{

afterrender is not the event you want to use to determine the heights of components, it fires when the elements have been rendered not after they have been sized. If you are using 4.1 you can use the boxready event which fires only once the the container is intially sized http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-event-boxready . If not you can use the afterlayout event to determine size but that event fires every layout.
Also fyi widths as percentages are not documented as supported in 4.0, I've seen them work and I've seen them fail.
Here is some code I hijacked from the Viewport example thanks to a court ruling this is ok.
4.1
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'north',
html: '<h1 class="x-panel-header">Page Title</h1>',
border: false,
margins: '0 0 5 0'
}, {
region: 'west',
collapsible: true,
title: 'Navigation',
width: 150,
//ADD LISTENERS
listeners: {
afterrender:function(){console.log( 'afterrender ' +this.getHeight())},
boxready:function(){console.log( 'boxready ' +this.getHeight())}
}
// could use a TreePanel or AccordionLayout for navigational items
}, {
region: 'south',
title: 'South Panel',
collapsible: true,
html: 'Information goes here',
split: true,
height: 100,
minHeight: 100
}, {
region: 'east',
title: 'East Panel',
collapsible: true,
split: true,
width: 150
}, {
region: 'center',
xtype: 'tabpanel', // TabPanel itself has no title
activeTab: 0, // First tab active by default
items: {
title: 'Default Tab',
html: 'The first tab\'s content. Others may be added dynamically'
}
}]
});
Output :
afterrender 2
boxready 276

Why am I getting errors in ext-all-debug.js in lines 4236 - 4242?

I've developed a PHP framework that generates ExtJS code in the form of an application.
This involves building the full ExtJS object literal on the first call, e.g.:
Ext.onReady(function(){
menuItemStart = new Ext.Panel({
id: 'panelStart',
title: 'Start',
html: 'This is the start menu item.',
cls:'menuItem'
});
...
and then navigation in the application consists of event handlers which load PHP files via AJAX that output ExtJS code, and then execute this code with this function:
function loadViewViaAjax(url, paramTargetRegion) {
Ext.Ajax.request({
url: url,
success: function(objServerResponse) {
var responseText = objServerResponse.responseText;
var scripts, scriptsFinder=/<script[^>]*>([\s\S]+)<\/script>/gi;
while(scripts=scriptsFinder.exec(responseText)) {
eval(scripts[1]);
}
}
});
}
This works well. However, I now have this situation where when a page is loaded from PHP instead of via a triggered ExtJS event handler, I get errors that are varied but all come from one block of code in the ext-all-debug.js file, namely in line 4236 and line 4242:
Has anyone experienced anything similar or know what could be causing this?
Addendum
Yes #ChrisR, here is an error I can reproduce on my machine:
It says it is getting the error in the fourth line of this code, but if I click on it, it takes me to line 4242 shown above in the ExtJS library code.
<script type="text/javascript">
clearExtjsComponent(targetRegion);
var panel_form = new Ext.FormPanel({
labelWidth: 100,
frame:true,
style: 'margin: 10px',
title: 'Test Product (TEST PAGE 2)',
bodyStyle:'padding:5px 5px 0',
width: 500,
defaultType: 'textfield',
items: [{
fieldLabel: 'ID',
value: "111",
name: 'id',
width: 370,
hidden: false,
style: 'text-align: right',
name: 'id',
width: 50,
hidden: false,
},{
fieldLabel: 'Product',
value: "Paper",
xtype: 'displayfield',
name: 'product',
width: 370,
hidden: false,
},{
fieldLabel: 'Label',
value: "none",
name: 'product3',
width: 370,
hidden: false,
},{
fieldLabel: 'Label',
value: "first line\<br/>second line\<br/>third line",
xtype: 'displayfield',
height: 100,
xtype: 'displayfield',
name: 'product4',
width: 370,
hidden: false,
}
],
buttons: [{
text: 'Save',
handler: function() {
if(panel_form.getForm().isValid()){
panel_form.getForm().getEl().dom.action = 'backend/application/help/test';
panel_form.getForm().getEl().dom.method = 'POST';
panel_form.getForm().submit({
success : function(form, action) {
replace_region_with_uri_content('backend/modules');
}
})
} else {
Ext.Msg.minWidth = 360;
Ext.Msg.alert('Invalid Form', 'Some fields are invalid, please correct.');
}
}
},{
text: 'Cancel',
handler: function(){
replace_region_with_uri_content('backend/modules');
}
}]
});
replaceComponentContent(targetRegion, panel_form);
hideComponent(regionHelp);
</script>

Is this on IE? If so, all the trailing commas in your code may be the issue (they certainly are an issue). Also, lots of duplicate configs in your first item. Try running JSLint on your code from time to time to catch stuff like that.