Home > DeveloperSection > Forums > How to Create Sencha Extjs Login page.
Ankit Singh

Total Post:341

Points:2389
Posted on    April-25-2016 11:44 PM

 JQuery JQuery 
Ratings:


 0 Reply(s)
 244  View(s)
Rate this:
we want to Create Sencha  Extjs Login page how to do this please help me.


aditya kumar Patel

Total Post:250

Points:1782
Posted on    April-26-2016 12:13 AM

Layout.cshtml

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width" />

<title>@ViewBag.Title</title>

<script src="~/ext-6.0.2/build/ext-all.js"></script> <link href="~/ext-6.0.2/build/classic/theme-neptune/resources/theme-neptune-all.css" rel="stylesheet" />

</head>

<body>

@RenderBody()

</body>

</html>

Index.cshtml

<script src="~/App/Login.js"></script>

<div id="body"></div>

Login.js


Ext.onReady(function(){

var login = new Ext.FormPanel({

labelWidth:100,

url: 'api/values',

header : false,

frame:false,

title:'Login',

defaultType: 'textfield',

bodyStyle: 'background:url(images/login.png) no-repeat; padding:20px;',

monitorValid:true,

items:[{

fieldLabel:'UserID',

name: 'UserName',

width: 400,

fieldStyle: 'background-color: #ddd; background-image: none;',

allowBlank:false

},{

fieldLabel:'Password',

name: 'Password',

inputType: 'password',

width:400,

allowBlank:false

}],

// All the magic happens after the user clicks the button

buttons:[{

text:'Login',

formBind: true,

// Function that fires when user clicks the button

handler:function(){

login.getForm().submit({

method:'POST',

waitTitle:'Connecting',

waitMsg:'Sending data...',

success: function () {

Ext.Msg.alert('Status', 'Login Successful!', function(btn, text){

if (btn == 'ok'){

var redirect = 'Home/dashboard';

window.location = redirect;

}

});

},

failure:function(form, action){

Ext.Msg.alert('Status', 'Login failed!');

}

});

}

}]

});

var win = new Ext.Window({

title: 'Welcome to Mindstick',

header: {

titlePosition: 2,

titleAlign: 'center'

},

layout:'fit',

width:450,

height:180,

closable: false,

resizable: false,

plain: true,

border: false,

items: [login]

});

win.show();

});

ApiController

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using SenchaApi.Models;
using System.Web;
using System.Web.Mvc;
namespace SenchaApi.Controllers
{
    public class ValuesController : ApiController
    {
        forumEntities db = new forumEntities();
        // GET api/values
        public IEnumerable<string> Get()
        {
            return new string[] { "value1", "value2" };
        }

        // GET api/values/5
        public string Get(int id)
        {
            return "value";
        }

        // POST api/values
        public bool Post(UserLogin obj)
        {
            bool success;
          
            var result=db.UserLogin.FirstOrDefault(x=>x.UserName==obj.UserName && x.Password==obj.Password);
            if (result != null)
            {
                success = true;
             
            }
            else
            {
                 success =false;
            
            }
            return success;
        }

        // PUT api/values/5
        public void Put(int id, [FromBody]string value)
        {
        }

        // DELETE api/values/5
        public void Delete(int id)
        {
        }
    }
}

Login Page Layout

success Layout

dashboard.cshtml

@{

ViewBag.Title = "dashboard";

}

<script src="~/App/dashboard.js"></script>

home controller

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace SenchaApi.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
      
        }

        public ActionResult dashboard()
        {
            return View();
        }
    }
}

dashboard.js

Ext.onReady(function () {

var win = new Ext.Window({

title: 'Welcome to Mindstick dashbord',

header: {

titlePosition: 2,

titleAlign: 'center'

},

layout: 'fit',

closable: false,

resizable: false,

plain: true,

border: false,

frame: false,

height: Ext.getBody().getViewSize().height,

width: Ext.getBody().getViewSize().width

});

win.show();

});

dashboard layout

 


Don't want to miss updates? Please click the below button!

Follow MindStick