Jul 13, 2011, 8:31 PM
[CLOSED] Is there a way to load labels in a form panel using data from a store
Hi,
I've searched around a bit and must be missing it (also hard to search as "label" brings up lots of noise!) but I am wondering if there is a way to have readonly form data that is not a disabled text field but just regular html, but works with form items much like text fields etc (i.e. has a DataIndex property and can be updated via a Store, or a form.LoadRecord() or .setValues() etc)?
Here's a very contrived example, as I don't know how to explain better :)
In this example, I have a bunch of text fields. One of them (e.g. the record id field), instead of being a textfield I want as just a label with a non text field value but keeping it aligned with the other fields, with its own label property, data index etc. (That is something like a div or span instead of an input type=text. I don't want input type text that is readonly=true and disabled=true, but just regular html text that is updated when the store is updated.)
If nothing exists would another option be to create a custom control? (If so, any pointers or guidelines on doing that the right way you could link me to as I imagine there'd be a number client side form related considerations as well?)
Thanks!
I've searched around a bit and must be missing it (also hard to search as "label" brings up lots of noise!) but I am wondering if there is a way to have readonly form data that is not a disabled text field but just regular html, but works with form items much like text fields etc (i.e. has a DataIndex property and can be updated via a Store, or a form.LoadRecord() or .setValues() etc)?
Here's a very contrived example, as I don't know how to explain better :)
In this example, I have a bunch of text fields. One of them (e.g. the record id field), instead of being a textfield I want as just a label with a non text field value but keeping it aligned with the other fields, with its own label property, data index etc. (That is something like a div or span instead of an input type=text. I don't want input type text that is readonly=true and disabled=true, but just regular html text that is updated when the store is updated.)
<%@ Page Language="C#" %>
<!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 runat="server">
<title>Loading form using nested JSON</title>
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" Mode="Script" runat="server" />
<script type="text/javascript">
Ext.ns("FormExample");
FormExample.sampleData1 = {
success: true,
data: {
id: '0001',
name: 'Joe',
address: {
firstLine: '10 Acacia Ave',
city: 'London',
country: 'UK',
postalCode: 'who cares'
},
contact: {
phone: [ '07123123122', '02081111111' ],
email: [ 'test1@test.com', 'test2@test.com']
}
}
};
FormExample.sampleData2 = {
success: true,
data: {
id: '0002',
name: 'Blogs',
address: {
firstLine: '11 Acacia Ave',
city: 'Birmingham',
country: 'UK',
postalCode: 'who cares2'
},
contact: {
phone: [ '07111111111', '02082222222' ],
email: [ 'test3@test.com', 'test4@test.com']
}
}
};
FormExample.loadData = function(data) {
Store1.loadData(data);
Ext.getCmp('FormPanel1').getForm().loadRecord(Store1.getAt(0));
};
</script>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<form id="HtmlForm" runat="server">
<ext:Viewport runat="server" Layout="BorderLayout">
<Bin>
<ext:Store ID="Store1" IDMode="Explicit" runat="server">
<Reader>
<ext:JsonReader IDProperty="id" Root="data" SuccessProperty="success">
<Fields>
<ext:RecordField Name="id" />
<ext:RecordField Name="name" />
<ext:RecordField Name="AddressLine" Mapping="address.firstLine" />
<ext:RecordField Name="AddressCity" Mapping="address.city" />
<ext:RecordField Name="AddressCountry" Mapping="address.country" />
<ext:RecordField Name="AddressPostalCode" Mapping="address.postalCode" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
</Bin>
<Items>
<ext:Panel runat="server" region="West" Width="200">
<Items>
<ext:Button Text="Load data 1" runat="server">
<Listeners>
<Click Handler="FormExample.loadData(FormExample.sampleData1);" />
</Listeners>
</ext:Button>
<ext:Button Text="Load data 2" runat="server">
<Listeners>
<Click Handler="FormExample.loadData(FormExample.sampleData2);" />
</Listeners>
</ext:Button>
</Items>
</ext:Panel>
<ext:FormPanel ID="FormPanel1" IDMode="Explicit" runat="server" region="Center">
<Items>
<ext:TextField runat="server" ID="RecordId" DataIndex="id" FieldLabel="Id" />
<ext:TextField runat="server" ID="Name" DataIndex="name" FieldLabel="Name" />
<ext:TextField runat="server" ID="AddressLine" DataIndex="AddressLine" FieldLabel="Line" />
<ext:TextField runat="server" ID="AddressCity" DataIndex="AddressCity" FieldLabel="City" />
<ext:TextField runat="server" ID="AddressCountry" DataIndex="AddressCountry" FieldLabel="Country" />
</Items>
</ext:FormPanel>
</Items>
</ext:Viewport>
</form>
</body>
</html>If nothing exists would another option be to create a custom control? (If so, any pointers or guidelines on doing that the right way you could link me to as I imagine there'd be a number client side form related considerations as well?)
Thanks!
Last edited by Daniil; Jul 15, 2011 at 1:03 PM.
Reason: [CLOSED]
