ExtJS初学第一天

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ExtJSAll._Default" %>

<!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>ExtJSDemo</title>
    <link rel="Stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />

    <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>

    <script type="text/javascript" src="ext/ext-all.js"></script>

    <script type="text/javascript">
//       Ext.onReady(function()
//       {
//        Ext.MessageBox.alert("Hello","opensuore");    
//       }); 
//       
       Ext.namespace("com.aptech");
       com.aptech.First =function(){
        var kiss ="China";
        return{
            init:function(){
                alert("init");
                alert(kiss);
            },
            method:function(){
                alert("method");
            }
        };
       };
       
       com.aptech.Second=function(){
        com.aptech.Second.superclass.constructor.apply(this);
       }
       Ext.extend(com.aptech.Second,com.aptech.First,
       {
            fun:function(i){
                return i*i*i;
            },
            method:function(){
                alert("Second::method")
            }
       }
       );
       
       var second = new com.aptech.Second();
       alert(second.fun(5));
       second.method();
       
       //定义一个学生类(student)
       Student = function(name,sex){
        this.name=name;
        this.sex =sex;
       }
       
       //测试
       var student = new Student("张三","男");
       alert("姓名:"+student.name+"\r\n性别:"+student.sex);
       
       
       Students =function(config){
        this.name="张海军";
        this.sex="男";
        Ext.apply(this,config);
       }
       //测试
       var students = new Students({name:"李四",sex:"男",birthday:new Date()});
       alert("姓名:"+students.name+"\r\n性别:"+students.sex+"\r\n生日:"+students.birthday);
       
       Student1=function(config){
        this.name="张海军";
        this.sex="男";
        Ext.applyIf(this,config);
       }
       //测试
       var student1 = new Student1({name:"李四",sex:"男",birthday:new Date()});
       alert("姓名:"+student1.name+"\r\n性别:"+student1.sex+"\r\n生日:"+student1.birthday);
       
       
       extjsAlert=function(){
         Ext.MessageBox.alert("提示框","这是一个提示框",function(){alert("提示框关闭了");});
       }
       
       //输入框
       extjsPrompt = function(){
        Ext.MessageBox.prompt("输入框","请输入您的姓名:",function(btn,txt){
            Ext.MessageBox.alert("结果","您点击了"+btn+"按钮,<br>输入的内容为"+txt);
        });
       }
        
        extjsPromptmore = function(){
        Ext.MessageBox.prompt("输入框","请输入您的姓名:",function(btn,txt){
            Ext.MessageBox.alert("结果","您点击了"+btn+"按钮,<br>输入的内容为"+txt);
        },this,300);
       }
       
       //确认框
       extjsComfirm = function(){
        Ext.MessageBox.confirm("确认","请点击下面的按钮做出选择",function(btn){
            Ext.MessageBox.alert("您单击的按钮是:"+btn); 
        });
       }
       
       //自定义消息框
       extjsCustom = function(){
        var config={
            title:"自定义对话框",
            msg:"这是一个自定义对话框",
            400,
            multiline:true,
            closable:false,
            buttons:Ext.MessageBox.YESNOCANCEL,
            icon:Ext.MessageBox.QUESTION,
            fn:function(btn,txt){
                Ext.MessageBox.alert("结果","您点击了"+btn+"按钮是<br>,输入值是:"+txt);
            }
        };
        Ext.MessageBox.show(config);
       }
       
       //进度条
       extjsProgress = function(){
         Ext.MessageBox.show({
            title:'请等待',
            msg:'正在加载项目...',
            progressText:'正在初始化...',
            300,
            progress:true,//进度条标识
            closable:false
         });       
         
         var f = function(v){
            return function(){
                if(v==12){
                    Ext.MessageBox.hide();
                    Ext.MessageBox.alert('OK','所有项目加载完成');
                }
                else{
                    var i = v/11;
                    Ext.MessageBox.updateProgress(i,Math.round(100*i)+'% 已完成');
                }
            };
         };
         
         for(var i=0;i<13;i++){
            setTimeout(f(i),i*500);
         }
         
       }
       
       
       //HTML脚本和代码的分离
       Ext.onReady(function(){
        Ext.get("btn").on("click",function(){
            Ext.MessageBox.alert("点击","我被点击了,非常高兴");
        });
       });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="button" value="alert" onclick="extjsAlert();" />
        <input type="button" value="Input" onclick="extjsPrompt()" />
        <input type="button" value="InputMore" onclick="extjsPromptmore()" />
        <input type="button" value="Comfirm" onclick="extjsComfirm()" />
        <input type="button" value="CustomMessage" onclick="extjsCustom();" />
        <input type="button" value="Progress" onclick="extjsProgress();" />
        <input type="button" value="点击我" id="btn" />
    </div>
    </form>
</body>
</html>
原文地址:https://www.cnblogs.com/lhws/p/1958584.html