zoukankan      html  css  js  c++  java
  • Extjs4.2.1学习笔记[更新]

     心血来潮准备学习一下Extjs,就从官方网站http://extjs.org.cn/下载了最新版本4.2.1,开始从头学习,记一下笔记,让自己能够持之以恒。

    先说一下基本文件类库引用吧, 每个项目一开始都需要进行一下操作,根据自己的需要进行调整。

    把下载好的压缩包解压到本地,里面就包括了所有源码和图片等资源,我用的编程工具是VS2010,在新建了一个web项目后,将完整的包文件加入项目,目录中有一个完整的EXTJS的文件夹。

    这样在具体用到的时候我们就可以对需要的文件进行引用。下面就是实际行动了。

    1.Hello World

    从最简单的HelloWorld开始,由于是脚本语言,所以只用到前台咯,代码君:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="ExtJSTestOne.WebForm2" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <!-- 这里是extjs的文件引用 -->
        <script type="text/javascript" src="/EXTJS/resource/default/js/ext-all-debug.js"></script>
        <script type="text/javascript" src="EXTJS/resource/ext-theme-neptune/js/ext-theme-neptune.js"></script>
        <link rel="stylesheet" type="text/css" href="EXTJS/resource/ext-theme-neptune/css/ext-theme-neptune-all-debug.css" />
        <!-- extjs文件引用结束咯 -->
    
        <!-- 下面是功能代码 -->
        <script type="text/javascript">
            Ext.onReady(function () {
                Ext.MessageBox.alert('标题', 'hello world !');
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        
        </div>
        </form>
    </body>
    </html>

    Tips:

    1.extjs当中,Ext.onReady()这个函数是应用程序入口,类似于main()函数。

    2.弹出对话框:Ext.MessageBox.alert('标题', 'hello world !');

    效果:

    值得注意的一点是,这个对话框始终弹出在页面的正中央,比如把页面缩小,弹出也在正中央,不会有滚动条。最大化的情况下弹出消息框后,拖拽浏览器,对话框的位置不会随着改变哟。

    这里应该是有解决方法的,等我学到了再来讲。

  • 相关阅读:
    ExtJs 第二章,Ext.form.Basic表单操作
    linux centos 下php的mcrypt扩展
    curl_errno错误码说明
    centos 安装composer
    虚拟机centOs Linux与Windows之间的文件传输
    CentOS 6.4 linux下编译安装 LNMP环境
    CentOS 6.4 php-fpm 添加service 添加平滑启动/重启
    CentOS 6.4 linux下编译安装MySQL5.6.14
    centOS linux 下PHP编译安装详解
    centOS linux 下nginx编译安装详解
  • 原文地址:https://www.cnblogs.com/theblueberry/p/3387536.html
Copyright © 2011-2022 走看看