I have a dojo datagrid displaying records. I am displaying image on each row. On click of the image, a request to delete the record should sent to the server. I am setting structure to the grid in Js class file. I have formatted the column to display the image as below.
GridStructure= [
{
name: "Name",
field: "Name",
width: "100px",
rowSelector : '20px'
},
{
name: '',
width: '20px',
field: "",
formatter: function(inValue) {
this.customStyles.push("vertical-align:middle");
return "<img src='images/delete.jpg'/>";
}
}]
how should I handle the onclick event of image and call another JS method which will pass the row details to the business layer for further processing.
Thanks in advance.
I got it working but with a twist. Instead of writing event handling on images, I wrote it on the cell holding that image. So that way I get all the details about row index, the data in the row, everything. that served my purpose. :)
Related
Using Tablulator (great product!), I am trying to keep the cursor from resetting to the first editable cell in the table after editing a cell. The replaceData function is updating the data element, and while the scroll position does not change, the cursor is reset. I'm not sure how to do this correctly. The documentation, while great, is silent about cursor position beyond the next(), etc methods, which I cannot quite get to work.
In my vue.js table definition component, I have a watch like this:
watch: {
tableData: {
handler: function (newData) {
this.tabulator.replaceData(newData);
},
deep: true,
}
},
and a cellEdited method inside mounted like this:
mounted() {
let self = this;
//todo Possibly validate that cater tips is less than total tips since cater tips is a portion of total tips
self.tabulator = new Tabulator(self.$refs.myTable, {
height: 380, // set height of table (in CSS or here)
placeholder: 'Click "Load Store Tips" to edit data',
data: self.tableData, //link data to table
reactiveData: true, //enable data reactivity
downloadConfig: {columnCalcs: false},
addRowPos:"bottom",
history:true,
layout: "fitDataFill",
initialSort:[
{column:"storeID", dir:"asc"},
],
//Define Table Columns
columns: [
{title: "Store ID", field: "storeID", sorter:"number"},
{title: "Store Tips", field: "inStore_tips", align: "right", formatter: "money", editor: "number", bottomCalc: "sum"},
{title: "Cater Tips", field: "cater_tips", align: "right", formatter: "money", editor: "number", bottomCalc: "sum"},
{title: "Client ID", field: "clientID"},
],
////////////////////////////////////////////////////////////////////////////
// When a cell is edited, write the data out to the server to ensure it is
// always in a saved state.
////////////////////////////////////////////////////////////////////////////
cellEdited: function (e, cell) {
//self.colPos = cell.getColumn(); //trying to save the cursor pos, but generating error
//self.rowPos = cell.getRow(); // generating error
self.PostTipsEventMethod();
}
});
Here is what I have tried:
Tried capturing the row and column position, and then setting that after the replaceData table render, and after the cellEdited method
Tried using the next() method to move the cursor to the next cell inside the cellEdited method, before and after the replaceData function.
Can someone guide me a bit further on this? I've searched through the tabulator element in the debugger trying to find the row and column numbers of the cell I'm editing, but so far, no joy. I guess I don't understand the lifecycle of the table rendering well enough.
Thank you!
I'm using the Dgrid Selection grid for a grid that uses check boxes for selecting the content. However, only child node of the tree should show the checkbox as the parents are just categories and can't be selected. Previously I used the editor plugin for this, but it created difficulty with clearing selections (specifically, the "clearSelection" method of the grid did nothing). I switched to the selector plugin, so now selecting and deselecting rows works fine, but now I can't seem to figure out a way to hide the check box on some rows and not others.
Original code
var columns = [
editor({
label: " ",
field: "itemSelected",
sortable: false,
width: 33,
canEdit: function(object) {
// only add checkboxes for child objects
return object.type === "child";
}
}, "checkbox"),
tree({
label: "Item",
field: "shortItemId",
width: 150,
shouldExpand: function() {
return 1;
}
}),
{
label: "Grouping Name",
field: "groupingName"
}
];
var itemGrid = new SelectionGrid({
store: itemStore,
style: {
width: '99%',
height: '99%'
},
columns: columns,
sort: [{attribute: "shortItemId", descending: false}]
});
I used the "editOn" parameter of the editor to hide the check box, but the selector plugin only has the "disabled" parameter, which doesn't hide the field at all.
Is there a way I can get the check box hidden using the selector like I did with the editor?
Looking at the dgrid/selector source, it seems that the input is always created and added to the DOM, regardless of whether it has been disabled. Presumably this is to allow it to be flexible enough to enable and disable checkboxes on the fly without the need to constantly re-create DOM nodes. While it is not possible to prevent these nodes from being rendered, it is possible to hide them with CSS, since the cell node is given a class with the format field-{fieldName} (or in this particular case, field-itemSelected):
// JavaScript
var columns = [
selector({
label: " ",
field: "itemSelected",
sortable: false,
width: 33,
// Disable any checkbox that is not of type "child"
disabled: function (item) {
return item.type !== 'child';
}
}),
...
];
/* CSS */
.field-itemSelected input[disabled] {
display: none;
}
I'm new to ExtJS4, I have been reading the doc and a book but can't have everything to work how I would like.
I have a form that is submited via AJAX, a JSON response is returned which migh contain none, one or more records. I want to show these records in a new window with a grid component, so the user can select just one record.
I can't make the JSON response to be populated into the grid, for starters,
Where is the JSON response stored?? I have the corresponding success and failure functions.
How I make the grid loads this data into it?
Best Regards,
I'll do something among these lines:
...//This is the form onsuccess
succes: function(response) {
var json = Ext.JSON.decode(response.responseText);
var win Ext.create('Ext.window.Window', {
width: 600,
height: 400,
items: [ {
xtype:'grid',
columns:[ ... ],
store: Ext.create('Ext.data,Store',{
fields: ['field1', 'field2'],
data: json })
}]
});
win.show();
}
Hope that helps.
I am using sencha touch 2 and not getting help inside sencha forum, so I hope you guys can help me.
I want to create a list with custom items. In this custom item i want to have a horizontal scrollable listview with buttons as items.
I tried to do it component.DataItem but it does no work for me.
I tried also to add an custom xtype als an item in a list, but this does not work.
I think this is a simple task but sencha touch makes it a challenge for me.
So please help me and show me, how can I get a view like shown in this picture.
Instead of a standard list you are going to want to use Component DataView. Essentially, you are going to need to first define an Ext.dataview.component.DataItem, which is then implemented into the DataView. Below is a simple example of a buttons in a DataView as referenced from the DataView guide: http://docs.sencha.com/touch/2-0/#!/guide/dataview
First create the DataItem:
Ext.define('MyApp.view.DataItemButton', {
extend: 'Ext.dataview.component.DataItem',
requires: ['Ext.Button'],
xtype: 'dataitembutton',
config: {
nameButton: true,
dataMap: {
getNameButton: {
setText: 'name'
}
}
},
applyNameButton: function(config) {
return Ext.factory(config, Ext.Button, this.getNameButton());
},
updateNameButton: function(newNameButton, oldNameButton) {
if (oldNameButton) {
this.remove(oldNameButton);
}
if (newNameButton) {
this.add(newNameButton);
}
}
});
We must extend Ext.dataview.component.DataItem for each item. This is an abstract class which handles the record handling for each item.
Below the extend we require Ext.Button. This is simply because we are going to insert a button inside our item component.
We then specify the xtype for this item component.
Inside our config block we define nameButton. This is a custom configuration we add to this component which will be transformed into a button by the class system. We set it to true by default, but this could also be a configuration block. This configuration will automatically generate getters and setters for our nameButton.
Next we define the dataMap. The dataMap is a map between the data of a record and this view. The getNameButton is the getter for the instance you want to update; so in this case we want to get the nameButton configuration of this component. Then inside that block we give it the setter for that instance; in this case being setText and give it the field of the record we are passing. So, once this item component gets a record it will get the nameButton and then call setText with the name value of the record.
Then we define the apply method for our nameButton. The apply method uses Ext.factory to transform the configuration passed into an instance of Ext.Button. That instance is then returned, which will then cause updateNameButton to be called. The updateNameButton method simply removes the old nameButton instance if it exists, and adds the new nameButton instance if it exists.
Now create the DataView:
Ext.create('Ext.DataView', {
fullscreen: true,
store: {
fields: ['name', 'age'],
data: [
{name: 'Jamie Avins', age: 100},
{name: 'Rob Dougan', age: 21},
{name: 'Tommy Maintz', age: 24},
{name: 'Jacky Nguyen', age: 24},
{name: 'Ed Spencer', age: 26}
]
},
useComponents: true,
defaultType: 'dataitembutton'
});
In your case, rather than using a button for the DataItem, you'll want to use a horizontal scrolling list. Here is an example that I found from this answer: Horizontal scrolling list
var list = Ext.create('Ext.DataView',{
store: store,
itemTpl: new Ext.XTemplate('<img src="{icon}" />'),
inline: { wrap: false },
scrollable: {
direction: 'horizontal',
directionLock: true
}
});
Note that you will probably have to use components in the second dataview as well in order to achieve your buttons with image
The code below is part of my controller function;
success: function (response) {
var text = response.responseText;
var result = Ext.decode(response.responseText);
var indexPanel = Ext.create('app.view.PersonDetails');
Ext.getCmp('mainView').push({
xtype:'person',
data: result
});
}
The code below, is the view, which i am passing values from my Controller function (above).
The code below, demonstrates hard coded data in that view (Hard coded text), but what i want to do is to display the data: result that i am passing from Controller function (above) to be displayed in the following view. How can i do this ?
Ext.define('app.view.UserInformation',{
extend:'Ext.Panel',
xtype:'person',
config: {
title:'Person details',
html:['Hard coded text'].join("")
}
});
UPDATE
The result contains several values like;
result.name, result.age. result.gender
I will be passing result to the other view.
1.) from the View, how can i add a button ? and wen the user clicks on that button how can i fetch the result.age field and do a if condition to check if the age is below 10 ?
2.) Imagine, if there's a field called, result.imageurl, how could i display the image on the other view (in a frame) ?
UPDATE2
Ext.getCmp('mainpanel').push({
title: 'Hello ' ,
xtype:'person'
});
Ext.getCmp('idOfTheView').setRecord(result.first_name);
Your question is Sencha Touch alone, not relevant to PhoneGap. :)
Suppose that your view has an id: view_id
Then in your controller function:
Ext.getCmp('view_id').setHtml(what you want to put into your view)
Updated answer:
Your question consists of several sub-questions. I'm afraid that the scope you're asking is too wide but I will answer the most important part.
(from my own application):
Ext.define('rs.view.ProductInfo', {
extend: 'Ext.Container',
xtype: 'ProductInfo',
id: 'product-info',
cls: 'product-info',
config: {
items: [
{
xtype: 'panel',
styleHtmlContent: true,
id: 'product-info-header',
tpl: [
'<div class="product-info-header">',
'<img src={image} width="100px" height="100px"/>',
'<h3>{name}</h3>',
'<h4>Price: {price}</h4>',
'<h4>Seller: {sellerUsername}</h4>',
'</div>',
],
},
],
}
});
Note that I defined a Model with attributes, {image},{name},{price},{sellerUsername}, then in the code snippet above, you can see that I use them in tpl config as if normal use in Ext.List (with store config). So how can I do it?
First, you have to define a model describing your result. obviously.
Second, define tpl in your view, I believe you can figure it out from the example above.
Finally, use this (assume that you've written the result received from server into your Model instance which I've mentioned in first step):
Ext.getCmp('your_view_id').setRecord(your_model_instance)
100% work warranty because I've used this many times. Hope it helps. Should you have any question, please leave a comment.