Nov 03, 2011, 11:06 PM
[CLOSED] Apply EXT validation Style on HTML controls.
Hi EXT Team,
I need to apply EXT validation style on normal HTML controls , the problems that the EXT dont have a rating control , so i have to use JQuery Rating Control and HTML controls but with rythem of EXT , my question is how i can apply the EXT validation style on my HTML control.
MY project Properties:
ASP.NET MVC 3.0
EXT.NET.MVC.
My code:
I need to apply EXT validation style on normal HTML controls , the problems that the EXT dont have a rating control , so i have to use JQuery Rating Control and HTML controls but with rythem of EXT , my question is how i can apply the EXT validation style on my HTML control.
MY project Properties:
ASP.NET MVC 3.0
EXT.NET.MVC.
My code:
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<head runat="server">
<script src='http://jquery-star-rating-plugin.googlecode.com/svn/trunk/jquery.js' type="text/javascript"></script>
<script src='http://jquery-star-rating-plugin.googlecode.com/svn/trunk/documentation.js' type="text/javascript"></script>
<link href='http://jquery-star-rating-plugin.googlecode.com/svn/trunk/documentation.css' type="text/css" rel="stylesheet"/>
<script type="text/javaScript" src="http://www.fyneworks.com/jquery/project/chili/jquery.chili-2.0.js"></script>
<script type="text/javascript"> try { ChiliBook.recipeFolder = "/jquery/project/chili/" } catch (e) { }</script>
<script src='http://jquery-star-rating-plugin.googlecode.com/svn/trunk/jquery.MetaData.js' type="text/javascript" language="javascript"></script>
<script src='http://jquery-star-rating-plugin.googlecode.com/svn/trunk/jquery.rating.js' type="text/javascript" language="javascript"></script>
<link href='http://jquery-star-rating-plugin.googlecode.com/svn/trunk/jquery.rating.css' type="text/css" rel="stylesheet"/>
<script type="text/javascript">
var successHandler = function (form, action) {
Ext.MessageBox.alert("Success", "Review has been saved!");
}
var failureHandler = function (form, action) {
var msg = "";
if (action.failureType == "client" || (action.result && action.result.errors && action.result.errors.length > 0)) {
msg = "Please check fields";
} else if (action.result && action.result.extraParams.msg) {
msg = action.result.extraParams.msg;
} else if (action.response) {
msg = action.response.responseText;
}
Ext.Msg.show({
title: "Save Error",
msg: msg,
buttons: Ext.Msg.OK,
icon: Ext.Msg.ERROR
});
};
</script>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:ViewPort ID="ViewPort1" runat="server" Layout="fit">
<Items>
<ext:Panel
runat="server"
Header="false"
Layout="fit">
<Content>
<ext:FormPanel
ID="DetailsForm"
runat="server"
Border="false"
Url="/Data/SaveReview/">
<Items>
<ext:CompositeField ID="CFCustomerService" LabelWidth="100" runat="server" FieldLabel="Customer Service" AnchorHorizontal="100%" StyleSpec="padding-top:5px;">
<Content>
<script type="text/javascript">
$(function () {
$('.ratingCustomerService-hover-star').rating({
focus: function (value, link) {
// 'this' is the hidden form element holding the current value
// 'value' is the value selected
// 'element' points to the link element that received the click.
var tip = $('#spanratingCustomerService');
tip[0].data = tip[0].data || tip.html();
tip.html(link.title || 'value: ' + value);
},
blur: function (value, link) {
var tip = $('#spanratingCustomerService');
$('#spanratingCustomerService').html(tip[0].data || '');
}
});
});
</script>
<div>
<input class="ratingCustomerService-hover-star" type="radio" name="CustomerService" value="1" title="Very poor"/>
<input class="ratingCustomerService-hover-star" type="radio" name="CustomerService" value="2" title="Poor"/>
<input class="ratingCustomerService-hover-star" type="radio" name="CustomerService" value="3" title="OK"/>
<input class="ratingCustomerService-hover-star" type="radio" name="CustomerService" value="4" title="Good"/>
<input class="ratingCustomerService-hover-star" type="radio" name="CustomerService" value="5" title="Very Good"/>
</div>
<span id="spanratingCustomerService" style="margin:0 0 0 20px;"></span>
</Content>
</ext:CompositeField>
<ext:CompositeField ID="CFBuyingProcess" LabelWidth="100" runat="server" FieldLabel="BuyingProcess" AnchorHorizontal="100%" StyleSpec="padding-top:5px;">
<Content>
<script type="text/javascript">
$(function () {
$('.ratingBuyingProcess-hover-star').rating({
focus: function (value, link) {
// 'this' is the hidden form element holding the current value
// 'value' is the value selected
// 'element' points to the link element that received the click.
var tip = $('#spanratingBuyingProcess');
tip[0].data = tip[0].data || tip.html();
tip.html(link.title || 'value: ' + value);
},
blur: function (value, link) {
var tip = $('#spanratingBuyingProcess');
$('#spanratingBuyingProcess').html(tip[0].data || '');
}
});
});
</script>
<div>
<input class="ratingBuyingProcess-hover-star" type="radio" name="BuyingProcess" value="1" title="Very poor"/>
<input class="ratingBuyingProcess-hover-star" type="radio" name="BuyingProcess" value="2" title="Poor"/>
<input class="ratingBuyingProcess-hover-star" type="radio" name="BuyingProcess" value="3" title="OK"/>
<input class="ratingBuyingProcess-hover-star" type="radio" name="BuyingProcess" value="4" title="Good"/>
<input class="ratingBuyingProcess-hover-star" type="radio" name="BuyingProcess" value="5" title="Very Good"/>
</div>
<span id="spanratingBuyingProcess" style="margin:0 0 0 20px;"></span>
</Content>
</ext:CompositeField>
<ext:CompositeField ID="CFQualityofRepair" LabelWidth="100" runat="server" FieldLabel="Quality of Repair" AnchorHorizontal="100%" StyleSpec="padding-top:5px;">
<Content>
<script type="text/javascript">
$(function () {
$('.QualityofRepair-hover-star').rating({
focus: function (value, link) {
// 'this' is the hidden form element holding the current value
// 'value' is the value selected
// 'element' points to the link element that received the click.
var tip = $('#spanQualityofRepair');
tip[0].data = tip[0].data || tip.html();
tip.html(link.title || 'value: ' + value);
},
blur: function (value, link) {
var tip = $('#spanQualityofRepair');
$('#spanQualityofRepair').html(tip[0].data || '');
}
});
});
</script>
<div>
<input class="QualityofRepair-hover-star" type="radio" name="QualityofRepair" value="1" title="Very poor"/>
<input class="QualityofRepair-hover-star" type="radio" name="QualityofRepair" value="2" title="Poor"/>
<input class="QualityofRepair-hover-star" type="radio" name="QualityofRepair" value="3" title="OK"/>
<input class="QualityofRepair-hover-star" type="radio" name="QualityofRepair" value="4" title="Good"/>
<input class="QualityofRepair-hover-star" type="radio" name="QualityofRepair" value="5" title="Very Good"/>
</div>
<span id="spanQualityofRepair" style="margin:0 0 0 20px;"></span>
</Content>
</ext:CompositeField>
<ext:CompositeField ID="CFOverallFacilities" LabelWidth="100" runat="server" FieldLabel="Overall Facilities" AnchorHorizontal="100%" StyleSpec="padding-top:5px;">
<Content>
<script type="text/javascript">
$(function () {
$('.OverallFacilities-hover-star').rating({
focus: function (value, link) {
// 'this' is the hidden form element holding the current value
// 'value' is the value selected
// 'element' points to the link element that received the click.
var tip = $('#spanOverallFacilities');
tip[0].data = tip[0].data || tip.html();
tip.html(link.title || 'value: ' + value);
},
blur: function (value, link) {
var tip = $('#spanOverallFacilities');
$('#spanOverallFacilities').html(tip[0].data || '');
}
});
});
</script>
<div>
<input class="OverallFacilities-hover-star" type="radio" name="OverallFacilities" value="1" title="Very poor"/>
<input class="OverallFacilities-hover-star" type="radio" name="OverallFacilities" value="2" title="Poor"/>
<input class="OverallFacilities-hover-star" type="radio" name="OverallFacilities" value="3" title="OK"/>
<input class="OverallFacilities-hover-star" type="radio" name="OverallFacilities" value="4" title="Good"/>
<input class="OverallFacilities-hover-star" type="radio" name="OverallFacilities" value="5" title="Very Good"/>
</div>
<span id="spanOverallFacilities" style="margin:0 0 0 20px;"></span>
</Content>
</ext:CompositeField>
<ext:CompositeField ID="CFResonForVisit" HideLabel="true" runat="server" AnchorHorizontal="100%" StyleSpec="padding-top:30px;">
<Content>
<div>
<input type="checkbox" id="typ_new" name="typ_new" value="shnew" title="Shopping for New" />Shopping for New
<input type="checkbox" id="typ_used" name="typ_used" value="shused" title="Shopping for Used"/>Shopping for Used
<input type="checkbox" id="typ_service" name="typ_service" value="service" title="Service / Repair"/>Service / Repair
</div>
</Content>
</ext:CompositeField>
<ext:CompositeField ID="CFDoYouRecommend" FieldLabel="Would you recommend this dealer to a friend?" LabelWidth="300" runat="server" AnchorHorizontal="100%" StyleSpec="padding-top:30px;">
<Content>
<div>
<input type="radio" id="YesRecommendDealer" name="RecommendDealer" value="yes"/> Yes
<input type="radio" id="NoRecommendDealer" name="RecommendDealer" value="No"/> No
</div>
</Content>
</ext:CompositeField>
<ext:Button ID="SaveReview" runat="server" Text="Save" Icon="Disk">
<Listeners>
<Click Handler="#{DetailsForm}.form.submit({ waitMsg : 'Saving...', success : successHandler, failure : failureHandler });" />
</Listeners>
</ext:Button>
</Items>
</ext:FormPanel>
</Content>
</ext:Panel>
</Items>
</ext:ViewPort>
</body>
</html>
Last edited by Daniil; Nov 09, 2011 at 5:38 PM.
Reason: [CLOSED]
