Nov 19, 2010, 9:52 PM
[CLOSED] Breaking Change in latest SVN
I hadn't updated the libs in a month or so, and when I got the RC I found several breaking changes (most were documented, but changes to the Panel/Container inheritance structure was not and caused several breaking changes too)
However I am still stuck on one bug.
The code below is actually a repost (with 1 change) from the thread:
http://forums.ext.net/showthread.php...Target-support
If I go back to the old libs (~5 weeks ago), the original example works.
With the new libs, the onRender override would fail because this.el was null. I looked at the newer onRender for CompositeField see that it now calls 'innterCt.render(ct)' first so I added that line. Now it doesn't fail, but it renders nothing. Actually the divs are all there, but they seem invisible or something.
How can I get this example working again using the new libs?
However I am still stuck on one bug.
The code below is actually a repost (with 1 change) from the thread:
http://forums.ext.net/showthread.php...Target-support
If I go back to the old libs (~5 weeks ago), the original example works.
With the new libs, the onRender override would fail because this.el was null. I looked at the newer onRender for CompositeField see that it now calls 'innterCt.render(ct)' first so I added that line. Now it doesn't fail, but it renders nothing. Actually the divs are all there, but they seem invisible or something.
How can I get this example working again using the new libs?
<%@ Page Language="C#" CodeBehind="Test.aspx.cs" Inherits="CustomField.Test" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script runat="server">
public class MyCompositeField : CompositeField
{
public MyCompositeField() { }
public override string XType { get { return "ux.mycompositefield"; } }
public override string InstanceOf { get { return "Ext.ux.MyCompositeField"; } }
[System.ComponentModel.Browsable(false)]
[System.ComponentModel.EditorBrowsable(System.ComponentModel.EditorBrowsableState.Never)]
[System.ComponentModel.DesignerSerializationVisibility(System.ComponentModel.DesignerSerializationVisibility.Hidden)]
[System.Xml.Serialization.XmlIgnore]
[Newtonsoft.Json.JsonIgnore]
public override ConfigOptionsCollection ConfigOptions
{
get
{
ConfigOptionsCollection list = base.ConfigOptions;
list.Add("container", new ConfigOption("container", new SerializationOptions("innerCt", typeof(LazyControlJsonConverter)), null, this.Container));
return list;
}
}
private Container container;
[PersistenceMode(PersistenceMode.InnerProperty)]
public Container Container
{
get
{
if (this.container == null)
{
this.container = new Container();
}
return this.container;
}
}
protected override void CreateChildControls()
{
this.Controls.Add(this.Container);
this.LazyItems.Add(this.Container);
}
}
protected void Page_Init(object sender, EventArgs e)
{
FormPanel mainForm = new FormPanel { Width = Unit.Pixel(600), DefaultAnchor = "-4", ID = "mainFormId" };
mainForm.Items.Add(new Ext.Net.TextField { FieldLabel = "TextField1", ID = "textField1Id", MsgTarget = Ext.Net.MessageTarget.Under });
mainForm.Items.Add(new MyCompositeField {
FieldLabel = "NameField2",
ID = "nameField1Id",
MsgTarget = Ext.Net.MessageTarget.Under,
Container = { Layout="Container", Items = { new CustomNameField1()}}
});
Ext.Net.Button markButton = new Ext.Net.Button { Text = "Mark Invalid" };
Ext.Net.Button clearButton = new Ext.Net.Button { Text = "Clear Invalid" };
markButton.Listeners.Click.Fn = "markInvalid";
clearButton.Listeners.Click.Fn = "clearInvalid";
mainForm.Buttons.Add(markButton);
mainForm.Buttons.Add(clearButton);
Form.Controls.Add(new ResourceManager { ScriptMode = Ext.Net.ScriptMode.Debug });
Form.Controls.Add(mainForm);
}
public class CustomNameField1 : FormPanel
{
private TextField _firstName = new TextField { Flex = 1, };
private TextField _initials = new TextField { Width = Unit.Pixel(40) };
private TextField _lastName = new TextField { FieldLabel = "Last", ID = "cnf1_lastName", MsgTarget = MessageTarget.Under };
private TextField _logon = new TextField { FieldLabel = "Logon" };
private TextField _email = new TextField { FieldLabel = "Email" };
private TextField _nickname = new TextField { FieldLabel = "Alias" };
private FieldSet _fieldSet = new FieldSet { Title = "Other Name Fields", Collapsible = true, Collapsed = true };
public CustomNameField1()
{
base.Cls = "my-nameField1";
base.Border = false;
base.DefaultAnchor = "-4";
base.LabelWidth = 40;
base.IsFormField = true;
base.Items.Add(new Ext.Net.CompositeField {
FieldLabel = "First",
Items ={
_firstName,
new DisplayField{Text="Initials"},
_initials
}
});
base.Items.Add(_lastName);
_fieldSet.Items.Add(new FormPanel { Items = { _logon, _email, _nickname }, DefaultAnchor = "-4" });
base.Items.Add(_fieldSet);
}
}
</script>
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="ScriptFiles" />
<script type="text/javascript">
Ext.ux.MyCompositeField = Ext.extend(Ext.form.CompositeField,
{
onRender: function(ct, position)
{
if (!this.el) {
var configCt = Ext.apply(Ext.isArray(this.innerCt) ? this.innerCt[0] : this.innerCt, {renderTo: ct});
var innerCt = this.innerCt = Ext.ComponentMgr.create(configCt, "container");
innerCt.render(ct); // only change from original example. Otherwise the next line leaves this.el == null
this.el = innerCt.getEl();
var fields = innerCt.findBy(function(c) {
return c.isFormField;
}, this);
var items = new Ext.util.MixedCollection();
items.addAll(Ext.isArray(this.items) ? this.items : [this.items]);
this.items = items;
if (this.combineErrors)
{
this.eachItem(function (field) {
Ext.apply(field, {
markInvalid : this.onFieldMarkInvalid.createDelegate(this, [ field ], 0),
clearInvalid : this.onFieldClearInvalid.createDelegate(this, [ field ], 0)
});
});
}
if (this.items)
{
for (var i = 0, len = this.items.length; i < len; i++) {
var item = this.items.get(i);
if (!item.getName)
{
item.getName = Ext.emptyFn;
}
}
}
var l = this.el.parent().parent().child("label", true);
if (l && this.fields && this.fields.length > 0)
{
l.setAttribute("for", this.fields[0].id);
}
}
Ext.ux.MyCompositeField.superclass.onRender.apply(this, arguments);
}
});
Ext.reg('ux.mycompositefield', Ext.ux.MyCompositeField);
</script>
<script type="text/javascript">
function markInvalid()
{
Ext.getCmp('nameField1Id').markInvalid('name1 bad');
Ext.getCmp('textField1Id').markInvalid('text1 bad');
Ext.getCmp('cnf1_lastName').markInvalid('LName bad');
}
function clearInvalid()
{
Ext.getCmp('nameField1Id').clearInvalid();
Ext.getCmp('textField1Id').clearInvalid();
Ext.getCmp('cnf1_lastName').clearInvalid();
}
</script>
<style type="text/css">
.my-nameField1
{
border: solid 1px #91A7B4;
padding-left:4px;
padding-top:4px;
padding-bottom:4px;
}
</style>
</head>
<body>
<form id="form2" runat="server"> </form>
</body>
</html>
Last edited by geoffrey.mcgill; Nov 25, 2010 at 5:34 PM.
Reason: [CLOSED]
