ExtJS4学习笔记
2013-12-24 16:17
260 查看
一、下载地址 http://download.csdn.net/detail/huangzebiao007/6812229 http://download.csdn.net/detail/huangzebiao007/6812251 二、第一个小例子
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>extjs</title> <link rel="stylesheet" type="text/css" href="extjs-4.1.0/resources/css/ext-all.css" /> <script type="text/javascript" src="extjs-4.1.0/ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function(){ Ext.create('Ext.window.Window', { title: 'Hello', height: 200, width: 400, buttons:[{text:"确定"},{text:"取消"}] }).show(); }); </script> </head> <body> </body> </html>Ext.onReady 可能是你接触的第一个也可能是在每个页面都要使用的方法。这个方法会在DOM 加载全部完毕后,保证页面内的所有元素能被Script 引用之后调用。三、组件的渲染和事件的触发
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>extjs</title> <link rel="stylesheet" type="text/css" href="extjs-4.1.0/resources/css/ext-all.css" /> <script type="text/javascript" src="extjs-4.1.0/ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function(){ Ext.create('Ext.Button', { text: 'Click me', renderTo: "but",//Ext.getBody(), handler: function() { alert('You clicked the button!'); } }); }); </script> </head> <body> <div id="but"></div> </body> </html>使用renderTo可以将组件渲染到节点下,事件的触发可以在hander中处理对某个事物源添加事件
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>extjs</title> <link rel="stylesheet" type="text/css" href="extjs-4.1.0/resources/css/ext-all.css" /> <script type="text/javascript" src="extjs-4.1.0/ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function(){ Ext.get("but").on("click",handleButton,this,{delay:2000}); }); function handleButton(){ alert("处理事件"); } </script> </head> <body> <input type="button" id="but" value="click me" /> </body> </html>四、常用布局1、Border布局,把容器分成东西南北中几大区域,容器中的元素可以通过region属性来指定子元素放置在容器中的什么位置。
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>extjs</title> <link rel="stylesheet" type="text/css" href="extjs-4.1.0/resources/css/ext-all.css" /> <script type="text/javascript" src="extjs-4.1.0/ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function(){ Ext.create('Ext.panel.Panel', { width: 500, height: 300, title: 'Border Layout', layout: 'border', items: [{ title: 'South Region is resizable', region: 'south', // position for region xtype: 'panel', height: 100, split: true, // enable resizing margins: '0 5 5 5' },{ // xtype: 'panel' implied by default title: 'West Region is collapsible', region:'west', xtype: 'panel', margins: '5 0 0 5', width: 200, collapsible: true, // make collapsible id: 'west-region-container', layout: 'fit' },{ title: 'Center Region', region: 'center', // center region is required, no width/height specified xtype: 'panel', layout: 'fit', margins: '5 5 0 0' }], renderTo: Ext.getBody() }); }); </script> </head> <body> </body> </html>2、Column布局,把子元素按列排放,通过columnWidth及width属性来指定子元素的所占的列宽度。
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>extjs</title> <link rel="stylesheet" type="text/css" href="extjs-4.1.0/resources/css/ext-all.css" /> <script type="text/javascript" src="extjs-4.1.0/ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function(){ // 所有列都以百分数配置 -- 他们总和必须为1 Ext.create('Ext.panel.Panel', { title: 'Column Layout - Percentage Only', width: 350, height: 250, layout:'column', items: [{ title: 'Column 1', columnWidth: 0.25 },{ title: 'Column 2', columnWidth: 0.55 },{ title: 'Column 3', columnWidth: 0.20 }], renderTo: Ext.getBody() }); // 参数 width 与 columnWidth 混用 -- 所有columnWidth值之和必须为1. // 第一列会占用宽度120px, 而后两列会填满容器剩下的宽度. Ext.create('Ext.Panel', { title: 'Column Layout - Mixed', width: 350, height: 250, layout:'column', items: [{ title: 'Column 1', width: 120 },{ title: 'Column 2', columnWidth: 0.7 },{ title: 'Column 3', columnWidth: 0.3 }], renderTo: Ext.getBody() }); }); </script> </head> <body> </body> </html>3、Form布局,容器中的元素包括标题及组件内容两项值。
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>extjs</title> <link rel="stylesheet" type="text/css" href="extjs-4.1.0/resources/css/ext-all.css" /> <script type="text/javascript" src="extjs-4.1.0/ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function(){ Ext.create('Ext.Panel', { width: 500, height: 300, title: "FormLayout Panel", layout: 'form', renderTo: Ext.getBody(), bodyPadding: 5, defaultType: 'textfield', items: [{ fieldLabel: 'First Name', name: 'first', allowBlank:false },{ fieldLabel: 'Last Name', name: 'last' },{ fieldLabel: 'Company', name: 'company' }, { fieldLabel: 'Email', name: 'email', vtype:'email' }, { fieldLabel: 'DOB', name: 'dob', xtype: 'datefield' }, { fieldLabel: 'Age', name: 'age', xtype: 'numberfield', minValue: 0, maxValue: 100 }, { xtype: 'timefield', fieldLabel: 'Time', name: 'time', minValue: '8:00am', maxValue: '6:00pm' }] }); }); </script> </head> <body> </body> </html>4、Fit布局,子元素填充整个容器区域。五、ExtJs常用的组件和容器的介绍,extJs的学习本质上就是对这些组件的学习1、面板Ext.panel.Panel(xtype:panel)面板由以下几个部分组成,一个顶部工具栏(tbar)、一个底部工具栏(bbar)、面板头部(header)、面板尾部(bottom)、面板主区域(body)几个部分组成示例:
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>extjs</title> <link rel="stylesheet" type="text/css" href="extjs-4.1.0/resources/css/ext-all.css" /> <script type="text/javascript" src="extjs-4.1.0/ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function(){ var panel1 = Ext.create('Ext.panel.Panel', { width:400, height:200, collapsible:true,//折叠面板 closable:true,//出现关闭面板的标志,如果不设置closeAction,则默认是destroy,无法再show出来,如果是hide,则能再显示出来 closeAction:"hide",//默认是destroy title:"面板头部header", html:'<h1>面板主区域</h1>', items:[{xtype:"button",text:"按钮1"},{xtype:"button",text:"按钮2"}], tbar:[{text:'顶部工具栏'}], bbar:[{text:'底部工具栏'}], buttons:[{text:"按钮位于footer"}], renderTo: Ext.getBody() }); Ext.create('Ext.Button', { text: 'Click me', renderTo: "but",//Ext.getBody(), handler: function() { panel1.show(); } }); }); </script> </head> <body> <div id="but"></div> </body> </html>一个更实际的用法是一个Panel被创建用于放置一些字段而不被渲染,但会作为容器的一个组成部分而存在
<script type="text/javascript"> Ext.onReady(function(){ var filterPanel = Ext.create('Ext.panel.Panel', { bodyPadding: 5, // 避免Panel中的子元素紧邻边框 width: 300, title: 'Filters', items: [{ xtype: 'datefield', fieldLabel: 'Start date' }, { xtype: 'datefield', fieldLabel: 'End date' }], renderTo: Ext.getBody() }); }); </script>值得注意的是Panel在渲染到页面上需要配置其自身大小。在现实世界的情况,Panel通常被内置到一个指定的layoutt容器中去显示,大小和位置作为这个容器的子组件。
<script type="text/javascript"> Ext.onReady(function(){ var resultsPanel = Ext.create('Ext.panel.Panel', { title: 'Results', width: 600, height: 400, renderTo: Ext.getBody(), layout: { type: 'vbox', // 子元素垂直布局 align: 'stretch', // 每个子元素宽度充满子容器 padding: 5 }, items: [{ // 指定一个grid子元素 xtype: 'grid', columns: [{header: 'Column One'}], // 只配置一列显示,没有数据 store: Ext.create('Ext.data.ArrayStore', {}), // 设置一个没有数据的store flex: 1 // 占用容器的1/3高度 (在以 Box 为布局中) }, { xtype: 'splitter' //一个分割器在两个子组件之间 }, { // Details 面板作为一个配置进来的Panel (没有用xtype指定,默认是 'panel'). title: 'Details', bodyPadding: 5, items: [{ fieldLabel: 'Data item', xtype: 'textfield' }], // 表单元素(文本域) flex: 2 // 占用容器的2/3高度 (在以 Box 为布局中) }] }); }); </script>2、浏览器窗口Ext.container.Viewport(xtype:viewport)Viewport渲染自身到网页的documet body区域, 并自动将自己调整到适合浏览器窗口的大小,在窗口大小发生改变时自动适应大小。 一个页面中只能创建一个Viewport.简单的后台模板示例:
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>extjs</title> <link rel="stylesheet" type="text/css" href="extjs-4.1.0/resources/css/ext-all.css" /> <script type="text/javascript" src="extjs-4.1.0/ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function(){ var store = Ext.create('Ext.data.TreeStore', { root: { expanded: true, children: [ { text: "detention", leaf: true, id:"1"}, { text: "homework", expanded: true, children: [ { text: "book report", leaf: true, id:"2"}, { text: "alegrbra", leaf: true, id:"3"} ] }, { text: "buy lottery", leaf: true, id:"4"} ] } }); var treePanel1 = Ext.create('Ext.tree.Panel', { title: 'Simple Tree2', width: 150, store: store, rootVisible: true, }); treePanel1.on('itemclick', function(view,record) { Ext.Msg.alert('信息提示', record.data.id); }); Ext.create('Ext.container.Viewport', { layout: 'border', items: [{ region: 'north', html: '<h1 class="x-panel-header">Page Title</h1>', height:50 }, { region: 'west', collapsible: true, title: 'Navigation', items:[{xtype:"button",text:"click me",handler: function() { alert('You clicked the button!'); }},{ xtype:treePanel1 }], width: 150 // 这里通常可以使用 TreePanel 或者 AccordionLayout布局的导航菜单 }, { region: 'south', title: 'South Panel', collapsible: true, html: 'Information goes here', split: true, height: 100, minHeight: 100 }, { region: 'east', title: 'East Panel', collapsible: true, split: true, width: 150 }, { region: 'center', xtype: 'tabpanel', // TabPanel本身没有title属性 activeTab: 1, // 配置默认显示的激活面板 items: [{ title: 'Default Tab', html: 'The first tab\'s content. Others may be added dynamically' },{ title: 'Default Tab2', html: 'The second tab\'s content. Others may be added dynamically' },] }] }); }); </script> </head> <body> </body> </html>3、窗口Ext.window.Window(xtype:window)一个指定的打算作为一个应用程序窗口的面板,默认窗口是浮动的
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>extjs</title> <link rel="stylesheet" type="text/css" href="extjs-4.1.0/resources/css/ext-all.css" /> <script type="text/javascript" src="extjs-4.1.0/ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function(){ Ext.create('Ext.window.Window', { title: 'Hello', height: 200, width: 400, draggable : true,//是否可以拖动 maximizable: true//最大化 }).show(); }); </script> </head> <body> </body> </html>4、对话框Ext.MessageBox 别名 ‘Ext.Msg’
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>extjs</title> <link rel="stylesheet" type="text/css" href="extjs-4.1.0/resources/css/ext-all.css" /> <script type="text/javascript" src="extjs-4.1.0/ext-all.js"></script> <script type="text/javascript"> function alertDialog(){ Ext.MessageBox.alert("友情提示","这是浏览器定义的信息提示框"); } function confirmDialog(){ var ret=Ext.Msg.confirm("删除确认","是否真的要删除该记录?",function(btuuon){ alert(btuuon+"选择结果:"+(btuuon=="yes"?"是":"否")); }); } function inputDialog(){ Ext.MessageBox.prompt("姓名输入","请输入你的姓名:",function(button,text){ if(button=="ok"){ alert(button+"你输入的是:"+text); }else{ alert(button+"你放弃了录入!"); } }); } Ext.onReady(function(){ alertDialog(); //confirmDialog(); //inputDialog(); }); </script> </head> <body> </body> </html>5、表格Ext.grid.Panel(xtype:gridpanel, grid)Grid是在客户端上显示大量的表格数据的极佳方式。它本质上是一个超级统计表<table>, GridPanel使其更容易地进行获取、排序和筛选大量的数据。Grid是由两个主要部分组成的 - 一个含有全部数据的store和一个要进行渲染列的集合。
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>extjs</title> <link rel="stylesheet" type="text/css" href="extjs-4.1.0/resources/css/ext-all.css" /> <script type="text/javascript" src="extjs-4.1.0/ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function(){ Ext.create('Ext.data.Store', { storeId:'simpsonsStore', fields:['name', 'email', 'phone'], data:{'items':[ { 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" }, { 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" }, { 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" }, { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" } ]}, proxy: { type: 'memory', reader: { type: 'json', root: 'items' } } }); Ext.create('Ext.grid.Panel', { title: 'Simpsons', store: Ext.data.StoreManager.lookup('simpsonsStore'), columns: [ { header: 'Name', dataIndex: 'name', //sortable: true,//排序 //hideable: false,//隐藏 flex: 1,//占用剩余的宽度 field: 'textfield'//在线编辑 }, { header: 'Email', dataIndex: 'email', flex: 1, //hidden: true//初始化时是隐藏 renderer: function(value) {//改变单个单元格的渲染 //var cls = 'my-class', text = 'Some text'; var s = Ext.String.format('<div class="{0}">{1}</div>', cls, text); //s 现在是字符串: '<div class="my-class">Some text</div>' return Ext.String.format('<a href="mailto:{0}">{1}</a>', value, value); } }, { header: 'Phone', dataIndex: 'phone', flex: 1, field: { xtype: 'textfield', allowBlank: false//非空 } //width: 100//固定宽度 } ], //以下两个属性配置好后才能在线编辑 cellmodel是列编辑器,rowmodel是行编辑器 //rowmodel当我们单击每个行的行, 编辑器将会出现,并使我们能够编辑每个我们有指定编辑器的列。 //cellmodel则只能一个一个点击 //selType: 'cellmodel', //plugins: [ // Ext.create('Ext.grid.plugin.CellEditing', { // clicksToEdit: 1 // }) //], selType: 'rowmodel', plugins: [ Ext.create('Ext.grid.plugin.RowEditing', { clicksToEdit: 1 }) ], height: 200, width: 400, renderTo: Ext.getBody() }); }); </script> </head> <body> </body> </html>分组
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>extjs</title> <link rel="stylesheet" type="text/css" href="extjs-4.1.0/resources/css/ext-all.css" /> <script type="text/javascript" src="extjs-4.1.0/ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function(){ var store = Ext.create('Ext.data.Store', { storeId:'employeeStore', fields:['name', 'seniority', 'department'], groupField: 'department', data: {'employees':[ { "name": "Michael Scott", "seniority": 7, "department": "Management" }, { "name": "Dwight Schrute", "seniority": 2, "department": "Sales" }, { "name": "Jim Halpert", "seniority": 3, "department": "Sales" }, { "name": "Kevin Malone", "seniority": 4, "department": "Accounting" }, { "name": "Angela Martin", "seniority": 5, "department": "Accounting" } ]}, proxy: { type: 'memory', reader: { type: 'json', root: 'employees' } } }); Ext.create('Ext.grid.Panel', { title: 'Employees', store: store, columns: [ { header: 'Name', dataIndex: 'name' }, { header: 'Seniority', dataIndex: 'seniority' } ], features: [{ftype:'grouping'}], width: 200, height: 275, renderTo: Ext.getBody() }); }); </script> </head> <body> </body> </html>6、表单Ext.form.Panel(xtype:form)
Ext.create('Ext.form.Panel', { title: 'Simple Form', bodyPadding: 5, width: 350, // 将会通过 AJAX 请求提交到此URL url: 'save-form.jsp', // 表单域 Fields 将被竖直排列, 占满整个宽度 layout: 'anchor', defaults: { anchor: '100%' }, // The fields defaultType: 'textfield', items: [{ fieldLabel: 'First Name', name: 'first', allowBlank: false },{ fieldLabel: 'Last Name', name: 'last', allowBlank: false }], // 重置 和 保存 按钮. buttons: [{ text: '重置', handler: function() { this.up('form').getForm().reset(); } }, { text: '保存', formBind: true, //only enabled once the form is valid disabled: true, handler: function() { var form = this.up('form').getForm(); if (form.isValid()) { form.submit({ success: function(form, action) { Ext.Msg.alert('保存成功', action.result.msg); }, failure: function(form, action) { Ext.Msg.alert('操作失败', action.result.msg); } }); } } }], renderTo: Ext.getBody() });save-form.jsp下面的内容{success:true}[/code]
相关文章推荐
- extjs 学习笔记(三) 最基本的grid
- extjs6.2 学习笔记2-本地化
- extjs 学习笔记(三) 最基本的grid
- Extjs学习笔记之七 布局
- extJs 2.1学习笔记(Ext.data.Connection篇一)
- ExtJs 学习笔记 一 初体验
- ExtJS学习笔记-01
- Extjs学习笔记(-):ComboBox联动
- ExtJs学习笔记4
- Extjs4 学习笔记源码---Extjs4 Demo(1-9)
- Extjs 的MVVM结构学习笔记
- ExtJs学习笔记(17)_table布局
- ExtJS 学习笔记 1
- ExtJS学习笔记(四) Datetime控件
- ExtJS4学习笔记二--表单控件相关
- EXTJS学习笔记:类似于Window的登录窗体
- extjs4视频学习笔记4
- ExtJS的布局--学习笔记
- ExtJS学习笔记(五) Tree
- ExtJs学习笔记(14)_Column布局