PDA

View Full Version : [CLOSED] Custom Grid Control Error with new Version 2.3.1



duskfall
Nov 20, 2013, 6:09 AM
I made a custom control with information from this (http://www.sencha.com/forum/showthread.php?259213-Adding-buttons-to-the-roweditor)
and this (http://www.sencha.com/forum/archive/index.php/t-265246.html?) 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();
}


Index.cshtml


@{
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.Scr iptMode.Debug).SourceFormatting(true)
</body>
</html>


javascript


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
})
]

});


javascript


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; }

});


javascript


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() {

}
});

Daniil
Nov 20, 2013, 6:45 AM
Hi @duskfall,

Welcome to the Ext.NET forums!

Ext.NET 2.2 uses ExtJS 4.2.0.

Ext.NET 2.3 uses ExtJS 4.2.1.

I guess it is the reason why it crashes, i.e. the plugin which you are using is not tested and adjusted with ExtJS 4.2.1.

I found that removing this

renderTo: view.el
seems to make it working.

duskfall
Nov 21, 2013, 12:14 AM
Thank you for quick reply but it seems not working either.



I found that removing this

renderTo: view.el

seems to make it working.

Symptom is when I debug with chrome, when I refresh page hit the code below(part of javascript for "test.util.ucRowEditor") none with version 2.2
but about 6 times with version 3.2.1 without "renderTo: view.el" -> it was 9 times with it...

part of javascript for "test.util.ucRowEditor"


getFloatingButtons: function() {
var me = this,
cssPrefix = Ext.baseCSSPrefix,
btnsCss = cssPrefix + 'grid-row-editor-buttons',
plugin = me.editingPlugin,
minWidth = Ext.panel.Panel.prototype.minButtonWidth,
btns;



It is called from ext.axd?v=41064 (Ext JS 4.2 file) 107,081 line



getRefItems: function() {
var me = this,
result;

if (me.lockable) {
result = me.lockedColumnContainer.getRefItems();
result.push.apply(result, me.normalColumnContainer.getRefItems());
} else {
result = me.callParent();
}
result.push.apply(result, me.getFloatingButtons().getRefItems());
return result;
},


and

same file 106,685 line


onGridResize: function() {
var me = this,
clientWidth = me.getClientWidth(),
grid = me.editingPlugin.grid,
gridBody = grid.body,
btns = me.getFloatingButtons();

me.setLocalX(gridBody.getOffsetsTo(grid)[0] + gridBody.getBorderWidth('l') - grid.el.getBorderWidth('l'));

me.setWidth(clientWidth);
btns.setLocalX((clientWidth - btns.getWidth()) / 2);
},


in the code above
me.setWidth(clientWidth); calls

same javascript file 31,464 line


getWidth : function() {
return this.el.getWidth();
},


then make error and it says "Uncaught TypeError: Cannot call method 'getWidth' of undefined " twoice and not working at all... T_T

I made two demo solutions. One with ver2.2 and another with ver 3.2.1.

Click hree (http://me2.do/FMiMwa7c) and you will be asked password like below.
7239
Don't panic it's Korean ^^; just input "1234" int the blue box and click button below the blue box.

Some more Korean and you can find "Demo.zip". Please have a look and show me the way.

Daniil
Nov 21, 2013, 3:57 AM
Ok, here is my test case.

It is exactly your code , except "renderTo: view.el" commented out. I click the first row, a row editor appears.

Example

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Ext.Net.MVC Example</title>

<script>
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 () {

}
});
</script>

<script>
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; }

});
</script>

<script>
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
})
]

});
</script>

<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.Scr iptMode.Debug).SourceFormatting(true)
</body>
</html>

duskfall
Nov 21, 2013, 7:51 AM
I'm so sorry but still not working T_T

I'm using Visual Studio Professional 2012 with service pack 4.

Case make error.
1. make an empty ASP.NET MVC 4 project
2. Install-Package Ext.NET.MVC (NuGet package management console)
3. Add Controller, View and js files
4. Run -> Crash

Case no problem
1. make an empty ASP.NET MVC 4 project
2. Install-Package Ext.NET.MVC -Version 2.2 (NuGet package management console)
3. Add Controller, View and js files
4. Run -> OK

Can you tell me what I have done wrong, please?

Same code just different version applied by NuGet make a difference.

We need to use next version (maybe v2.4) because of multi-hasmanyassociation problem with StoreFor.
Otherwise I would stick to use v2.2.

Check again please.

Daniil
Nov 21, 2013, 1:50 PM
Maybe, it was fixed after the v2.3.1 release. I am not sure.

Could you use (or, at least, test) the Ext.NET sources from the SVN trunk?

duskfall
Nov 22, 2013, 4:20 AM
Maybe, it was fixed after the v2.3.1 release. I am not sure.

Could you use (or, at least, test) the Ext.NET sources from the SVN trunk?

1. Create ASP.NET MVC 4 project
2. Demo with v2.3.1 with NuGet
3. change Ext.Net.dll, Ext.Net.Utilities.dll, Newtonsoft.Json.dll, Transformer.NET.dll from SVN trunk (just four files are OK?)
4. Add controller, view and js files
5. Run -> Crash...

Tried in other computer, but same result...

Anything else I can try?

Daniil
Nov 22, 2013, 4:35 AM
3. change Ext.Net.dll, Ext.Net.Utilities.dll, Newtonsoft.Json.dll, Transformer.NET.dll from SVN trunk (just four files are OK?)

Did you download the sources from here
http://svn.ext.net/premium/trunk/

and build it, right?

duskfall
Nov 22, 2013, 6:04 AM
Did you download the sources from here
http://svn.ext.net/premium/trunk/

and build it, right?

Yes, I downloaded from "http://svn.ext.net/premium/trunk/" with TortoiseSVN client and built with Visual Studio 2012 with sp4, serveral warnings but no error.

Then copied files from "Ext.Net\bin\Deug\" folder to [my local project foler]\packages\Ext.NET.MVC.2.3.1, Ext.NET.Utilities.2.3.0, Newtonsoft.Json.5.0.8 and Transformer.NET.2.1.1 folders each dll file.

Daniil
Nov 22, 2013, 6:25 AM
Then copied files from "Ext.Net\bin\Deug\" folder to [my local project foler]\packages\Ext.NET.MVC.2.3.1, Ext.NET.Utilities.2.3.0, Newtonsoft.Json.5.0.8 and Transformer.NET.2.1.1 folders each dll file.

Please another way instead of manual copying.

Visual Studio => Solution Explorer => Project => References

Remove Ext.NET dlls (right click => remove) and add new references: right click on "References" and "Add Reference...".

duskfall
Nov 22, 2013, 9:51 AM
Please another way instead of manual copying.

Visual Studio => Solution Explorer => Project => References

Remove Ext.NET dlls (right click => remove) and add new references: right click on "References" and "Add Reference...".

1. Create New ASP.NET MVC4 empty project
2. Install-Package Ext.NET.MVC
3. Remove 4 references (Ext.Net, Ext.Net.Utilities, Newtonsoft.Json, Transformer.NET)
4. Add Controller, View, js files
5. Create Folder Lib and copy dll files from SVN build
6. Add 4 references
7. Run -> Crash (T_T)

Is there any other way to add buttons for RowEditing plugin?

It looks involved with changes of ExtJS (especially initComponent... saw somewhere with hash -> removed in new version).

Can I build Ext.Net with old version of ExtJS? If so I wanna try build with ExtJS 4.2.0.

Thank you Daniil so quick response with this strange problem ^^.

Daniil
Nov 22, 2013, 12:11 PM
Weird. I still cannot reproduce. It works for me. Does it crash in all the browsers? Could you share your test case online?


Is there any other way to add buttons for RowEditing plugin?

Maybe, this way.

Ext.grid.RowEditorButtons.override({
constructor: function (config) {
var me = this,
rowEditor = config.rowEditor,
cssPrefix = Ext.baseCSSPrefix,
plugin = rowEditor.editingPlugin;

config = Ext.apply({
baseCls: cssPrefix + 'grid-row-editor-buttons',
defaults: {
xtype: 'button',
ui: rowEditor.buttonUI,
scope: plugin,
flex: 1,
minWidth: Ext.panel.Panel.prototype.minButtonWidth
},
items: [{
cls: cssPrefix + 'row-editor-update-button',
itemId: 'update',
handler: plugin.completeEdit,
text: rowEditor.saveBtnText,
disabled: rowEditor.updateButtonDisabled
}, {
cls: cssPrefix + 'row-editor-cancel-button',
handler: plugin.cancelEdit,
text: rowEditor.cancelBtnText
}, {
text: "My Button",
handler: function() {
alert("click");
}
}]
}, config);

Ext.grid.RowEditorButtons.superclass.constructor.c all(this, config);

me.addClsWithUI(me.position);
}
});



Can I build Ext.Net with old version of ExtJS? If so I wanna try build with ExtJS 4.2.0.


No. Ext.NET and ExtJS versions are tightly related.

duskfall
Nov 25, 2013, 7:01 AM
Thank you Daniil and so sorry.

I made a big mistake and bother you so much.

You can mark closed this thread.

P.S
Thank you for the RowEditorButtons information.