`
禹爸爸
  • 浏览: 87498 次
  • 性别: 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....

    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 类、事件...

    extJs+2.1学习笔记.pdf

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

    Ext 学习总结 pdf版

    - **ExtJs2.0学习笔记(组件总论篇)**：这是一个综合性的章节，概括了Ext JS 2.0中各种组件的特点和用途。 - **ExtJs2.0学习笔记(Ext.ElementAPI总结)**：这部分内容总结了`Ext.Element`API的关键功能，包括DOM操作...

    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请求，提供灵活的数据加载和同步机制。 ...

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