`

extjs4.2 login,window

 
阅读更多
Login:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Advanced Ext.ux.StatusBar Example</title>
    <!-- Ext -->
    <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
    <script type="text/javascript" src="extjs/ext-all.js"></script>
    <script type="text/javascript" src="extjs/login.js"> </script>
</head>
<body>

</body>
</html>

login.js

Ext.onReady(function(){
var fp = Ext.create('Ext.FormPanel', {
title: 'Login Validation',
        renderTo: Ext.getBody(),
        width: 500,
        autoHeight: true,
        id: 'status-form',
        labelWidth: 75,
        bodyPadding: 10,
        defaults: {
            anchor: '95%',
            allowBlank: false,
            selectOnFocus: true,
            msgTarget: 'side'
        },
        items:[{
            xtype: 'textfield',
            fieldLabel: 'Name',
            blankText: 'Name is required'
        },{
        xtype: 'textfield',
        fieldLabel: 'Password',
        blankText: 'Password is required'
        },{
        xtype: 'textfield',
        fieldLabel: 'repassword',
        blankText: 'repassword is required'
        },{
            xtype: 'datefield',
            fieldLabel: 'Birthdate',
            blankText: 'Birthdate is required'
        },{
        xtype: 'datefield',
             anchor: '100%',
             fieldLabel: 'From',
             name: 'from_date',
             maxValue: new Date()  // limited to the current date or prior
        },{
        xtype: 'datefield',
             anchor: '100%',
             fieldLabel: 'To',
             name: 'to_date',
             value: new Date()  // defaults to today
        }],
        // Reset and Submit buttons
        buttons: [{
            text: 'Reset',
            handler: function() {
                this.up('form').getForm().reset();
            }
        }, {
            text: 'Submit',
            formBind: true, //only enabled once the form is valid
            disabled: true,
            handler: function() {
                var form = this.up('form').getForm();
                if (form.isValid()) {
                    form.submit({
                        success: function(form, action) {
                           Ext.Msg.alert('Success', action.result.msg);
                        },
                        failure: function(form, action) {
                            Ext.Msg.alert('Failed', action.result.msg);
                        }
                    });
                }
            }
        }]
});

fp.center();
        
});

login1.js
Ext.onReady(function(){
Ext.create('Ext.form.Panel', {
    title: 'Simple Form',
    bodyPadding: 5,
    width: 350,

    // The form will submit an AJAX request to this URL when submitted
    url: 'save-form.php',

    // Fields will be arranged vertically, stretched to full width
    layout: 'anchor',
    defaults: {
        anchor: '100%'
    },

    // The fields
    defaultType: 'textfield',
    items: [{
        fieldLabel: 'First Name',
        name: 'first',
        allowBlank: false
    },{
        fieldLabel: 'Last Name',
        name: 'last',
        allowBlank: false
    }],

    // Reset and Submit buttons
    buttons: [{
        text: 'Reset',
        handler: function() {
            this.up('form').getForm().reset();
        }
    }, {
        text: 'Submit',
        formBind: true, //only enabled once the form is valid
        disabled: true,
        handler: function() {
            var form = this.up('form').getForm();
            if (form.isValid()) {
                form.submit({
                    success: function(form, action) {
                       Ext.Msg.alert('Success', action.result.msg);
                    },
                    failure: function(form, action) {
                        Ext.Msg.alert('Failed', action.result.msg);
                    }
                });
            }
        }
    }],
    renderTo: Ext.getBody()
});
});



window

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Advanced Ext.ux.StatusBar Example</title>
    <!-- Ext -->
    <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
    <script type="text/javascript" src="extjs/ext-all.js"></script>
    <script type="text/javascript" src="extjs/layoutWindow.js"> </script>
</head>
<body>
<input type="button" id="show-btn" value="add Window"/><br/><br/>

layoutWindow.js

Ext.require([
    'Ext.tab.*',
    'Ext.window.*',
    'Ext.tip.*',
    'Ext.layout.container.Border'
]);
Ext.onReady(function(){
    var win,
        button = Ext.get('show-btn');

    button.on('click', function(){

        if (!win) {
            win = Ext.create('widget.window', {
                title: 'Layout Window',
                closable: true,
                closeAction: 'hide',
                width: 600,
                minWidth: 350,
                height: 350,
                layout: {
                    type: 'border',
                    padding: 5
                },
                items: [{
                    region: 'west',
                    title: 'Navigation',
                    width: 200,
                    split: true,
                    collapsible: true,
                    floatable: false
                }, {
                    region: 'center',
                    xtype: 'tabpanel',
                    items: [{
                        title: 'Tab1',
                        html: 'hello world 1',
                    }, {
                        title: 'Another Tab',
                        html: 'Hello world 2'
                    }, {
                        title: 'Closable Tab',
                        html: 'Hello world 3',
                        closable: true
                    }]
                }]
            });
        }
        button.dom.disabled = true;
        if (win.isVisible()) {
            win.hide(this, function() {
                button.dom.disabled = false;
            });
        } else {
            win.show(this, function() {
                button.dom.disabled = false;
            });
        }
    });
});


window.js

Ext.onReady(function(){
Ext.create('Ext.window.Window', {
    title: 'Hello',
    height: 200,
    width: 400,
    layout: 'fit',
    items: {  // Let's put an empty grid in just to illustrate fit layout
        xtype: 'grid',
        border: false,
        columns: [{header: 'World1'},{header: 'World2'},{header: 'World3'}],                 // One header just for show. There's no data,
        store: Ext.create('Ext.data.ArrayStore', {}) // A dummy empty data store
    }
}).show();
});

分享到：
| Log4j
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ExtJs4.2 Window常用方法

    根据提供的文件信息，本文将详细解释ExtJs 4.2中Window组件的一些常用配置属性以及方法，帮助读者更好地理解和使用这些功能。 ### ExtJs 4.2 Window 组件概述 ExtJs 是一个基于 JavaScript 的开源框架，用于创建...

    EXTjs4.2中文版

    EXTjs4.2中文版是EXTjs框架的一个重要版本，EXTjs是一个强大的JavaScript库，专门用于构建用户界面，尤其适用于创建富互联网应用程序（Rich Internet Applications，简称RIA）。它以其组件化的设计理念，丰富的UI...

    MVC设计模式实战ExtJS4.2高级组件+SSH2在线投稿系统

    01.教程简介_ExtJS4.2简介_SSH2基本框架搭建 02.编写几个通用的service方法、设计数据库 03.搭建ExtJS的MVC框架 04.主界面的搭建、登录功能和菜单树的生成 05.创建菜单树、前台保存用户信息 06.菜单树响应事件、我的...

    SpringMVC+ExtJs4.2实例

    在本实践项目“SpringMVC+ExtJs4.2实例”中，我们将深入探讨如何将SpringMVC框架与ExtJs4.2前端框架相结合，构建一个功能完善的Web应用程序。这个项目旨在展示如何利用这两个强大的技术栈来实现数据的动态交互和用户...

    Extjs4.2 Grid filter Demo 表格过滤实验

    这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹，其余文件过大并且与主题无关,因此未包含。具体方法，请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》

    ExtJs4.2下拉树（修改版）

    ExtJs4.2没有直接提供下拉树这个组件，但是有例子可以用，文件位置：ext-4.2.1.883\examples\ux\TreePicker.js 但是它有点小毛病吧：默认显示了根节点；达到最小高度时再展开节点，高度不能自动调整。 所以我做了一...

    extjs 4.2 开发 参考书

    ExtJS 4.2 是一个流行的JavaScript框架，用于构建富客户端Web应用程序。它提供了一套完整的组件库，包括数据管理、图表、表格、菜单、工具栏等，使得开发者能够创建功能丰富的、交互式的用户界面。这本书籍《ExtJS ...

    EXTJS4.2学习入门教程

    EXTJS4.2学习入门教程 EXTJS4.2学习入门教程 EXTJS4.2学习入门教程

    extjs4.2官方文档

    Extjs官方文档 帮助你更好的学习Extjs,同事这里面的代码是最完整，最规范的。

    Extjs4.2中文教程

    Extjs4.2入门教程详解，及API文档。

    下拉(条件)搜索实例extjs4.2(亲测可用).zip

    在这个“下拉(条件)搜索实例”中，我们看到开发者利用ExtJS 4.2实现了一个交互式的用户界面，其中包含了下拉菜单和条件搜索功能。 下拉搜索通常指的是在输入框中使用下拉列表作为候选选项的搜索方式，用户可以快速...

    extjs 4.2 多文件上传

    用Ext编写的多文件上传组件，已封装。 支持多文件上传，文件下载，文件删除，

    基于Extjs 4.2的通用权限管理系统,通用后台模板,EF+MVC+Extjs 4.2

    WMC2.0-Client.zip是一个基于Extjs4.2的开发框架，其实是个只有大框架的，并没有其他功能，您可能会骂我标题党“通用权限管理系统,通用后台模板”，呵呵，其实不是这样的。 整个WMC系统分为WMC2.0-Server服务端...

    extjs4.2 desktop mvc

    EXTJS 4.2 Desktop MVC 是一个基于EXTJS 4.2版本的桌面应用程序框架，它结合了MVC（Model-View-Controller）设计模式，为开发者提供了构建富客户端桌面应用的强大工具。EXTJS是一个流行的JavaScript库，专门用于创建...

    extjs 4.2 jsb2

    extjs 4.2 jsb2 4.2没有自带jsb2文件

    ExtJs4.2正式版

    ExtJs4.2正式版

    nodejs+extjs4.2+mysql

    标题 "nodejs+extjs4.2+mysql" 暗示了这是一个使用 Node.js、ExtJS 4.2 和 MySQL 数据库构建的项目。这个项目的核心是利用这些技术搭建了一个基本的框架，使得开发者可以方便地在此基础上添加自己的业务逻辑和功能。...

    php+extjs4.2翻页搜索实例

    php+extjs4.2翻页搜索实例.php

    ExtJS4.2入门案例

    ExtJS4.2入门案例 博客：http://blog.csdn.net/coco2d_x2014/article/details/52986835

Magicbox
Global site tag (gtag.js) - Google Analytics