Nov 20, 2013, 5:09 AM
[CLOSED] Custom Grid Control Error with new Version 2.3.1
I made a custom control with information from this
and this two pages.
I made it under Ext.NET.MVC version 2.2.
After upgrade Ext.NET.MVC to version 2.3.1, it's not working.
Controller
and this two pages.
I made it under Ext.NET.MVC version 2.2.
After upgrade Ext.NET.MVC to version 2.3.1, it's not working.
Controller
public ActionResult Index()
{
return View();
}@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<title></title>
<link href="~/Contents/Entry.css" rel="stylesheet" />
<link href="~/Contents/ucGridPanel.css" rel="stylesheet" />
<script>
Ext.Loader.setPath('test', '/App');
Ext.Loader.setConfig({ enabled: true });
Ext.onReady(function () {
// Define our data model
Ext.define('Employee', {
extend: 'Ext.data.Model',
fields: [
'name',
'email',
{ name: 'start', type: 'date', dateFormat: 'n/j/Y' },
{ name: 'salary', type: 'float' },
{ name: 'active', type: 'bool' }
]
});
// Generate mock employee data
var data = (function () {
var lasts = ['Jones', 'Smith', 'Lee', 'Wilson', 'Black', 'Williams', 'Lewis', 'Johnson', 'Foot', 'Little', 'Vee', 'Train', 'Hot', 'Mutt'],
firsts = ['Fred', 'Julie', 'Bill', 'Ted', 'Jack', 'John', 'Mark', 'Mike', 'Chris', 'Bob', 'Travis', 'Kelly', 'Sara'],
lastLen = lasts.length,
firstLen = firsts.length,
usedNames = {},
data = [],
s = new Date(2007, 0, 1),
eDate = Ext.Date,
now = new Date(),
getRandomInt = Ext.Number.randomInt,
generateName = function () {
var name = firsts[getRandomInt(0, firstLen - 1)] + ' ' + lasts[getRandomInt(0, lastLen - 1)];
if (usedNames[name]) {
return generateName();
}
usedNames[name] = true;
return name;
};
while (s.getTime() < now.getTime()) {
var ecount = 1; /* getRandomInt(0, 3); */
for (var i = 0; i < ecount; i++) {
var name = generateName();
data.push({
start: eDate.add(eDate.clearTime(s, true), eDate.DAY, getRandomInt(0, 27)),
name: name,
email: name.toLowerCase().replace(' ', '.') + '@@test.com',
active: getRandomInt(0, 1),
salary: Math.floor(getRandomInt(35000, 85000) / 1000) * 1000
});
}
s = eDate.add(s, eDate.YEAR, 1);
}
return data;
})();
// create the Data Store
var store = Ext.create('Ext.data.Store', {
// destroy the store if the grid is destroyed
model: 'Employee',
proxy: {
type: 'memory'
},
data: data /* ,
sorters: [{
property: 'start',
direction: 'ASC'
}] */
});
// create the grid and specify what field you want
// to use for the editor at each column.
var grid = Ext.create("test.util.ucGridPanel" /*"Ext.grid.Panel"*/, {
itemId: "testInlineEditingGrid",
width: 650,
frame: true,
store: store,
columns: [{
header: 'Name',
dataIndex: 'name',
flex: 1,
editor: {
allowBlank: false
}
}, {
header: 'Email',
dataIndex: 'email',
width: 160,
editor: {
allowBlank: false,
vtype: 'email'
}
}, {
xtype: 'datecolumn',
header: 'Start Date',
dataIndex: 'start',
width: 105,
editor: {
xtype: 'datefield',
allowBlank: false,
format: 'm/d/Y',
minValue: '01/01/2006',
minText: 'Cannot have a start date before the company existed!',
maxValue: Ext.Date.format(new Date(), 'm/d/Y')
}
}, {
xtype: 'checkcolumn',
header: 'Active?',
dataIndex: 'active',
width: 60,
editor: {
xtype: 'checkbox',
cls: 'x-grid-checkheader-editor'
}
}, {
xtype: 'numbercolumn',
header: 'Salary',
dataIndex: 'salary',
format: '$0,0',
width: 90,
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 1,
maxValue: 150000
}
}]
});
var viewport = Ext.create("Ext.container.Viewport", {
layout: {
type: "border",
align: "left"
},
items: [
Ext.create("Ext.form.Panel", {
layout: {
type: "vbox",
align: "left"
},
region: "center",
items: [
grid
]
})
]
});
});
</script>
</head>
<body>
@Html.X().ResourceManager().ScriptMode(Ext.Net.ScriptMode.Debug).SourceFormatting(true)
</body>
</html>Ext.define("test.util.ucGridPanel", {
extend: "Ext.grid.Panel",
alias: "widget.ucGridPanel",
autoScroll: false,
scroll: false,
viewConfig: {
autoScroll: false,
scroll: false
},
initComponent: function () {
this.callParent();
},
plugins: [
Ext.create('test.util.ucRowEditing', {
clicksToEdit: 1,
autoCancel: false,
rowHeight: 0,
rowEditHeight: 0
})
]
});Ext.define('test.util.ucRowEditing', {
extend: 'Ext.grid.plugin.RowEditing',
alias: 'plugin.myrowediting',
requires: [
'test.util.ucRowEditor'
],
initEditor: function () {
var me = this,
grid = me.grid,
view = me.view,
headerCt = grid.headerCt,
btns = ['saveBtnText', 'cancelBtnText', 'errorsText', 'dirtyText'],
b,
bLen = btns.length,
edcfg = {
autoCancel: me.autoCancel,
errorSummary: me.errorSummary,
fields: headerCt.getGridColumns(),
hidden: true,
view: view,
// keep a reference...
editingPlugin: me,
renderTo: view.el//,
},
item;
//Turn button text into items
for (b = 0; b < bLen; b++) {
item = btns[b];
if (Ext.isDefined(me[item])) {
edcfg[item] = me[item];
}
}
return Ext.create('test.util.ucRowEditor', edcfg);
},
//Bonus: I found this to be the most effective way to keep the row editor from appearing
beforeEdit: function () { return !this.disabled; }
});Ext.define('test.util.ucRowEditor',{
extend: 'Ext.grid.RowEditor',
initComponent:function(){
this.callParent(arguments);
},
getFloatingButtons: function() {
var me = this,
cssPrefix = Ext.baseCSSPrefix,
btnsCss = cssPrefix + 'grid-row-editor-buttons',
plugin = me.editingPlugin,
minWidth = Ext.panel.Panel.prototype.minButtonWidth,
btns;
if (!me.floatingButtons) {
btns = me.floatingButtons = new Ext.Container({
/* it is not necessary to save a reference to the editor
in the button panel, but I found it useful, since the
editor is not its parent component */
editor: me,
renderTpl: [
'<div class="{baseCls}-ml"></div>',
'<div class="{baseCls}-mr"></div>',
'<div class="{baseCls}-bl"></div>',
'<div class="{baseCls}-br"></div>',
//I had to add the style width for the buttons to show up
'<div class="{baseCls}-bc" style="width:230px"></div>',
'{%this.renderContainer(out,values)%}'
],
width: 240, //** you will need to change this **//
renderTo: me.el,
baseCls: btnsCss,
layout: {
type: 'hbox',
align: 'middle'
},
defaults: {
flex: 1,
margins: '0 1 0 1'
},
items: [
{
itemId : 'update',
xtype : 'button',
handler : plugin.completeEdit,
scope : plugin,
text : me.saveBtnText,
minWidth: minWidth,
disabled: me.updateButtonDisabled
},
{
xtype : 'button',
handler : plugin.cancelEdit,
scope : plugin,
text : me.cancelBtnText,
minWidth: minWidth
},
{ //**I added my buttons here**//
xtype : 'button',
text : ">",
handler : this.moveValOver,
scope : me,
maxWidth: 22,
tooltip : "Move over one"
},
{
xtype : 'button',
text : ">>",
handler : this.moveValToEnd,
scope : me,
maxWidth: 22,
tooltip : "Move to the end"
}
]
});
}
return me.floatingButtons;
},
moveValOver: function() {
},
moveValToEnd: function() {
}
});
Last edited by Daniil; Nov 25, 2013 at 11:45 AM.
Reason: [CLOSED]
Originally Posted by Daniil
