i'm working in ext.net login form, but no idea how to implement a custom logic to take the user text field & password textfield & validate it.
here is what a had made till now.
appretiate help..
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Ext.NET Example</title>
<link type="text/css" rel="stylesheet" href="http://speed.ext.net/www/intro/css/main.css" />
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Window runat="server" Width="300" Height="200" Draggable="False" Closable="False" Icon="Lock" Title="Loging" BodyPadding="5">
<Items>
<ext:TextField runat="server" Text="Demo" FieldLabel="user" BlankText="ur name is required" AllowBlank="False" ReadOnly="False"/>
<ext:TextField runat="server" Text="password" FieldLabel="pass" BlankText="Pass required" AllowBlank="False" ReadOnly="False" />
</Items>
<Buttons>
<ext:Button runat="server" ID="buton" Icon="Accept" Text="Submit" >
<Listeners>
<Click Handler="init"></Click>
</Listeners>
</ext:Button>
</Buttons>
</ext:Window>
</form>
</body>
</html>
There's a login form with browsers 'saving' functionality (allows google chrome to ask you to "save" the password. This is a full transcript of the example which can be accessed at http://examples4.ext.net/#/Form/Login/Auto_Complete/.
<%# Page Language="C#" %>
<script runat="server">
protected void Button1_Click(object sender, DirectEventArgs e)
{
// Do some Authentication...
if (e.ExtraParams["user"] != "Ext.NET" || e.ExtraParams["pass"] != "extnet")
{
e.Success = false;
e.ErrorMessage = "Invalid username or password.";
}
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Login - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<script>
// Invalidate the login fields with the given reason.
var invalidateLogin = function(reason) {
App.txtUsername.setValidation(reason);
App.txtPassword.setValidation(reason);
App.txtUsername.validate();
App.txtPassword.validate();
Ext.MessageBox.show({
title: 'Authentication error',
msg: reason,
buttons: Ext.MessageBox.OK,
animateTarget: 'Window1',
icon: 'Error'
});
};
var handleLogin = function() {
var form = App.Window1.el.up().dom; // Window1 is a direct child of the form element.
App.Window1.close();
// Now this would work for Chrome, and we already triggered autoComplete for IE.
// Chrome's is only triggered after the destination page is loaded.
setForm(form, "../../../Desktop/Introduction/Overview/Desktop.aspx", form.target);
form.submit();
restoreForm(form);
};
var orgFormAction, orgFormTarget,
btn = null, iframe = null;
// If we are on IE, we will create a button and click it (at once),
// so autoComplete is triggered.
var handleClientClick = function() {
var form = App.Window1.el.up().dom; // Window1 is a direct child of the form element.
if (Ext.isIE) {
if (iframe == null) {
iframe = document.createElement("IFRAME");
iframe.name = "ie_login_flush";
iframe.style.display = "none";
form.appendChild(iframe);
}
if (btn == null) {
btn = document.createElement("BUTTON");
btn.type = "submit";
btn.id = "submitButton";
btn.style.display="none";
form.appendChild(btn);
}
// On WebForms, we have to force set the form settings as we run or else we'll
// break directEvent calls.
setForm(form, "about:blank", "ie_login_flush");
btn.click();
restoreForm(form);
}
}
var setForm = function(form, action, target) {
// Back up original settings once per execution.
if (typeof orgFormAction == 'undefined') {
orgFormAction = form.action;
}
if (typeof orgFormTarget == 'undefined') {
orgFormTarget = form.target;
}
form.action = action;
form.target = target;
};
var restoreForm = function(form) {
form.action = orgFormAction;
form.target = orgFormTarget;
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<h1>Logging with browser saving functionality</h1>
<p>The valid login/password combination here would be:</p>
<p>
Username: Ext.NET<br>
Password: extnet
</p>
<p>On successful authentication, you will be redirected to the Desktop example.</p>
<ext:Window
ID="Window1"
runat="server"
Closable="false"
Resizable="false"
Height="200"
Icon="Lock"
Title="Login"
Draggable="true"
Width="350"
Modal="false"
BodyPadding="5"
Layout="Form">
<Items>
<ext:TextField
ID="txtUsername"
runat="server"
Name="username"
FieldLabel="Username"
AllowBlank="false"
BlankText="Your username is required." />
<ext:TextField
ID="txtPassword"
runat="server"
Name="password"
InputType="Password"
FieldLabel="Password"
AllowBlank="false"
BlankText="Your password is required." />
</Items>
<Buttons>
<ext:Button
ID="Button1"
runat="server"
Text="Login"
Icon="Accept"
FormBind="true"
Handler="handleClientClick">
<DirectEvents>
<Click
OnEvent="Button1_Click"
Success="handleLogin"
Failure="invalidateLogin(result.errorMessage);"
ShowWarningOnFailure="false">
<EventMask ShowMask="true" Msg="Verifying..." MinDelay="1000" />
<ExtraParams>
<ext:Parameter Name="user" Value="App.txtUsername.value" Mode="Raw" />
<ext:Parameter Name="pass" Value="App.txtPassword.value" Mode="Raw" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
</Buttons>
</ext:Window>
</form>
</body>
</html>
Related
User control (ascx) with a password input. Right-click, inspect - the value is visible. This doesn't happen if the password input is in an aspx.
Hmm, it seems I have to add some ramblings here, since the platform won't allow me to post this thread due to "mostly code".
Default.aspx
<%# Page Language="C#" %>
<%# Register Src="UserPassword.ascx" TagName="UserPass" TagPrefix="uc" %>
<script runat="server">
protected void Page_Load( object sender, EventArgs e )
{
if ( !X.IsAjaxRequest )
{
this.BindUser();
}
}
public void BindUser()
{
userPass1.UserName = "AliBaba";
userPass1.Password = "OpenSesame";
}
</script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Password inspect bug</title>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager runat="server" />
<ext:Window
ID="Window1"
runat="server"
Icon="User"
Closable="false"
Title="Customer Details"
Width="350"
Height="230"
Resizable="false"
BodyStyle="background-color:#fff;"
BodyPadding="5"
Layout="Anchor">
<Items>
<ext:Panel ID="panel1" runat="server" Header="false" Layout="FitLayout">
<Content>
<uc:UserPass ID="userPass1" runat="server"></uc:UserPass>
</Content>
</ext:Panel>
</Items>
</ext:Window>
</form>
</body>
</html>
UserPassword.ascx
<%# Control Language="C#" %>
<script runat="server">
public string UserName
{
get { return this.txtUser.Text; }
set { this.txtUser.Text = value; }
}
public string Password
{
get { return this.txtPassword.Text; }
set { this.txtPassword.Text = value; }
}
</script>
<ext:Panel ID="panel1" runat="server" BodyPadding="5" Layout="AnchorLayout">
<Items>
<ext:Panel ID="panel2" runat="server" Border="false" Header="false" AnchorHorizontal="100%" Layout="FormLayout">
<Items>
<ext:TextField ID="txtUser" runat="server" FieldLabel="User" />
<ext:TextField ID="txtPassword" runat="server" FieldLabel="Password" InputType="Password" />
</Items>
</ext:Panel>
</Items>
</ext:Panel>
Are there any known workarounds?
Short answer: Use this.txtPassword.setValue(value) not this.txtPassword.Text = value to fix your direct problem.
Long answer: Why you are setting the password from the server? Best practice states that passwords are stored as hashes on the server so you don't actually know a users real password, you are just comparing two hashes.
public string Password
{
get { return this.txtPassword.Text; }
set { this.txtPassword.Text = value; }
}
If you want to autofill a password, which i assume you do, you need to use a cookie.
if (Request.Cookies["username"] != null)
{
this.txtUsername.setValue(Request.Cookies["uid"].Value);
this.txtPassword.setValue(Request.Cookies["pwd"].Value);
}
I would like to change panel width size from javascript.
Here my code but don't work:
Javascript code:
<script type="text/javascript">
var ExtraExpandMAP = function (pannello) {
pannello.setWidth = 920;
};
</script>
Asp.Net code:
<ext:Panel ID="PanelLazyMAP" runat="server"
Region="East"
Width="460"
Title="Mappa"
Layout="Fit"
Floatable="false"
Resizable="true"
Collapsed="true"
Collapsible="true"
AutoScroll="false"
BodyStyle="background-color:#ffffff;"
MarginSpec="84 0 0 0" AnimCollapse ="false">
<HeaderConfig>
<Items>
<ext:Button ID="btnExpandExtraMAP" runat="server" Icon="RewindGreen">
<Listeners>
<Click Handler="ExtraExpandMAP(#{PanelLazyMAP});">
</Click>
</Listeners>
</ext:Button>
</Items>
</HeaderConfig>
</ext:Panel>
The problem is:
pannello.setWidth = 920;
instead of:
pannello.setWidth(920);
How can I get all the columns by index. Like I don't know how many columns I have and what is their DataIndex value then how to get them.
Actually I want to clear the cells so thats why looking for indexes of each column in row. If there is any other way to clear the row data then please help in that.
Currently I have got the row index by using below code,
var record = grid.getSelectionModel().getSelection()[0];
var index = store.indexOf(record);
now first thing i want to do is to clear the contents of cells in selected row on clicking button and secondly i want to get index of the columns inside this selected row and set any value to them using their index.
I guess you actually want to change something if a specific value in a cell appears - to do that in your grid add:
<View>
<ext:GridView runat="server" >
<GetRowClass Fn="getRowClass" />
</ext:GridView>
</View>
and in the getRowClass you then can do what you want for each row like:
function getRowClass(record) {
var someVar = record.data.<columnIndex>;
if (someVar == <someValue>) {
do something
}}
Please see the Buttons' Handlers.
<%# Page Language="C#" %>
<%# Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { "test1", "test2", "test3" },
new object[] { "test4", "test5", "test6" },
new object[] { "test7", "test8", "test9" }
};
}
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
<script>
var setRecord = function (record, value) {
var i,
fields = record.fields.items,
field;
record.beginEdit();
for (i = 0; i < fields.length; i++) {
field = fields[i].name;
if (field !== record.idProperty) {
record.set(field, value);
}
}
record.endEdit();
};
var clear = function () {
var grid = App.GridPanel1,
selection = grid.getSelectionModel().getSelection(),
i;
for (i = 0; i < selection.length; i++) {
setRecord(selection[i], "");
}
};
var set = function () {
var grid = App.GridPanel1,
selection = grid.getSelectionModel().getSelection(),
i;
for (i = 0; i < selection.length; i++) {
setRecord(selection[i], "new");
}
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Button runat="server" Text="Clear" Handler="clear" />
<ext:Button runat="server" Text="Set" Handler="set" />
<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test1" />
<ext:ModelField Name="test2" />
<ext:ModelField Name="test3" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test1" DataIndex="test1" />
<ext:Column runat="server" Text="Test2" DataIndex="test2" />
<ext:Column runat="server" Text="Test3" DataIndex="test3" />
</Columns>
</ColumnModel>
</ext:GridPanel>
</form>
</body>
</html>
is there anyway to bind propertgrid to the store.
I find a sample here ,is this the only way to bind data to propertgrid?I wanna bind data like as bind the gridview thank you
<script runat="server">
protected void Populate(object sender, DirectEventArgs e)
{
PropertyGridParameter p = new PropertyGridParameter();
p.Name = "dynamic";
p.Value = "property";
p.Editor.Add(new ComboBox());
this.PropertyGrid1.SetSource(new PropertyGridParameterCollection() { p }, true);
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Button runat="server" Text="Populate" OnDirectClick="Populate" />
<ext:PropertyGrid ID="PropertyGrid1" runat="server">
<Source>
<ext:PropertyGridParameter Name="initial" Value="property" />
</Source>
</ext:PropertyGrid>
</form>
</body>
</html>
PropertyGrid internally uses its own store and its unavailable to bind data to in a similar way as you can do with a GridPanel.
I think nothing stops you to use a a common GridPanel if you have such a requirement.
I am using webservice.I wanna sumbit my form elements to the webservice,in your example ,it is possiable send parameterrs by one by.is there any way to submit whole form and parse it and reach serverside part.
<ext:Button ID="Button1" runat="server" Text="XML WebMethod">
<Listeners>
<Click Handler="xmlService(#{txtName}.getValue());" />
</Listeners>
</ext:Button>
var xmlService = function (name) {
Ext.net.DirectMethod.request({
url : "XmlService.asmx/SayHello",
cleanRequest : true,
params : {
name : name
},
success : function (result) {
Ext.Msg.alert("Xml Message", Ext.DomQuery.selectValue("string", result, ""));
}
});
};
or using eventhandler
<ext:Button runat="server" Text="[WebMethod]">
<DirectEvents>
<Click
Url="TestService.asmx/SayHello1"
Type="Load"
Method="POST"
CleanRequest="true">
<ExtraParams>
<ext:Parameter Name="name" Value="#{txtName}.getValue()" Mode="Raw" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
Assume there is the following form on the page.
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:TextField ID="TextField1" runat="server" />
<ext:TextField ID="TextField2" runat="server" />
</form>
A DirectMethod call with a form submit.
Ext.net.DirectMethod.request({
url : "XmlService.asmx/Submit",
formId : "form1"
});
A DirectEvent call with a form submit.
<DirectEvents>
<Click Url="XmlService.asmx/Submit" />
</DirectEvents>
A Submit WebMethod
[WebMethod]
public object Submit(string TextField1, string TextField2)
{
// some stuff
}