I have started to use ExtJs 4. I have grid with buttons in one column. I can't manage to get button click for button in selected cell by controller. I would like to get click and then details for row in order to open extra window with details.
Code:
Ext.define('AP.controller.List', {
extend : 'Ext.app.Controller',
stores : ['Users'],
models : ['User'],
views : [ 'List', 'Details' ],
init : function() {
console.log("users");
this.control({
'viewport > listPanel > userlist' : {
itemdblclick : this.userDbCClicked
},
'viewport > listPanel button AND WHAT MORE ?' : {
click : this.statusButtonClicked
}
});
},
userDbCClicked : function(grid, record) {
console.log("user db clicked");
},
statusButtonClicked : function(grid, record) {
// Here I would like to get row details after click on button in column
console.log("statusButtonClicked clicked ");
}
});
What should be put instead this code:
'viewport > listPanel button AND WHAT MORE?' : {
click : this.statusButtonClicked
}
Of course it dosen't work. How to get row by click on button in cell ?
Thanks in advance for help.
ExtJs is very powerfull framework but first steps are realy difficulted sometimes.
Bogus
put an action:'statusbutton' in your button config
then use 'viewport > listPanel > button[action=statusbutton]'
What Chris says is true. You can also you a name property on your button, it's just a way of querying your components. Explained here:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.ComponentQuery
{
xtype: 'button',
name: 'statusbutton'
}
'viewport > listPanel > button[name=statusbutton]'
Here is a good starting guide for Ext.Apps:
http://docs.sencha.com/ext-js/4-1/#!/guide/mvc_pt1
and another one:
http://docs.sencha.com/ext-js/4-1/#!/guide/application_architecture
Related
I have a simple grid containing an editable column with phone numbers.
I would like to add a small icon that the user can click on containing a "tel: link" so that their "phone hardware" can pick it up from there.
I have prepared a simple demo -> https://dojo.telerik.com/ogAgURep/2
Goal: When clicking the Phone-Button do not enter "Edit Mode" ..otherwise enter "Edit Mode"
Problem: Clicking Phone-Button enters "Edit Mode"
In the schema set your "Tel" column to editable false.
schema: {
model: {
fields: {
firstColumn: { editable: false },
name: { validation: { required: true } },
tel: { editable: false }
}
}
},
To make it so the column is still editable except when the phone icon is clicked, you could change icon to a javascript function that exits edit mode as well as the original action:
template: function(args){
if(args.tel==null){ return ''; }
return args.tel + '<span class="k-cell-link-i"> </span>';
}
function call(e){
var grid = $('#grid').data('kendoGrid');
grid.cancelChanges();
//other logic originally in the template
}
I'm having a list of contact details. User can select, add and remove those contact details.(Please see the fiddle JSfiddle ) whenever the user click an add button, a new contact model item will be add to the DOM.
var ContactModel = {
ContactData : [
{ 'ContactKey': 12323, 'Ref': 'Reference-Marsh', 'ContactName': 'Marsh Global' },
{ 'ContactKey': 44234, 'Ref': 'Reference-AON', 'ContactName': 'AON Co' },
{ 'ContactKey': 65343, 'Ref': 'Reference-Europ', 'ContactName': 'Europ Ltd' },
{ 'ContactKey': 78555, 'Ref': 'Reference-ECB', 'ContactName': 'ECB Tradings' },
{ 'ContactKey': 24242, 'Ref': 'Reference-Jersey', 'ContactName': 'New Jersey Inc' }
],
Items: ko.observableArray(),
MainContacts : ko.observable(),
AddItem: function () {
ContactModel.Items.push(new Contact([]));
},
Remove: function (line) {
ContactModel.Items.remove(line);
}
}
please see the rest of the code in the fiddle
when the user click a radio button, that selected radio button line data considered as main contact.I have to save all of the line items data. this is because when the user revisited the page,I'll bring all the line item with selected main contact.
when the user change the select list, the selected item object having the properties of ContactKey,Ref and ContactName according to that the other observable are updated.
but if the radio button is selected only the main contact will be updated. I've achieved that using pure jquery. but the value radio button value binding bit confusing for me. can any one help me to sort that issue.
If i understood your intentions right, my modifications to the fiddle shall present you a solution, basically:
I gave names to the radio buttons so that they are exclusive.
I moved logic from the view to the ischecked observable that is now a computed.
I changed the binding logic for the main contact.
Some small tweeks that can be seen in the fiddle.
Here's the fiddle: http://jsfiddle.net/QmQy9/4/
If theres something different from what you intended, just let me know.
Regards.
If I have a list on a page, and it is using knockout's foreach binding to display list items, then something else updates the DOM to add an extra list item. If there any way I can get knockout to detect that DOM change and update its model to add the new item to the observableArray?
Here is a fiddle which shows the problem...
http://jsfiddle.net/BGdWN/1/
function MyViewModel() {
this.items = ko.observableArray([
{ name: 'Alpha' }, { name: 'Beta' }, { name: 'Gamma' }, { name: 'Delta' }
]);
this.simpleShuffle = function() {
this.items.sort(function() {
return Math.random() - 0.5; // Random order
});
};
this.simpleAdd = function() {
$("#top").append("<li>New item</li>");
}
}
ko.applyBindings(new MyViewModel());
It has 2 lists bound to the same observableArray, click the addItem button and you can see that the DOM is updated to include the new list item in the top list, but I would like the second list to be updated too, all via the model.
It seems that knockout ignores DOM elements that it didnt render, you can see this by clicking the shuffle button, it leaves the new items there. I would have expected it to remove them and do a full re-render.
Please don't answer with "Just add the item to the observableArray"
Take a look at the first link and the second link Interface MutationEvent
See Fiddle
$('#top').bind('DOMNodeInserted DOMNodeRemoved', function () {
alert('Changed');
});
I hope it helps.
I'm trying to open a details popup to show more details about a record in a kendoUI grid.
I've seen this sample: http://demos.kendoui.com/web/grid/detailtemplate.html
But instead of a grid, i'd like to open a popup passing the ID of the selected record.
How can I do this?
Have you seen the custom popup example?
http://demos.kendoui.com/web/grid/custom-command.html
The Kendo Grid has its own popup edit form that takes care of that and can also be customized with a template.
http://demos.telerik.com/kendo-ui/grid/editing-popup
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-editable.template
Pretty straightforward. Subscribe to the onChange event and alert the selected id. I assume you mean the attribute id. :
function onChange(arg) {
var selected = $.map(this.select(), function(item) {
return $(item).attr("id");
});
alert(selected);
}
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
data: createRandomData(50),
pageSize: 5
},
change: onChange,
columns: [
{
field: "FirstName",
title: "First Name"
},
{
field: "LastName",
title: "Last Name"
},
{
field: "Age"
}
]
});
});
Can someone please throw some light on how to go about rendering an hyperlink in the cells of a particular column in ExtJS?
I have tried binding the column to a render function in my JS, from which I send back the html:
SELECT
However, with this, the problem is that, once I hit the controller through the link, the navigation is successful, but subsequent navigations to the data-grid show up only empty records.
The records get fetched from the DB successfully through the Spring MVC controller, I have checked.
Please note that this happens only once I use the row hyperlink in the extJS grid to navigate away from the grid. If I come to the grid, and navigate elsewhere and again come back to the grid, the data is displayed fine.
The problem only occurs in case of navigating away from the grid, using the hyperlink rendered in one/any of the cells.
Thanks for your help!
This is for ExtJS 4 and 5.
Use a renderer to make the contents look like a link:
renderer: function (value) {
return ''+value+'';
}
Then use the undocumented, dynamically generated View event cellclick to process the click:
viewConfig: {
listeners: {
cellclick: function (view, cell, cellIndex, record, row, rowIndex, e) {
var linkClicked = (e.target.tagName == 'A');
var clickedDataIndex =
view.panel.headerCt.getHeaderAtIndex(cellIndex).dataIndex;
if (linkClicked && clickedDataIndex == '...') {
alert(record.get('id'));
}
}
}
}
Try something like this:
Ext.define('Names', {
extend: 'Ext.data.Model',
fields: [
{ type: 'string', name: 'Id' },
{ type: 'string', name: 'Link' },
{ type: 'string', name: 'Name' }
]
});
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{
text: 'Id',
dataIndex: 'Id'
},
{
text: 'Name',
dataIndex: 'Name',
renderer: function (val, meta, record) {
return '' + val + '';
}
}
...
...
...
However my thanks to - ExtJS Data Grid Column renderer to have multiple values
Instead of using an anchor tag, I would probably use plain cell content styled to look like an anchor (using basic CSS) and handle the cellclick event of the GridPanel to handle the action. This avoids dealing with the anchor's default click behavior reloading the page (which is what I'm assuming is happening).
I created a renderer so it looked like you were clicking on it.
aRenderer: function (val, metaData, record, rowIndex, colIndex, store){
// Using CellClick to invoke
return "<a>View</a>";
},
But I used a cell event to manage the click.
cellclick: {
fn: function (o, idx, column, e) {
if (column == 1) // Doesn't prevent the user from moving the column
{
var store = o.getStore();
var record = store.getAt(idx);
// Do work
}
}
}
For these purposes I use CellActions or RowActions plugin depending on what I actually need and handle cell click through it.
If you want something that looks like an anchor, use <span> instead and do what #bmoeskau suggested.
You can use 'renderer' function to include any HTML you want into cell.
Thanks guys for your response.
AFter debugging the extJS-all.js script, I found the issue to be on the server side.
In my Spring MVC controller, I was setting the model to the session, which in the use-case I mentioned earlier, used to reset the "totalProperty" of Ext.data.XmlStore to 0, and hence subsequent hits to the grid, used to display empty records.
This is because, ext-JS grid, checks the "totalProperty" value, before it even iterates through the records from the dataStore. In my case, the dataStore had data, but the size was reset to null, and hence the issue showed up.
Thanks to all again for your inputs!