Apr 12, 2012, 8:17 AM
how to set date format(d/mY) in dynamic created control in gridpanel after selecting or changing the date
Hi
Can any one please tell me how to apply date format in the gridPanel
After changing the date in the Gridpanel , then change date should be in the format (d/m/Y) ......
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
this.strMetrics.DataSource = new object[]
{
new object[] { "0","DateField", "5/5/2011"},
new object[] { "3","ComboBox", "3" },
};
this.strMetrics.DataBind();
}
}
</script>
<%@ 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 runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
var storeRepo = {
empty: []
, rate_1_10: [['NULL', -1], ['1', 1], ['2', 2], ['3', 3], ['4', 4], ['5', 5], ['6', 6], ['7', 7], ['8', 8], ['9', 9]]
, rate_1_5: [['1', 1], ['2', 2], ['3', 3], ['4', 4], ['5', 5]]
, traffic: [['Red', 4], ['Yellow', 3], ['Green', 2]]
, numbering: [['1', 1], ['3', 2], ['7', 3], ['9', 4]]
};
[INDENT][INDENT][INDENT]function SSS(value, cell, record, row, col, store) {
var subRatingTypeId = record.data["SubjectiveRating"];
//debugger
var reqStoreData = null;
switch (subRatingTypeId) {
case "1":
{
reqStoreData = storeRepo.rate_1_10;
} break;
case "2":
{
reqStoreData = storeRepo.rate_1_5;
}
break;
case "3":
{
reqStoreData = storeRepo.traffic;
}
break;
case "4":
{
reqStoreData = storeRepo.numbering;
} break;
default:
{
boolEnableCombo = true;
}
}
if (subRatingTypeId == "1" || subRatingTypeId == "3") {
var CONST_VALUE_FIELD = 1;
var CONST_DISPLAY_FIELD = 0;
for (var ctr = 0; ctr < reqStoreData.length; ctr++) {
if (reqStoreData[ctr][CONST_VALUE_FIELD] == value) {
if (subRatingTypeId == "1") {
if (value == -1) {
cell.css = "RedColor";
}
else {
cell.css = "GreenColor";
}
}
else if (subRatingTypeId == "3") {
if (value == '2') {
cell.css = "Green";
}
else if (value == '3') {
cell.css = "Yellow";
}
else if (value == '4') {
cell.css = "Red";
}
else {
cell.css = "WhiteColor";
}
}
return reqStoreData[ctr][CONST_DISPLAY_FIELD];
}
}
}
return value;
}
var setEditor = function(e) {
var column = e.grid.getColumnModel().columns[e.column],
ed = column.getCellEditor(e.row);
if (ed) {
ed.destroy();
}
switch (e.record.get("ControlType")) {
case "DateField":
column.setEditor(new Ext.form.DateField({
dataFormat: 'm/d/Y'
}));
break
case "TextField":
column.setEditor(new Ext.form.TextField());
break
case "NumberField":
column.setEditor(new Ext.form.NumberField({
DecimalPrecision: "1",
MaxLength: "8"
}));
break;
case "ComboBox":
column.setEditor(new Ext.form.ComboBox({
displayField: "text",
mode: "local",
triggerAction: "all",
valueField: "value",
store: new Ext.data.SimpleStore({
fields: ["text", "value"],
data: [
["Red", "1"],
["Yellow", "2"],
["Green", "3"]
]
})
}));
break;
}
}
</script>
<style type="text/css">
.RedColor
{
background-color: Red;
color: white;
text-align: left;
}
.GreenColor
{
background-color: Green;
color: white;
text-align: left;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:GridPanel ID="grdMetrics" runat="server" AutoHeight="true" Width="410">
<Store>
<ext:Store ID="strMetrics" runat="server" RefreshAfterSaving="Always">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="SubjectiveRating" />
<ext:RecordField Name="ControlType" />
<ext:RecordField Name="Value" />
<ext:RecordField Name="DateValue" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column Header="SubjectiveRating" DataIndex="SubjectiveRating" />
<ext:Column Header="ControlType" DataIndex="ControlType" />
<ext:Column Header="Value" DataIndex="Value">
<Renderer Fn="SSS" />
</ext:Column>
</Columns>
</ColumnModel>
<Listeners>
<BeforeEdit Fn="setEditor" />
<Render Handler="this.getColumnModel().setEditable(2, true);" />
</Listeners>
</ext:GridPanel>
<ext:Button ID="btnSave" runat="server" Text="Save" IconCls="cls-ico-save">
<Listeners>
<Click Handler="#{grdMetrics}.save();"></Click>
</Listeners>
</ext:Button>
</form>
</body>
</html>
Regards
Praveen
Can any one please tell me how to apply date format in the gridPanel
After changing the date in the Gridpanel , then change date should be in the format (d/m/Y) ......
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
this.strMetrics.DataSource = new object[]
{
new object[] { "0","DateField", "5/5/2011"},
new object[] { "3","ComboBox", "3" },
};
this.strMetrics.DataBind();
}
}
</script>
<%@ 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 runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
var storeRepo = {
empty: []
, rate_1_10: [['NULL', -1], ['1', 1], ['2', 2], ['3', 3], ['4', 4], ['5', 5], ['6', 6], ['7', 7], ['8', 8], ['9', 9]]
, rate_1_5: [['1', 1], ['2', 2], ['3', 3], ['4', 4], ['5', 5]]
, traffic: [['Red', 4], ['Yellow', 3], ['Green', 2]]
, numbering: [['1', 1], ['3', 2], ['7', 3], ['9', 4]]
};
[INDENT][INDENT][INDENT]function SSS(value, cell, record, row, col, store) {
var subRatingTypeId = record.data["SubjectiveRating"];
//debugger
var reqStoreData = null;
switch (subRatingTypeId) {
case "1":
{
reqStoreData = storeRepo.rate_1_10;
} break;
case "2":
{
reqStoreData = storeRepo.rate_1_5;
}
break;
case "3":
{
reqStoreData = storeRepo.traffic;
}
break;
case "4":
{
reqStoreData = storeRepo.numbering;
} break;
default:
{
boolEnableCombo = true;
}
}
if (subRatingTypeId == "1" || subRatingTypeId == "3") {
var CONST_VALUE_FIELD = 1;
var CONST_DISPLAY_FIELD = 0;
for (var ctr = 0; ctr < reqStoreData.length; ctr++) {
if (reqStoreData[ctr][CONST_VALUE_FIELD] == value) {
if (subRatingTypeId == "1") {
if (value == -1) {
cell.css = "RedColor";
}
else {
cell.css = "GreenColor";
}
}
else if (subRatingTypeId == "3") {
if (value == '2') {
cell.css = "Green";
}
else if (value == '3') {
cell.css = "Yellow";
}
else if (value == '4') {
cell.css = "Red";
}
else {
cell.css = "WhiteColor";
}
}
return reqStoreData[ctr][CONST_DISPLAY_FIELD];
}
}
}
return value;
}
var setEditor = function(e) {
var column = e.grid.getColumnModel().columns[e.column],
ed = column.getCellEditor(e.row);
if (ed) {
ed.destroy();
}
switch (e.record.get("ControlType")) {
case "DateField":
column.setEditor(new Ext.form.DateField({
dataFormat: 'm/d/Y'
}));
break
case "TextField":
column.setEditor(new Ext.form.TextField());
break
case "NumberField":
column.setEditor(new Ext.form.NumberField({
DecimalPrecision: "1",
MaxLength: "8"
}));
break;
case "ComboBox":
column.setEditor(new Ext.form.ComboBox({
displayField: "text",
mode: "local",
triggerAction: "all",
valueField: "value",
store: new Ext.data.SimpleStore({
fields: ["text", "value"],
data: [
["Red", "1"],
["Yellow", "2"],
["Green", "3"]
]
})
}));
break;
}
}
</script>
<style type="text/css">
.RedColor
{
background-color: Red;
color: white;
text-align: left;
}
.GreenColor
{
background-color: Green;
color: white;
text-align: left;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:GridPanel ID="grdMetrics" runat="server" AutoHeight="true" Width="410">
<Store>
<ext:Store ID="strMetrics" runat="server" RefreshAfterSaving="Always">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="SubjectiveRating" />
<ext:RecordField Name="ControlType" />
<ext:RecordField Name="Value" />
<ext:RecordField Name="DateValue" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column Header="SubjectiveRating" DataIndex="SubjectiveRating" />
<ext:Column Header="ControlType" DataIndex="ControlType" />
<ext:Column Header="Value" DataIndex="Value">
<Renderer Fn="SSS" />
</ext:Column>
</Columns>
</ColumnModel>
<Listeners>
<BeforeEdit Fn="setEditor" />
<Render Handler="this.getColumnModel().setEditable(2, true);" />
</Listeners>
</ext:GridPanel>
<ext:Button ID="btnSave" runat="server" Text="Save" IconCls="cls-ico-save">
<Listeners>
<Click Handler="#{grdMetrics}.save();"></Click>
</Listeners>
</ext:Button>
</form>
</body>
</html>
Regards
Praveen
Last edited by praveencat123; Apr 17, 2012 at 11:11 AM.