extjs4.0 第二课

      今天是学习EXTJS4.0的第二课,主要学习了6点知识,内容有点多,但是非常简单。在这里,简单的梳理一下今天的学习的6个知识点:

      1、 JS类的声明和对象的创建

      2、用EXTJS new 创建一个window

      3、用create创建一个window,并用一个按钮进行触发显示

      4、用queries异步加载JS,提高运行速度

      5、用Ext.class中的config来为属性自动设置set()和get()方法

      6、用Ext.class中的mixins来混合类,实现多继承

      以上6点是我今天的学习内容,不多说,实践一下就知道有多简单!!!。。。。。。。。。。。

      在昨天的项目中做如下添加:

       添加完了 不要忘记在index.jsp中添加 lesson2.html的<a>标签哦! 

      在lesson2.html网页中添加如下代码。(今天调整了一下css的路径,路径按照你需要的设置即可),如下图:

       这里主要是添加了一个button标签,用于触发的作用。

       在createClass.js中添加如下JS代码:



     在index界面中,点击 第二课 超链接 ,运行结果是:会弹出3个对话框,内容分别是:“caixen”,“[email protected]”,“caixen---23”

     好了,第一个成功!  下面进入第二个知识点。注释掉以上的代码,在下面键入以下代码:



   运行一下,是不是点击 按钮 就会弹出对话框呢?  O(∩_∩)O~

   成功后,我们进入第三个知识点。用craete创建window窗体,不用new关键字了。。。。。

   注释掉上面的代码,在下面键入:



     这里运行一下,就会看到一个对话框弹出。

    好了,我们进入4的一个知识点:用requires异步加载JS(要使用的时候才加载相应的JS,提高运行速度)

 在这里,当我们点击按钮时,它才加载我们的 mywin.js这个js文件,没有点击时是没有加载的哦~~~ 

    注释掉上面的代码,在下面键入如下代码:

       这时,我们切换到mywin.js文件下,键入如下code:

     运行一下,用浏览器跟踪一下,看是不是在点击 按钮之后,才加载的mywin.js ~~~

  

     好了,我们终于到了5的一个知识点了:运用Ext.class中的config来为属性自动设置get()与set()方法

 这个很简单,其实就是在mywin.js中加入一个config的属性,就直接可以调用了。非常方便,不用自己写方法调用。如下:



    蓝色标出的就是添加的!!!!

    这时我们在createClass.js下,注释掉刚刚的代码,在下面键入code如下:


 


        是不是能弹出price啊~~~  很简单吧。

       哎。。终于到了最后一点了,使用Ext.class中的mixins来多继承。直接上图就OK!

       注释掉mywin.js下载代码,重新键入code如下:


       运行一下,OK 。同时弹出了混合的方法,  吼吼吼~~~~大功告成,今天内容有点多,多多复习啊。 


 

    

 

     

猜你喜欢

转载自myokm123.iteye.com/blog/1878882