• 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>
    
  • 相关阅读:
    ExtJS 开发总结 子曰
    解决讨厌的VS2008不能打开vs2010所创建的项目问题 子曰
    提高网站页面加载速度的黄金守则 子曰
    更新网站注意事项 子曰
    dhl:SQL_游标.sql
    jQuery 中插件的使用与开发启用Visual Studio 对jQuery的智能感知(含 jQuery1.3.2 for VS 的智能提示js文件)
    用jQuery在IFRAME里取得父窗口的某个元素的值
    图片上传预览是一种在图片上传之前对图片进行本地预览的技术。
    dhl:ajax无法跨域改用getJSON(解决服务器返回json数据中文为乱码的问题$.ajaxSetup({ scriptCharset: "utf8" , contentType: "application/json; chars)
    dhl: URL的编码问题。
  • 原文地址:https://www.cnblogs.com/lhws/p/1958584.html
Copyright © 2020-2023  润新知