Related
I am trying to display jsGrid in a Vue-cli scaffolded app. The mounted function does not seem to fire. I am trying to execute a JavaScript function through VueJs. I have done < npm install jquery --save > in the app's root folder.
The code works fine with VueJS in a single page HTML file.
<template>
<div>
<br>
<div class=" from-yellow-700 bg-gradient-to-br" id="jsGrid"><i class="fas fa-arrow-down"></i> {{ message }} <i class="fas fa-arrow-down"></i></div>
</div>
</template>
<script>
import jQuery from "jquery";
export default {
// name: "oneview",
mounted:function(){
jQuery("#jsGrid").jsGrid({
width: "100%",
height: "400px",
inserting: true,
editing: true,
sorting: true,
paging: true,
data: this.clients,
fields: [
{ name: "Name", type: "text", width: 150, validate: "required" },
{ name: "Age", type: "number", width: 50 },
{ name: "Address", type: "text", width: 200 },
{ name: "Country", type: "select", items: this.countries, valueField: "Id", textField: "Name" },
{ name: "Married", type: "checkbox", title: "Is Married", sorting: false },
{ type: "control" }
]
});
},
data: function() {
return {
message: 'jsGrid says Hello Vue App!',
clients: [
{ "Name": "Otto Clay", "Age": 25, "Country": 1, "Address": "Ap #897-1459 Quam Avenue", "Married": false },
{ "Name": "Connor Johnston", "Age": 45, "Country": 2, "Address": "Ap #370-4647 Dis Av.", "Married": true },
],
countries: [
{ Name: "", Id: 0 },
{ Name: "United States", Id: 1 },
{ Name: "Canada", Id: 2 },
{ Name: "United Kingdom", Id: 3 }
],
}
},
methods: {
},
}
</script>
<style scoped></style>
I want to have REST operations on child object of a parent object on Ext Grid. I need to use rowExpander not rowWidget since I am using modern toolkit.
Here is my sample JSON data from my API:
{
"pagination": {
"page": 1,
"limit": 20,
"total": 1,
"hasPreviousPage": false,
"hasNextPage": false
},
"data": [
{
"id": 2,
"customer": "Mark",
"dateRented": "2021-02-09T21:18:40.667",
"movieRentals": [
{
"id": 5,
"rentalDetailDtoId": 2,
"movie": "Shingeki no Kyojin",
"dateReturned": null
},
{
"id": 6,
"rentalDetailDtoId": 2,
"movie": "Insidous 2",
"dateReturned": null
}
]
},
{
"id": 1,
"customer": "Samuel",
"dateRented": "2021-02-09T21:17:18.403",
"movieRentals": [
{
"id": 3,
"rentalDetailDtoId": 1,
"movie": "Home Alone",
"dateReturned": null
},
{
"id": 4,
"rentalDetailDtoId": 1,
"movie": "Neighbors",
"dateReturned": null
}
]
}
]
}
I would like to display it per Customer and I have a REST action of POST on the movieRentals object. I would like to use RowExpander but I am not sure how to make it work.
Here is my current ExtJS Grid code:
Ext.define('Vidly.view.rental.DisplayRentalsView', {
extend: 'Ext.grid.Grid',
xtype: 'displayrentalsview',
reference: 'rentallist',
title: 'Rental List',
controller: 'displayrentalsviewcontroller',
viewModel: 'rentalsviewmodel',
reference:'displayrentalsviewgrid',
selType: 'rowmodel',
selModel:
{
mode: 'SINGLE'
},
viewConfig:
{
stripeRows: true
},
listeners: {
selectionchange: 'onSelectionChange',
show: 'onShow',
},
bind: {
store: '{RentalListStore}'
},
itemConfig: {
viewModel: true
},
plugins: {
pagingtoolbar: true
},
items: [
{
xtype: 'container',
docked: 'top',
items: [
{
docked: 'left',
xtype: 'button',
ui: 'decline',
itemId: 'returnRental',
text: 'Return Rental',
reference: 'btnReturnRental',
handler: 'onReturnClick',
disabled: true,
}
]
},
],
columns: [
{
text: "Customer",
flex: 1,
dataIndex: 'customer',
editor:
{
allowBlank: false
},
},
{
text: "Movie",
flex: 1,
dataIndex: 'movieRental',
editor:
{
allowBlank: false
},
},
{
text: "Date Rented",
flex: 1,
dataIndex: 'dateRented',
editor:
{
allowBlank: false
},
renderer: function (value, metaData, record) {
if (value != null && value != "") {
var dateRented = new Date(Date.parse(value))
return Ext.Date.format(dateRented, 'm/d/Y')
}
else {
return "";
}
}
},
{
text: "Date Returned",
flex: 1,
dataIndex: 'dateReturned',
editor:
{
allowBlank: false
},
renderer: function (value, metaData, record) {
if (value != null && value != "") {
var dateRented = new Date(Date.parse(value))
return Ext.Date.format(dateRented, 'm/d/Y')
}
else {
return "";
}
}
}
],
});
Its always good to provide an fiddle when your asking something in ExtJs
I Provided a fiddle here, I hope this helps you along
https://fiddle.sencha.com/#view/editor&fiddle/3bpk
Ext.application({
name: 'Fiddle',
launch: function () {
const store = Ext.create('Ext.data.Store', {
data: [{
"id": 2,
"customer": "Mark",
"dateRented": "2021-02-09T21:18:40.667",
"movieRentals": [{
"id": 5,
"rentalDetailDtoId": 2,
"movie": "Shingeki no Kyojin",
"dateReturned": null
}, {
"id": 6,
"rentalDetailDtoId": 2,
"movie": "Insidous 2",
"dateReturned": null
}]
}, {
"id": 1,
"customer": "Samuel",
"dateRented": "2021-02-09T21:17:18.403",
"movieRentals": [{
"id": 3,
"rentalDetailDtoId": 1,
"movie": "Home Alone",
"dateReturned": null
}, {
"id": 4,
"rentalDetailDtoId": 1,
"movie": "Neighbors",
"dateReturned": null
}]
}]
});
Ext.create('Ext.grid.Grid', {
store: store,
plugins: {
rowexpander: true
},
height: 500,
width: '100%',
itemConfig: {
body: {
tpl: '<ul>' +
'<tpl foreach="movieRentals">' +
'<li>Movie: {movie}</li>' +
'</tpl>' +
'</ul>'
}
},
columns: [{
text: 'Name',
dataIndex: 'customer',
width: 200
}, {
text: 'dateRented',
dataIndex: 'dateRented',
width: 250
}],
layout: 'fit',
fullscreen: true
});
}
});
and by the way, move those renderers into your viewController. Duplicate code is always ugly :-)
Ok, you should take a deeper look at the https://docs.sencha.com/extjs/7.3.1/modern/Ext.grid.Row.html#events
itemConfig: {
body: {
tpl: '<p>Hello World</p>',
listeners: {
beforeshow: sender => {
console.log(sender);
// Here you can tell your record to fetch data
}
}
}
}
feel free to play arround with the fiddle
https://fiddle.sencha.com/#fiddle/3bq5&view/editor
I am working on extjs Grid panel which has 3 columns user, email, password .
On rowclick event, I want to decrypt the password. I am trying this by setting a type to 'text' in config of password field column.
But I am not able to see the decrypted password.
Please suggest me the solution.
Thanks in advance.
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
data: [{
"name": "Lisa",
"email": "lisa#simpsons.com",
"pass": "555-111-1224"
}, {
"name": "Bart",
"email": "bart#simpsons.com",
"pass": "555--1234"
}, {
"name": "Homer",
"email": "homer#simpsons.com",
"pass": "-222-1244"
}, {
"name": "Marge",
"email": "marge#simpsons.com",
"pass": "111-1254"
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
listeners: {
rowclick: function (grid, record, e) {
var _this = this;
showPass('text');
function showPass(val) {
_this.getEl().component.columns[2].setConfig('type', "text");
}
}
},
columns: [{
header: 'Name',
dataIndex: 'name',
editor: 'textfield'
}, {
header: 'Email',
dataIndex: 'email',
flex: 1
}, {
header: "Password",
dataIndex: 'pass',
inputType: 'password',
renderer: function(val) {
var toReturn = "";
for (var x = 0; x < val.length; x++) {
toReturn += "●";
}
return toReturn;
}
}],
selType: 'rowmodel',
height: 200,
width: 400,
renderTo: Ext.getBody()
});
In ExtJs grid you can use widgetcolumn it provide config to add xtype inside widgetcolumn. You can refer ExtJs widgetcolumn docs
I have create small demo to show you, how it work. Sencha fiddle example
Hope it will help you.
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
data: [{
"name": "Lisa",
"email": "lisa#simpsons.com",
"pass": "555-111-1224"
}, {
"name": "Bart",
"email": "bart#simpsons.com",
"pass": "555--1234"
}, {
"name": "Homer",
"email": "homer#simpsons.com",
"pass": "-222-1244"
}, {
"name": "Marge",
"email": "marge#simpsons.com",
"pass": "111-1254"
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
listeners: {
select: function (grid, record, index) {
this.doChangeInputType(this.query('#password')[index]);
},
deselect: function (grid, record, index) {
this.doChangeInputType(this.query('#password')[index]);
},
rowclick: function (grid, record, element, rowIndex, e, eOpts) {
this.getSelectionModel().select(record)
}
},
columns: [{
header: 'Name',
dataIndex: 'name',
editor: 'textfield'
}, {
header: 'Email',
dataIndex: 'email',
flex: 1
}, {
header: "Password",
flex: 1,
dataIndex: 'pass',
xtype: 'widgetcolumn',
widget: {
xtype: 'textfield',
itemId: 'password',
inputType: 'password',
readOnly: true
}
}],
selType: 'rowmodel',
height: 300,
width: '100%',
renderTo: Ext.getBody(),
doChangeInputType: function (passwordField) {
var inputDom = Ext.get(passwordField.getInputId()).dom,
type = inputDom.type;
inputDom.type = type == "text" ? 'password' : 'text';
}
});
Having a background in security I cannot think of a situation where it's valid to have decrypted passwords displayed in a GUI to end users.
I'm a new in ext.js and I'm trying to figure why this example I borrowed from tutorial on http://docs.sencha.com/extjs/6.5.1/guides/quick_start/handling_events.html
doesn't work for me.
I added two listeners to code: itemmouseenter - it's work correctly, and itemtap - it's not working.
Ext.create('Ext.tab.Panel', {
renderTo: Ext.getBody(),
xtype: 'tabpanel',
items: [{
title: 'Employee Directory',
xtype: 'grid',
iconCls: 'x-fa fa-users',
listeners: {
itemmouseenter: function() {
console.log( 'Mouse Enter');
},
itemtap: function(view, index, item, e) {
console.log("item tap")
}
},
store: {
data: [{
"firstName": "Jean",
"lastName": "Grey",
"officeLocation": "Lawrence, KS",
"phoneNumber": "(372) 792-6728"
}, {
"firstName": "Phillip",
"lastName": "Fry",
"officeLocation": "Lawrence, KS",
"phoneNumber": "(318) 224-8644"
}, {
"firstName": "Peter",
"lastName": "Quill",
"officeLocation": "Redwood City, CA",
"phoneNumber": "(718) 480-8560"
}]
},
columns: [{
text: 'First Name',
dataIndex: 'firstName',
flex: 1
}, {
text: 'Last Name',
dataIndex: 'lastName',
flex: 1
}, {
text: 'Phone Number',
dataIndex: 'phoneNumber',
flex: 1
}]
}, {
title: 'About Sencha',
iconCls: 'x-fa fa-info-circle'
}]
});
In classic the event is itemclick. The sample you're looking at is for modern.
As I have checked in sencha fiddle itemtap is working fine for modern but for Classic you have to user itemlick. I am using your same code in my fiddle you can check by given below link:-
EXTJS GRID ITEM TAP
Ext.application({
name : 'Fiddle',
launch : function() {
var panel = Ext.create('Ext.window.Window', {
width:'100%',
height:'100%',
layout:'fit',
items:[{
xtype: 'tabpanel',
items: [{
title: 'Employee Directory',
xtype: 'grid',
layout:'fit',
iconCls: 'x-fa fa-users',
listeners: {
itemmouseenter: function() {
console.log('Mouse Enter');
},
itemclick: function(grid, record, item, index, e, eOpts) {
Ext.Msg.alert('Info',`You have tapped on ${index+1} item`);
}
},
store: {
data: [{
"firstName": "Jean",
"lastName": "Grey",
"officeLocation": "Lawrence, KS",
"phoneNumber": "(372) 792-6728"
}, {
"firstName": "Phillip",
"lastName": "Fry",
"officeLocation": "Lawrence, KS",
"phoneNumber": "(318) 224-8644"
}, {
"firstName": "Peter",
"lastName": "Quill",
"officeLocation": "Redwood City, CA",
"phoneNumber": "(718) 480-8560"
}]
},
columns: [{
text: 'First Name',
dataIndex: 'firstName',
flex: 1
}, {
text: 'Last Name',
dataIndex: 'lastName',
flex: 1
}, {
text: 'Phone Number',
dataIndex: 'phoneNumber',
flex: 1
}]
}, {
title: 'About Sencha',
iconCls: 'x-fa fa-info-circle'
}]
}]
});
panel.show()
}
});
I have a JSON dataSource that looks like this:
var productDataSource = new kendo.data.DataSource({
transport: {
read: {
url: 'http://...',
dataType: "json"
}
},
pageSize: 10
});
And returns something like this:
{
"ProdSet1":[
{
"Name": "Product 1-1",
"Price": 20,
"Quantity": 50,
"Change": 4
},
{
"Name": "Product 1-2",
"Price": 14,
"Quantity": 74,
"Change": 5
}
],
"ProdSet2":[
{
"Name": "Product 2-1",
"Price": 15,
"Quantity": 12,
"Change": 2
}
]
}
Then I have multiple grids that use this one dataSource:
$("#prodSet1").kendoGrid({
dataSource: productDataSource,
columns: [
{ field: "ProdSet1[0].Name", title: "Name" },
{ field: "ProdSet1[0].Price", title: "Price" },
{ field: "ProdSet1[0].Quantity", title: "Quantity" },
{ field: "ProdSet1[0].Change", title: "Change" }
]
});
$("#prodSet2").kendoGrid({
dataSource: productDataSource,
columns: [
{ field: "ProdSet2[0].Name", title: "Name" },
{ field: "ProdSet2[0].Price", title: "Price" },
{ field: "ProdSet2[0].Quantity", title: "Quantity" },
{ field: "ProdSet2[0].Change", title: "Change" }
]
});
But doing { field: "ProdSet1[0].Name" ...} isn't working.
How can I reference the correct product data?
Since the collections are named in the return object, you can set the schema.data property to each ProdSet, and bind a grid to it.
I would manually fetch the data from the datasource, with a datasource.read()
var datafromService = productDataSource.read();
Documentation... http://docs.telerik.com/kendo-ui/documentation/api/framework/datasource#methods-read
Then bind each grid to that datafromService, with each specifying the collection inside the JSON object to bind to.
$("#prodSet1").kendoGrid({
dataSource: {
data: datafromService,
schema: {
data: 'ProdSet1'
}
},
columns: [
{ field: "Name", title: "Name" },
{ field: "Price", title: "Price" },
{ field: "Quantity", title: "Quantity" },
{ field: "Change", title: "Change" }
]
});
and
$("#prodSet2").kendoGrid({
dataSource: {
data: datafromService,
schema: {
data: 'ProdSet2'
}
},
columns: [
{ field: "Name", title: "Name" },
{ field: "Price", title: "Price" },
{ field: "Quantity", title: "Quantity" },
{ field: "Change", title: "Change" }
]
});
Now they will be bound to the same set of data, just displaying different collections from the JSON data.
See sample... http://jsbin.com/dokub/1/edit
If you are needing full CRUD operations, that gets into another bag of cats.