ExtJS4.2学习(一)Ext自定义类



QQ截图20131105232223.jpgbHw思考者日记网-束洋洋个人博客

晚上看书的感悟:学习转化为能力的过程:学习-复习-体会-实践-理解-能力。不要以为自己够聪明,其实学习只能记住20%,复习记住30%,体会得到40%,实践得出50%,理解得到60%,理解了70%后转换为能力的才有80%。智慧才是力量,因为智慧对行动的影响更大。将知识变成智慧地过程常常是一个痛苦的过程。bHw思考者日记网-束洋洋个人博客

好了,言归正传,我们开始学习ExtJS4.2需要的JS包可以从官网下载,这里不多说。这里为什么先说数据基本方式,不要觉得无聊,因为只有这些最重点弄懂了,其他的一些属性用到的时候查下就好了。bHw思考者日记网-束洋洋个人博客

1、创建一个新类bHw思考者日记网-束洋洋个人博客

//demo 01  
Ext.define('demo.Demo',{  
    name:'ThinkDiary',  
    hello:function(){  
        return 'Hello'+this.name;  
    }  
});  
//demo 02  
Ext.define('demo.DemoWindow',{  
    extends:'Ext.Window',  
    title:'demo hello',  
    initComponent:function(){ //初始化  
        Ext.apply(this,{//将一批属性复制给当前对象  
            items:[{  
                html:'panel1'  
            },{  
                html:'panel2'  
            }]  
        });  
        this.callParent();//快捷调用父类函数  
    },  
    mixins:['demo.Demo'], //多重继承  
    config:{ //辅助功能属性  
        title:'demo'  
    },  
    statics:{ //定义静态成员  
        TYPE_DEFAULT:0  
    },  
    constructor:function(){ //自定义初始化构造函数,先执行此再执行initComponet  
        //do something init  
    }  
});

 bHw思考者日记网-束洋洋个人博客

我们在外部可以这样调用new demo.DemoWindow();bHw思考者日记网-束洋洋个人博客

这样更倾向于面向对面的思想了,这正是4.2的新特性之一,下面来个例子:bHw思考者日记网-束洋洋个人博客

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Hello Extjs4.2</title>  
<link href="../ExtJS4.2/resources/css/ext-all.css" rel="stylesheet">  
<!-- <script src="../ExtJS4.2/locale/ext-lang-zh_CN.js"></script> -->  
<script src="../ExtJS4.2/ext-all.js"></script>  
<script type="text/javascript">  
/* Start ExtJS 中自定义类 **/  
Ext.define("Person", {  
    Name: '',  
    Age: 0,  
    Say: function (msg) {  
        Ext.Msg.alert(this.Name + " Says:", msg);  
    },  
    constructor: function (name, age) {  
        this.Name = name;  
        this.Age = age;  
    }  
});  
Ext.onReady(function(){  
    var Tom = new Person("束洋洋", 22);  
    Tom.Say("你好,ExtJs4.2");  
});  
/* END ExtJS 中自定义类 **/  
  
</script>  
</head>  
<body>  
<h1>我的ExtJS4.2学习之路</h1>  
<hr />  
作者:束洋洋  
开始日期:2013年10月29日 00:51:00  
<h2>第二个例子:ExtJS 中自定义类</h2>  
</body>  
</html>

 bHw思考者日记网-束洋洋个人博客

弹出效果:bHw思考者日记网-束洋洋个人博客

extjs4.2.jpgbHw思考者日记网-束洋洋个人博客

 bHw思考者日记网-束洋洋个人博客

ExtJS4.2全部章节汇总目录


 bHw思考者日记网-束洋洋个人博客

ExtJS4.2学习(一)Ext自定义类bHw思考者日记网-束洋洋个人博客

ExtJS4.2学习(二)Ext统一组件模型bHw思考者日记网-束洋洋个人博客

ExtJS4.2学习(三)Grid表格bHw思考者日记网-束洋洋个人博客

ExtJS4.2学习(四)Grid表格中文排序问题bHw思考者日记网-束洋洋个人博客

ExtJS4.2学习(五)表格渲染与复选框bHw思考者日记网-束洋洋个人博客

ExtJS4.2学习(六)表格分页与通过后台脚本获得分页数据bHw思考者日记网-束洋洋个人博客

ExtJS4.2学习(七)EditorGrid可编辑表格bHw思考者日记网-束洋洋个人博客

ExtJS4.2学习(八)表格限制输入数据的类型bHw思考者日记网-束洋洋个人博客

ExtJS4.2学习(九)属性表格控件PropertyGridbHw思考者日记网-束洋洋个人博客

ExtJS4.2学习(10)分组表格控件--GroupingGridbHw思考者日记网-束洋洋个人博客

ExtJS4.2学习(11)可拖放的表格bHw思考者日记网-束洋洋个人博客

ExtJS4.2学习(12)基于表格的右键菜单bHw思考者日记网-束洋洋个人博客

ExtJS4.2学习(13)基于表格的扩展插件---rowEditingbHw思考者日记网-束洋洋个人博客

ExtJS4.2学习(14)基于表格的扩展插件(2)bHw思考者日记网-束洋洋个人博客

ExtJS4.2学习(15)树形表格bHw思考者日记网-束洋洋个人博客

 ExtJS4.2学习(16)制作表单bHw思考者日记网-束洋洋个人博客

ExtJS4.2学习(17)表单基本输入控件Ext.form.FieldbHw思考者日记网-束洋洋个人博客

 ExtJS4.2学习(18)时间控件bHw思考者日记网-束洋洋个人博客

 ExtJS4.2学习(19)在线编辑器Ext.form.HtmlEditorbHw思考者日记网-束洋洋个人博客

ExtJS4.2学习(20)动态数据表格之前几章总结篇1 bHw思考者日记网-束洋洋个人博客

 ExtJS4.2学习(21)动态菜单与表格数据展示操作总结篇2bHw思考者日记网-束洋洋个人博客

ExtJS4.2学习(22)登录界面bHw思考者日记网-束洋洋个人博客

ExtJS4.2学习(23)textFiled后追加按钮bHw思考者日记网-束洋洋个人博客

ExtJS4.2学习(24)TreeStore使用详解bHw思考者日记网-束洋洋个人博客

ExtJS4.2学习(25)终结篇,实战项目bHw思考者日记网-束洋洋个人博客

 

(转载本站文章请注明作者和出处 思考者日记网|束洋洋个人博客 ,请勿用于任何商业用途)

『访问 思考者日记网404页面 寻找遗失儿童』

告知
  •     本站90%以上文章均属原创,部分转载已加上原作者出处。 如需转载本站文章请您务必保留本站出处!
  •     打广告评论者请自重,请为广大网友提供一个健康干净的网络空间。
  • 感谢主机屋提供网站空间;
  • 感谢万网阿里云提供域名解析;
  • 感谢EmpireCMS提供CMS系统;
  • 感谢bootstrap展示本站前端页面;
  • 感谢Glyphicons Halflings提供字体;
  • 感谢大家一直以来对本站的喜爱,感谢大家!
近期文章 建议与反馈