ExtJS基础组件

1、组件分类

　　大致分为四大类：

　　　　1.容器类组件

　　　　2.工具栏及菜单栏组件

　　　　3.表单及元素组件

　　　　4.其他组件

2、控件（widgets）：控件是指可以直接在页面中创建的可视化组件，比如面板、选项板、表格、树、窗口、菜单、工具栏、按钮等等，在我们的应用程序中可以直接通过应用这些控件来实现友好、交互性强的应用程序的UI

3、组件分类举例　

•容器组件：如toolbar、pagingtoolbar、panel、form、menu、treePanel、gridPanel、window等。

•工具栏及菜单栏组件：如tbseparator（工具栏分隔符）、menuitem（菜单项）等。

•表单及元素组件：如checkboxfield（复选框）、combo(下拉列表)、datefield（日期选择项）等。

•其他组件（包括图表、视图、编辑、按钮组件）：如chart、button。

 

4、组件的创建

　　通过new关键字来创建

　　　　var ProgressBar=new Ext.ProgressBar({.....})

　　通过create关键字来创建

　　　　var ProgressBar=Ext.create('Ext.ProgressBar',{...})

　　(标注:在ExtJS4.0中推荐使用create方式穿件组件)

5、ExtJS组件的配置说明

　　配置主要表现为两种形式：

　　　　常见的用逗号分隔的参数列表：Ext.Msg.alert(‘提示’,’逗号分隔列表’)；

　　　　利用JSON对象为组件提供配置：config={title:’case1’,msg:’This is mine.’};

   　　　　　　　　　　　　　　　　　　Ext.Msg.alert(config)

6、JSON介绍

　　JSON的全称是JavaScript  Object  Notation(JavaScript对象符号)。它以‘{’开始，以‘}’结束，属性名和值用‘：’分隔，属性间用‘，’分隔。JSON的属性可以是简单的字符串、数组、数字、true、false、null或者对象。

　　举例：var person = {name:’json’,age:24,sex:’man’,married:false,books:[{name:’历史’,price:30},{name:’文学’,price:25}]}

　　调用方式：alert(person.name+’’+person[“age”])（通过’.’或中括号’[]’）

7、Ext.window.MessageBox

　　继承自Ext.window.MessageBox对象，用来生成各种风格的信息提示对话框。其实例对象可以通过Ext.MessageBox或Ext.Msg进行访问

　　Ext.MessageBox的信息提示框与JavaScript的提示框的差别：

　　　　1.实现方式：JavaScript的提示对话框是一个真正的弹出窗口。Ext.MessageBox提示对话框只是在当前页面显示一个层(div)。

　　　　2.显示信息格式：JavaScript显示内容是纯文本，Ext.MessageBox不仅支持纯文本还支持使用HTML格式文本。

　　　　　　例：Ext.Msg.alert(‘’提示,’<font color=red>HTML格式</font>’);

　　　　3.对程序运行的影响：JavaScript提示对话框会对JavaScript程序的运行产生阻塞。Ext.MessageBox是异步的，它的调用不会停止浏览器中的代码执行。

　　Ext.MessageBox.alert(),confirm()、prompt()、wait()、show()

8、Ext.onReady()

　　该方法的调用发生在Document对象加载完毕后，HTML的onload事件及image加载之前。此函数非常重要，所有的资源都必须加载完毕方可进行ExtJS的函数调用即Ext.onReady()是ExtJS的入口点