extjs+rails做一个登录界面

最新推荐文章于 2021-02-15 20:18:39 发布

iteye_3062

最新推荐文章于 2021-02-15 20:18:39 发布

阅读量103

点赞数

分类专栏： ruby 文章标签： Rails EXT Ruby Netbeans prototype

ruby 专栏收录该内容

140 篇文章 0 订阅

订阅专栏

我选来选去，挑花了眼，结果还是用netbeans做IDE，而且js编辑器也还可以用用，也省得去D版了。

一个登录界面，非常简单，首先是创建一个controller，只要一个index就够了。


script/generate controller manage index

这个ManageController将拿来单独响应extjs的访问。

修改index.rhtml


<html>
<head>
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="0">
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="/extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/extjs/ext-all.js"></script>
<script type="text/javascript" src="/javascripts/manage.js"></script>
</head>
<body>
</body>
</html>

extjs里的相关文件都放在public/extjs，实际上这个是标准的html，因为各种重要的内容都放在manage.js里。

初始化也在manage.js里


Ext.onReady(function()
{
  Ext.QuickTips.init();
  Ext.form.Field.prototype.msgTarget = 'side';
  createLogin();
  loginWin.show();
});

这个很简单，初始化quick tips,缺省把一些信息放在边上，创建登录窗口，显示登录。

createLogin是个自定义函数, loginWin是个全局变量。


function createLogin(){
  login = new Ext.FormPanel({
    labelWidth: 75, // label settings here cascade unless overridden
    url:'/manage/login',
    frame:true,
    bodyStyle:'padding:5px 5px 0',
    defaultType: 'textfield',

    items: [{
            fieldLabel: lang_trans.loginDialog.username,
            name: 'username',
            blankText:lang_trans.info.inputUsername,
            allowBlank:false
        },{
            inputType: 'password',
            fieldLabel: lang_trans.loginDialog.password,
            name: 'password',
            blankText:lang_trans.info.inputPass,
            allowBlank:false
        }
    ],

    buttons: [{
        text: lang_trans.loginDialog.login,
        tooltip: lang_trans.loginDialog.loginTip,
        handler: loginExec
    },{
        text: lang_trans.common.cancel
    }],
    keys:[{  
         key:Ext.EventObject.ENTER,   
         fn:loginExec,   
         scope:this  
    }]

  });
  loginWin=new Ext.Window(
  {
    title: lang_trans.loginDialog.title,
    closable:true,
    width: 300,
    border:false,
    plain:true,
    items: [login]
  });
}

创建了一个窗口和一个panel，panel嵌在窗口里，lang_trans是一个自定义的本地化字符串对象。loginExec是个自定义的函数，用于提交登录。

每个字段只需要一点点配置就可以生成比较好的校验。


allowBlank: 是否允许为空
blankText: 如果为空则显示的错误信息
inputType: 字段类型
fieldLabel: 字段左边显示的标签文字
name: 字段本身的名称，也就是提交的参数名

buttons是定义按钮，按钮通常被放在最下面，keys是定义快捷键，比如回车之类的。

loginExec就是检查数据，然后提交。


function loginExec(){
  if(login.getForm().isValid()){
    login.getForm().submit({waitMsg:lang_trans.loginDialog.logining,success:showMain,failure:commonFailed});
  }
}

在ManageController里加一个login方法:


  def login
    debug_log("u:#{params[:username]},p:#{params[:password]}")
    render :text=>""
  end

具体如何校验就不细说了，现在仅返回空。

回调函数，关掉登录窗口，显示主窗口。


function showMain(form,action){
//    Ext.MessageBox.alert("ok", "ko")
  loginWin.close();
  if(!mainWin){
    createMain();
  }
  mainWin.show();
}

createMain就是创建一个主窗口，基本上左右两栏，内容都是空的。


function createMain(){
  var nav = new Ext.Panel({
      title: lang_trans.mainWin.nav,
      region: 'west',
      split: true,
      width: 200,
      collapsible: true,
      margins:'3 0 3 3',
      cmargins:'3 3 3 3'
  });  
  var tabs = new Ext.TabPanel({
      region: 'center',
      margins:'3 3 3 0', 
      activeTab: 0,
      defaults:{autoScroll:true},

      items:[{
          title: lang_trans.mainWin.welcome,
          html: lang_trans.mainWin.welcome,
          closable:true
      }]
  });
  mainWin = new Ext.Window({
    title: lang_trans.mainWin.title,
    closable:true,
    width:700,
    height:500,
    //border:false,
    plain:true,
    layout: 'border',
    items: [nav,tabs]
  });
}

iteye_3062

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
extjs+rails做一个登录界面

我选来选去，挑花了眼，结果还是用netbeans做IDE，而且js编辑器也还可以用用，也省得去D版了。一个登录界面，非常简单，首先是创建一个controller，只要一个index就够了。[code="ruby"]script/generate controller manage index[/code]这个ManageController将拿来单独响应extjs的...
复制链接

扫一扫