`
禹爸爸
  • 浏览: 88778 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

Ext学习笔记一（使用Ext.Panel创建一个登录面板）

ext 
阅读更多

Ext1.0的写法

 

  1. <html>
  2. <head>
  3. <title>登录面板程序</title>
  4. <linkrel="stylesheet"type="text/css"href="http://plt385130:8080/ext-2.2/resources/css/ext-all.css"/>
  5. <scripttype="text/javascript"src="http://plt385130:8080/ext-2.2/adapter/ext/ext-base.js"></script>
  6. <scripttype="text/javascript"src="http://plt385130:8080/ext-2.2/ext-all.js"></script>
  7. <scripttype="text/javascript">
  8. Ext.onReady(function(){
  9. var_panel=newExt.Panel({
  10. frame:true,
  11. layout:"form",
  12. width:260,
  13. height:130,
  14. labelWidth:70,
  15. title:"登录",
  16. listeners:{
  17. "render":function(p){
  18. p.add(newExt.form.TextField({
  19. id:"txt_name",
  20. fieldLabel:"登录账号",
  21. width:160
  22. })
  23. );
  24. p.add(newExt.form.TextField({
  25. id:"txt_psd",
  26. fieldLabel:"登录密码",
  27. width:160
  28. })
  29. );
  30. }
  31. }
  32. });
  34. _panel.addButton({text:"确定",handler:function(){alert("你输入了："+Ext.getCmp("txt_name").getValue());}});
  35. _panel.addButton({text:"取消",handler:function(){alert("你输入了："+Ext.getCmp("txt_name").getValue());}});
  36. _panel.render(Ext.getBody());
  38. });
  39. </script>
  40. </head>
  41. <body>
  42. </body>
  43. </html>

Ext2.0的写法

  1. <html>
  2. <head>
  3. <title>登录面板程序</title>
  4. <linkrel="stylesheet"type="text/css"href="http://plt385130:8080/ext-2.2/resources/css/ext-all.css"/>
  5. <scripttype="text/javascript"src="http://plt385130:8080/ext-2.2/adapter/ext/ext-base.js"></script>
  6. <scripttype="text/javascript"src="http://plt385130:8080/ext-2.2/ext-all.js"></script>
  7. <scripttype="text/javascript">
  8. Ext.onReady(function(){
  9. var_panel=newExt.Panel({
  10. frame:true,
  11. layout:"form",
  12. width:260,
  13. height:130,
  14. labelWidth:70,
  15. title:"登录",
  16. defaults:{xtype:"textfield",width:160},
  17. items:[{
  18. fieldLabel:"登录账号"
  19. },{
  20. fieldLabel:"登录密码"
  21. }
  22. ],
  23. buttons:[{
  24. text:"确定"
  25. },{
  26. text:"取消"
  27. }
  28. ]
  29. });
  31. _panel.render(Ext.getBody());
  33. });
  34. </script>
  35. </head>
  36. <body>
  37. </body>
  38. </html>

版权声明：本文为博主原创文章，未经博主允许不得转载。

分享到：
| Zend Framework之Layout
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    extJs 2.1学习笔记

    20. extJs 2.0学习笔记(Ext.Panel篇一) 48 21. extJs 2.0学习笔记(Ext.Panel篇二) 50 22. extJs 2.0学习笔记(Ext.Panel篇三) 59 23. extJs 2.0学习笔记(Ext.Panel篇四) 62 24. extJs 2.0学习笔记(组件总论篇) 66 25....

    ext 学习笔记 ext 学习笔记

    根据提供的文件信息，我们可以归纳出一系列关于EXT框架的学习知识点，主要围绕EXT框架的基本概念、安装与使用、核心组件以及高级特性展开。 ### EXT框架简介 #### 1. 下载Ext EXT是一个开源的JavaScript框架，它...

    ExtJs 学习笔记 Ext.Panle Ext.TabPanel Ext.Viewport第1/3页

    创建一个简单的面板 Ext.Panel 2.制作一个可以拖动的面板 Ext.Panel 3 .使用选项卡面板 3.使用Ext.Viewport搭一个简单布局(用一个小例子来总结本文所有内容) 面板是ExtJs控件的基础，很多控件都是在面板的基础上扩展...

    Gwt-ext学习笔记

    在阅读《Gwt-ext学习笔记.pdf》这份资料时，应重点学习上述知识点，并通过实践项目来加深理解。同时，关注Gwt-ext的更新和社区资源，以便获取最新的API信息和最佳实践。不断练习和探索，你将能够熟练运用Gwt-ext构建...

    ext 4.0 学习笔记.doc

    Array Grid的核心是`Ext.grid.Panel`，它是EXT JS中的一个核心组件，用于呈现数据表格。`Ext.grid.Panel`包含多个属性，这些属性定义了网格的行为和外观。例如： 1. **store**：这个属性指定了Grid的数据源，通常是...

    Ext学习笔记

    Ext JS4学习教程+笔记（一） Ext JS4学习教程+笔记（二）事件处理 Ext JS4学习教程+笔记（六）DataView面板 Ext JS4学习教程+笔记（七）树面板Tree Panel Ext JS4学习教程+笔记（三）Ajax请求 ...Ext学习网址

    Yui_ext 学习笔记

    Ext 提供了一个强大的框架，用于创建具有丰富用户体验的网页应用，其核心是 Element 对象，它封装了 DOM 元素的操作，提供了统一的跨浏览器接口。Element 对象拥有丰富的 API，可以实现诸如添加/移除 CSS 类、事件...

    （转载）GWT -EXT学习笔记-中级

    ### Gwt-Ext学习笔记之中级篇：深入理解与实践 #### 一、配置Gwt-Ext开发环境 本文档是基于《Gwt-Ext学习笔记之基础篇》的进一步扩展，因此对于初次接触Gwt-Ext的读者来说，强烈建议先阅读基础篇以熟悉基本概念和...

    extJs+2.1学习笔记.pdf

    15. **extJs 2.0 学习笔记（Ext.Panel终结篇）** Panel是构建UI的基本组件，涵盖了布局、标题、工具栏等多种功能。掌握Panel的使用和配置，能创建复杂而灵活的界面。 16. **extJs 2.0 学习笔记（事件注册总结篇）*...

    Sencha touch学习笔记一：用Sencha Cmd方式创建第一个应用

    本篇学习笔记将聚焦于如何使用Sencha Cmd工具来创建你的第一个Sencha Touch应用。 首先，你需要安装Sencha Cmd。这是一款命令行工具，简化了Sencha Touch应用的创建、构建和部署流程。你可以从Sencha的官方网站下载...

    老师整理的extjs学习笔记

    ### ExtJS 学习笔记概览 #### 一、ExtJS 入门 **1.1 ExtJS 构成及如何引用** ExtJS 是一款基于 JavaScript 的开源框架，专为 Web 应用程序的前端界面设计。其核心优势在于提供了一套丰富的 UI 组件和强大的数据...

    ExtJS面板学习笔记(带有运行效果)

    ### ExtJS面板学习笔记 #### 一、基础：弹出框 在ExtJS中，`Ext.MessageBox`提供了创建各种模态对话框的功能，包括提示、确认、输入等。以下是几个基本示例： 1. **简单警告对话框**： ```javascript Ext....

    ExtJs学习笔记.pdf

    - 可以使用ExtJs中的Panel组件来创建一个基本的面板，并通过设置其属性来实现不同的展示效果。 综上所述，通过本文档提供的指南，您可以顺利地开始学习和使用ExtJs框架。无论是对于初学者还是有一定经验的开发者...

    EXT_JS实用开发指南_个人整理笔记.rar

    在EXT_JS中，数据绑定是另一个关键特性。通过使用Store对象，开发者可以轻松地将数据与组件进行绑定，实现数据的动态更新。Store可以连接到各种数据源，如JSON、XML或Ajax请求，提供灵活的数据加载和同步机制。 ...

    DotNet+Ext入门

    在 IT 领域，DotNet 是微软公司推出的一种全面的开发框架，用于构建各种类型的应用程序，而 Ext 是一个基于 JavaScript 的富客户端框架，尤其在创建桌面级 Web 应用时非常强大。本篇文章主要探讨的是如何将这两者...

    extjs学习笔记知识点总结

    13. **extJs 2.0 学习笔记**：这部分可能包括了针对2.0版本的一些特性讲解，如Ajax的使用、Ext.data模块的基础知识以及Panel组件的深入探讨。 以上只是对每个章节主题的简要概述，实际的学习笔记会更深入地讲解每个...

    extjs4.x学习笔记

    【ExtJs 4.x 学习笔记】 在Web应用程序开发领域，ExtJs是一个强大的JavaScript库，主要用于构建富客户端界面。随着技术的不断发展，ExtJs也不断进化，从3.x版本到4.x，再到5.x，引入了许多新特性，提升了开发效率和...

Magicbox
Global site tag (gtag.js) - Google Analytics