I've created Editor Grid Panel but I couldn't add column for delete rows. I've tried few versions but without any result.This is my code.I would like add delete column with row like icon not like tbar button.
this.libraryListGrid = new Ext.grid.EditorGridPanel({
clicksToEdit: 1,
colModel: new Ext.grid.ColumnModel({
columns: [{
dataIndex: 'name',
editable: !this.config.viewOnly,
editor: new Ext.form.TextField({
allowBlank: true,
controllerThis: this,
listeners: {
blur: function(item){
var record =item.getValue();
var valid = true;//this.controllerThis.libraryListGrid.isValidValue(record);
item.setValue(record);
item.setValue(record);
}
}
}),
header: ' ',
id: 'name'
},
{
header: ' ',
text:'delete',
items: [{
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
//rec.store.remove();
alert("Delete " + rec.get('name'));
grid.getStore().remove(rec);
//grid.getStore().removeAt(rowIndex);
}
}]
}
]
}),
ds: this.libraryListDataStore,
height: 200,
width: 'auto',
isValidValue: function(field) {
return true;
var valid = new RegExp(/|s|/).test(field);
if(field.match(/^[s]/)){
helpsys.replaceFlashArea("Can not contain spaces!");
valid = false;
}else{
if(!field.length >= 10){
helpsys.replaceFlashArea("lenght is longer then 10,10 is mximal size for this field!");
valid = false;
}
}
this.store.each(function (record){
if (record.id != this.gridEditor.record.id && record.get('name') == this.getValue()
&& record.get('name').length > 0) {
valid = false;
return false;
}
}, field);
if (!valid) {
helpsys.replaceFlashArea(helpsys.locale.jobs.agent_environment.agent_environment_variables_validation);
}
this.allowEdit = valid;
return valid;
},
allowEdit: true,
forceValidation: true,
loadMask: true,
renderTo: 'libraryListGrid',
selModel: new helpsys.AddRowSelectionModel(),
stripeRows: true,
tbar: [{
disabled: this.config.viewOnly,
text: helpsys.locale.agent_environments.add_variable_button,
handler : function(){
// access the Record constructor through the grid's store
var Plant = this.libraryListGrid.getStore().recordType;
var p = new Plant({
});
this.libraryListGrid.stopEditing();
this.libraryListDataStore.insert(0, p);
this.libraryListGrid.startEditing(0, 0);
},
scope: this
}],
view: new Ext.ux.grid.BufferView({
autoFill: true,
forceFit: true,
getRowClass: function(record, rowIndex, rp, ds){
}
})
});
}
I also want to do this type of requirement.I have used this code, try it.Its work for me.
var userCM = new Ext.grid.ColumnModel([
{
header: "UserName",
width: 15,
sortable: true,
dataIndex: 'username',
editor:new Ext.form.TextField({
readOnly:true
})
},{
xtype:'actioncolumn',
width: 5,
align: "center",
header: "Action",
id:'userEmailDeleteId',
icon: '../images/delete.png',
tooltip: 'Delete Email',
handler: function(grid,rowIndex) {
// write your logic here
}
}])
Thanks for help but I've found other an interesting way for that.
this.libraryListGrid = new Ext.grid.EditorGridPanel({
clicksToEdit: 1,
colModel: new Ext.grid.ColumnModel({
columns: [{
dataIndex: 'name',
editable: !this.config.viewOnly,
editor: new Ext.form.TextField({
allowBlank: true,
controllerThis: this,
listeners: {
blur: function(item){
var record =item.getValue();
var valid = this.controllerThis.libraryListGrid.isValidValue(item);
if(valid){
item.setValue(record);
}else{
item.setValue(record);
}
}
}
}),
header: ' ',
id: 'name'
},
{
header: '',
menuDisabled: true,
width: 35,
dataIndex: '',
fixed: true,
renderer: this.renderActions
}
]
}),
ds: this.libraryListDataStore,
height: 200,
width: 'auto',
isValidValue: function(field) {
var valid = true;
valid = field.match(/\s/);
if(!valid){
helpsys.replaceFlashArea("Can not contain spaces!");
return false;
}else{
if(!field.length >= 10){
helpsys.replaceFlashArea("lenght is longer then 10,10 is mximal size for this field!");
return false;
}
}
this.store.each(function (record){
if (record.id != this.gridEditor.record.id && record.get('name') == this.getValue()
&& record.get('name').length > 0) {
helpsys.replaceFlashArea(helpsys.locale.jobs.agent_environment.agent_environment_variables_validation);
return false;
}
}, field);
return valid;
},
allowEdit: true,
listeners: {
rowclick: {
fn: onRowClick,
scope: this
}
},
forceValidation: true,
loadMask: true,
renderTo: 'libraryListGrid',
selModel: new helpsys.AddRowSelectionModel(),
stripeRows: true,
tbar: [{
disabled: this.config.viewOnly,
text: helpsys.locale.agent_environments.add_variable_button,
handler : function(){
// access the Record constructor through the grid's store
var Plant = this.libraryListGrid.getStore().recordType;
var p = new Plant({
});
this.libraryListGrid.stopEditing();
this.libraryListDataStore.insert(0, p);
this.libraryListGrid.startEditing(0, 0);
},
scope: this
}],
view: new Ext.ux.grid.BufferView({
autoFill: true,
forceFit: true,
getRowClass: function(record, rowIndex, rp, ds){
}
})
});
},
renderActions: function(value, metadata, record, rowIndex, colIndex, store){
var columnValue = '<div class="rowAction deleteAction" ><div class="iconLinkIcon deleteIcon"></div></div>';
return columnValue;
}
Related
I Set Kendo Ui Grid and footer,
footer will get total price,
but it always can't get last data.
hope somebody can help to fix it.
and i try $("#Grid").data("kendoGrid").refresh();
but it didn't work for me.
kendoui grid set
dataSource
var AddGriddataSource = new kendo.data.DataSource({
data: [],
schema: {
model: {
fields: {
id: 'No',
Name: { editable: false, nullable: false },
txtStockNum: { editable: false, nullable: false },
txtReturnNum: { editable: true, nullable: false },
txtPricetax: { editable: false, nullable: false },
txtPriceNum1: { editable: false, nullable: false }
}
} // end of model
}, // end of schema
aggregate: [{ field: "txtPriceNum", aggregate: "sum" }, { field: "txtPriceNum1", aggregate: "sum" }],
});
Cell
var AddGridCells = [
{ field: "Name", title: "Name", width: "20px" },
{ field: "StockNum", title: "Stock", width: "20px" },
{ field: "txtReturnNum", title: "txtReturnNum", width: "100px", template: '<input id = "Del" class="returnDel" type="button" value="▼" style="margin: -1px" /><input id="Txt_test1" class="returnTxtBox" type="textbox" value= #=txtReturnNum# style="margin: 2px" /><input id = "plus" class="returnPlus" type="button" value="▲" style="margin: -1px" />' },
{ field: "txtPrice", title: "txtPrice", width: "20px", hidden: true },
{ field: "txtPricetax", title: "txtPricetax", width: "20px", format: "{0:n3}" },
{ field: "txtPriceNum", title: "Total", width: "20px", footerTemplate: "#= kendo.toString(sum, '0.000')#", hidden: true },
{ field: "txtPriceNum1", title: "Total", width: "30px", footerTemplate: "<span id='footerPlaceholder'>#= kendo.toString(sum, '0.000')#</span>", format: "{0:n3}" },
{ command: [{ text: "X", click: DelchooseDetails }], title: " ", width: "10px" },
];
and
$("#AddGrid").kendoGrid({
dataSource: AddGriddataSource,
selectable: "row",
scrollable: false,
columns: AddGridCells,
change: numberInput,
pageable: {
buttonCount: 3,
messages: GridPageMsg
},
height: '100%',
editable: true
}).data("kendoGrid");
JQuery todo
$(document).on('click', '.returnPlus', function (e) {
if (nowStatus != 0) {
return;
}
var ds2 = $("#AddGrid").data("kendoGrid").dataSource;
var row = $(this).closest("tr"),
grid = $("#AddGrid").data("kendoGrid"),
dataItem = grid.dataItem(row);
debugger;
ds2.fetch(function () {
dataItem.txtReturnNum = dataItem.txtReturnNum - (-1);
dataItem.txtPriceNum = dataItem.txtReturnNum * dataItem.txtPrice;
dataItem.txtPriceNum1 = mulFloat(dataItem.txtReturnNum, dataItem.txtPricetax);
})
$("#AddGrid").data("kendoGrid").refresh();
return;
});
$(document).on('click', '.returnDel', function (e) {
if (nowStatus != 0) {
return;
}
var ds2 = $("#AddGrid").data("kendoGrid").dataSource;
var row = $(this).closest("tr"),
grid = $("#AddGrid").data("kendoGrid"),
dataItem = grid.dataItem(row);
debugger;
ds2.fetch(function () {
dataItem.txtReturnNum = dataItem.txtReturnNum - (1);
dataItem.txtPriceNum = dataItem.txtReturnNum * dataItem.txtPrice;
dataItem.txtPriceNum1 = mulFloat(dataItem.txtReturnNum, dataItem.txtPricetax);
})
$("#AddGrid").data("kendoGrid").refresh();
return;
});
I'm not sure If i does not described correctly,so i record video
https://imgur.com/mePv5qI
How can i do will be correct
Why are you using fetch()? It seems that you don't need it, since you're not updating data from api. You're only updating local data, right ? So remove it and change dataItem directly:
var row = $(this).closest("tr"),
grid = $("#AddGrid").data("kendoGrid"),
dataItem = grid.dataItem(row);
dataItem.txtReturnNum = dataItem.txtReturnNum - (-1);
dataItem.txtPriceNum = dataItem.txtReturnNum * dataItem.txtPrice;
dataItem.txtPriceNum1 = mulFloat(dataItem.txtReturnNum, dataItem.txtPricetax);
$("#AddGrid").data("kendoGrid").refresh();
Or
var row = $(this).closest("tr"),
grid = $("#AddGrid").data("kendoGrid"),
dataItem = grid.dataItem(row);
dataItem.set('txtReturnNum', dataItem.txtReturnNum - (-1));
dataItem.set('txtPriceNum', dataItem.txtReturnNum * dataItem.txtPrice);
dataItem.set('txtPriceNum1', mulFloat(dataItem.txtReturnNum, dataItem.txtPricetax));
I encountered a problem when I was using extjs4.0.I download data with Ext.data.TreeStore,Downloading data is a JSON array,whitch showed up in a Tree.panle with checkbox.I modified the selection state of itme and submitted it,use follow code:
var d=store.lastOptions.node.childNodes;
var postData="";
for(var i=0;i<d.length;i++)
{
postData+=JSON.stringify(d[i].data)+",";
}
postData="["+postData.substring(0,postData.length-1)+"]";
$.ajax({
url: '/test.php',
type: 'POST',
data: postData,
...
But the checked in the JSON array"{children:[{checked:false,..}{checked:false,...}]}" is always false.I guess I didn't use the correct way to get the submitted JSON data,So there will be such a mistake.
thanks every one for help.
You may try with this:
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.define('Test.Window', {
extend: 'Ext.window.Window',
closeAction: 'destroy',
border: false,
width: 560,
height: 500,
modal: true,
closable: true,
resizable: false,
layout: 'fit',
initComponent: function() {
var me = this;
me.callParent(arguments);
me.button = Ext.create('Ext.button.Button', {
text: 'Send',
handler : function(btn) {
var me = btn.up('window');
var root = me.tree.getRootNode();
var a = Array();
for (var i=0; i < root.childNodes.length; i++) {
var data = root.childNodes[i].data;
a.push(
{
text: data.text,
checked: data.checked
// ... something more
}
);
}
var postData = Ext.JSON.encode({
children: a
});
alert(postData);
}
});
me.store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{
text: "detention",
checked: true,
leaf: true
},
{
text: "homework",
checked: true,
leaf: true
},
{
text: "buy lottery tickets",
checked: true,
leaf: true
}
]
}
});
me.tree = Ext.create('Ext.tree.Panel', {
useArrows: true,
autoScroll: true,
animate: true,
enableDD: false,
width: '100%',
flex: 1,
border: false,
rootVisible: false,
allowChildren: true,
store: me.store,
tbar: [
me.button
]
});
me.add(me.tree);
}
});
var win = new Test.Window({
});
win.show();
});
Fiddle can be found here.
I'm trying to put a GridPanel powered by an ArrayStore in a Window, but no matter what I do, it just looks like this with no data rows inside:
Here's my code:
var ticketsStore = new Ext.data.ArrayStore
(
{
autoDestroy: false,
remoteSort: false,
data: result,
fields:
[
{ name: 'articleId', type: 'int' },
{ name: 'heatTicketRef', type: 'string' },
{ name: 'username', type: 'string' },
{ name: 'dateLinked', type: 'date' }
]
}
);
var ticketsGrid = new Ext.grid.GridPanel({
store: ticketsStore,
id: this.id + 'ticketsGrid',
viewConfig: {
emptyText: 'No data'
},
autoShow: true,
idProperty: 'heatTicketRef',
columns: [
{ id: 'heatTicketRef', header:"Ticket ID", width: 100, dataIndex: 'heatTicketRef', sortable: false },
{ header: "User", width: 100, dataIndex: 'username', sortable: false },
{ header: "Date Linked", width: 100, dataIndex: 'dateLinked', xtype: 'datecolumn', format: 'j M Y h:ia', sortable: false }
]
});
var window = new Ext.Window
(
{
renderTo: Ext.getBody(),
id: this.id + 'linkedHeatTickets',
closable: true,
modal: true,
autoHeight: true,
width: 500,
title:'Linked Heat Tickets',
resizable: false,
listeners:
{
close: function () { // do something }
},
items:
{
style: 'padding:5px;',
items: ticketsGrid
},
buttons:
{
text: 'Close',
handler: function () {
window.close();
}
}
}
);
window.show();
When I debug, I can see that my "result" object is healthy and the ArrayStore is of the right length:
But the GridPanel doesn't like the data because it's not in its items (although it's in the store) array:
What little thing have I done wrong?
Thanks!
Because I'm an idiot... I used an ArrayStore instead of a JsonStore!
I have an app with the MVC model, in the view I create a slider with the listeners, but I want that the listeners are in the controller class, and I want to get the id of the element, but it is generated by a variable from a tree panel....
This is the code
Ext.require('Ext.slider.*');
Ext.define('app.view.ViewTablaContenido', {
extend: 'Ext.window.Window',
id: 'viewTablaContenido',
shadow: false,
alias: 'widget.tablaContenido',
initComponent: function() {
var anchoPanatallaRes = window.screen.width;
var altoPantallaRes = window.screen.height;
var anchoTOC = 330;
var altoTOC = 473;
if (anchoPanatallaRes <= 1024) {
anchoTOC = 282;
altoTOC = 373;
}
function addUrl(value, p, record) {
return value ? Ext.String.format(
'<a href="'+value+'"target="_blank"'+'>Ver metadato'+'</a>'
):'';
}
var treeStore = Ext.getStore('capa');
var tree = Ext.create('Ext.tree.Panel', {
title: '',
id: "arbolTabla",
width: anchoTOC,
height: altoTOC,
reserveScrollbar: true,
loadMask: true,
useArrows: true,
rootVisible: false,
store: 'capa',
allowDeselect : true,
border : true,
animate: true,
columns: [{
xtype: 'treecolumn',
text: 'Capa',
flex: 5,
sortable: true,
dataIndex: 'titulo'
},{
text: 'Metadato',
flex: 2,
dataIndex: 'metadato',
renderer: addUrl
}],
tbar: [{
labelWidth: 100,
xtype: 'triggerfield',
id: 'campoBusquedaCapa',
fieldLabel: 'Nombre capa:',
triggerCls: 'x-form-clear-trigger',
onTriggerClick: function() {
this.reset();
treeStore.clearFilter();
this.focus();
},
enableKeyEvents: true
}, {
xtype : 'button',
width: 20,
height: 25,
id : 'btnApagarCapas',
action: 'apagarCapas',
tooltip : 'Apagar todas las capas',
padding:0
}]
});
Ext.apply(this, {
title: 'TABLA CONTENIDO',
constrain: true,
header : {
titlePosition : 2,
titleAlign : 'center'
},
closable : false,
width : anchoTOC,
height : altoTOC,
x : 20,
y : 270,
layout : 'fit',
animCollapse : true,
collapsible : true,
collapseDirection : Ext.Component.DIRECTION_LEFT,
items: [tree],
});
tree.on('itemcontextmenu', function(view, record, item, index, event, eOpts) {
event.stopEvent();
if (record.data.leaf != false) {
slider = Ext.create('Ext.slider.Single', {
id: record.data.id,
hideLabel: true,
floating: true,
width: 200,
minValue: 0,
maxValue: 100,
value : 70,
//listeners: {
//change: function (newValue, thumb, eOpts ){
//var capaBuscar = record.data.id;
//var controladorUbicar = aplicacion.getController("ControlUbicar");
//var capa = controladorUbicar.buscarcapa(capaBuscar);
//capa.setOpacity(thumb/100);
//},
//blur: function() {
//slider.setVisible(false);
//capaBuscar=null;
//}
//}
});
slider.showBy(item, 'tl-tl', [event.getX() - view.getX(), 12]);
}
}, this);
this.callParent(arguments);
}
});
Add this listener to your controller:
Ext.define('Fiddle.controllers.MyController',{
extend : 'Ext.app.Controller',
alias: 'controller.mycontroller',
init : function() {
this.control({
"slider" : {
change : function (slider, newValue, thumb, eOpts ) {
var capa = this.buscarcapa(slider.record.get('id'));
if (capa) capa.setOpacity(thumb/100);
},
blur: function(slider, event, eOpts) {
slider.setVisible(false);
}
}
});
},
buscarcapa : function (id) {
return false;
}
});
And create the slider like this:
listeners : {
'itemcontextmenu' : function(view, record, item, index, event, eOpts) {
event.stopEvent();
if (record.data.leaf != false) {
console.log(item);
slider = Ext.create('Ext.slider.Single', {
record : record,
hideLabel: true,
floating: true,
type : 'capaControl',
width: 200,
minValue: 0,
maxValue: 100,
value : 70
});
slider.showBy(item, 'tl-tl', [event.getX() - view.getX(), 12]);
}
}
}
Check this fiddle : https://fiddle.sencha.com/#fiddle/odd
starting with the MVC demo project guide I added an extra actioncolumn and I was wondering how to wire it in the controller file ?
guide: http://www.sencha.com/learn/the-mvc-application-architecture/
Ext.define('app.view.admin.viewlist', {
extend: 'Ext.grid.Panel',
columnLines: true,
region: 'center',
menuDisabled: true,
layout: 'fit',
initComponent: function (cnfg) {
this.columns = [
{
text: 'date',
dataIndex: 'Series',
sortableColumns: false,
hideable: false,
enableLocking: false,
width: 100
},{
hidden : true,
text:'Values',
sortableColumns : false,
hideable: false,
columns:[{
header: 'D1',
hidden: true,
dataIndex: 'D10EOD',
sortableColumns : false,
hideable: false
},{
xtype: 'actioncolumn',
icon: '/static/img/icon/table_refresh.png',
tooltip: 'Reset',
align: 'center'
}]
}
];
this.callParent(arguments);
}});
Controller init function
init: function() {
this.control({
'volatilityedit actioncolumn img' : { <--- ??
click: this.reset
}
});
},
reset: function(grid, rowIndex, colIndex) {
//var rec = grid.getStore().getAt(rowIndex);
alert("Go");
},
Thanks
Depend on what your actions should do you can decide if you need controler or not.
You should use controller when your action interacts with other components - otherwise you can write own methods inside component (grid)
Here you have simple example of grid with actioncolumn:
Ext.onReady(function () {
Ext.create('Ext.data.Store', {
storeId: 'employeeStore',
fields: ['firstname', 'lastname', 'seniority', 'dep', 'hired'],
data: [{
firstname: "Michael",
lastname: "Scott"
}, {
firstname: "Dwight",
lastname: "Schrute"
}, {
firstname: "Jim",
lastname: "Halpert"
}, {
firstname: "Kevin",
lastname: "Malone"
}, {
firstname: "Angela",
lastname: "Martin"
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Action Column Demo',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [{
text: 'First Name',
dataIndex: 'firstname'
}, {
text: 'Last Name',
dataIndex: 'lastname'
}, {
xtype: 'actioncolumn',
width: 50,
items: [{
icon: 'app/resources/images/cog_edit.png',
// Use a URL in the icon config
tooltip: 'Edit',
handler: function (grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Edit " + rec.get('firstname'));
}
}, {
icon: 'app/resources/images/delete.png',
tooltip: 'Delete',
handler: function (grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Terminate " + rec.get('firstname'));
}
}]
}],
width: 250,
renderTo: Ext.getBody()
});
});
This is an example with an action column and a function in a controller:
View:
{
xtype: 'actioncolumn',
id:'actionColumnGridCas',
flex: 1,
hideable: false,
items: ['->',{
icon: '/images/user_edit.png',
tooltip: 'edit',
iconCls:'act-edit'
},
{
icon: '/images/user_delete.png',
tooltip: 'delete',
iconCls:'act-delete'
}]
}
Controller:
'.grid_alias actioncolumn[id=actionColumnGrid]': {
click: me.onActionColumnGridCasSelect
}
onActionColumnGridCasSelect: function(view, cell, rowIndex, colIndex, e) {
var m = e.getTarget().className.match(/\bact-(\w+)\b/);
if (m === null || m === undefined) {
return;
}
var action = m[1];
switch (action) {
case 'edit':
alert('edit');
break;
case 'delete':
alert('delete');
break;
}
}