HOW TO CREATE SENCHA EXTJS LOGIN PAGE.

Ankit Singh

Total Post:341

Points:2389
Posted by  Ankit Singh
JQuery 
 624  View(s)
Ratings:
Rate this:
we want to Create Sencha  Extjs Login page how to do this please help me.
  1. aditya kumar Patel

    Post:254

    Points:1810
    Re: How to Create Sencha Extjs Login page.

    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

     

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!