本周工作总结2011-11-12

场景一：

    创建一个TabPanel，将平台封装的Grid2添加到TabPanel中；出现问题，切换Tab页的时候右边的Tab页中的Grid没有渲染成功。

解决方法：

,createTabPanel:function(){
	var tab = new Ext.TabPanel({
		id: 'tabid',
		width: 1000,
		height: 600,
		renderTo :'div_main'
});
        var panel1 = new Ext.Panel({
	       title: '面板一',
		html: '<div id="div_main1"></div>'
	});
	var panel2 = new Ext.Panel({
		title: '面板二',
		html: '<div id="div_main2"></div>'
	});
	tab1 = tab.add(panel1);
	tab2 = tab.add(panel2);
	tab1.on('activate',function(){
		JXRWJC.gridInit('div_main1');
});
         tab2.on('activate',function(){
		JXRWJC.gridInit('div_main2');
	});
	tab.activate(0);
}

 在每个Tab页的activate事件中绑定Grid2初始化方法，并将参数传过去(需要渲染的Tab页中的DivID和Grid2的过滤条件，在初始化方法中直接配置Grid2的filter)。

场景二：

如何给Grid2添加多个Toolbar？

解决方法：

首先我们可以设置Grid2的tbar:object/Array属性，按照API上面的解释toolbar是面板顶部的工具条。此配置项可以是Ext.Toolbar的实例、工具条的配置对象或由按钮配置项对象构成的数组，以加入到工具条中。除了Grid2默认配置的tbar之外，我们同样可以自己new出一个tbar对象添加到Grid中去。

var tbar2 = new Ext.Toolbar([ 
   {
	 text:'上课班级合班'
	,tooltip: {title:'上课班级',text:'上课班级维护'}
	,iconCls: 'setting_btn'
	,handler: this.hbbjMethod
	,scope : JXRWJC
    },'-',{
	text:'任课教师'
	,tooltip: {title:'任课教师',text:'任课老师维护'}
	,iconCls: 'tech_btn'
	,handler: this.rklsMethod
	,scope : JXRWJC
},'-',{
	text:'编辑教学班'
	,tooltip: {title:'编辑教学班',text:'教学班信息维护'}
	,iconCls: 'jxb_btn'
	,handler: this.bjJxbMethod
	,scope : JXRWJC
},'-',{
         text: '高级排序'
        ,tooltip: {title:'支持多列排序',text:'支持多列排序'}
	,iconCls: 'extsort_btn'
	,handler: this.queryOrderBy 
	,scope : JXRWJC
}
]);

 例如可以定义如上一组功能按钮添加到面板的工具栏中。因为是新new出来的toolbar所以会生成一个新的toolbar放在原来配置的toolbar的下面一行显示。

场景三：

    从数据库中取得数据，动态生成checkbox显示在Window窗口中，用户选择某几个checkbox后返回勾选的数据(特定格式的数据)。

存在的问题：

    目前系统可能是出于Ext开源协议的限制，一直使用的Ext2.1版本。解决此问题的初步想法是首先创建一个FormPanel，设置其子组件xtype:fieldset，然后在fieldset中再创建两个子组件分别是checkbox(全选checkbox)和使用checkboxgroup分组显示后台取出的JSON数据。我们觉得这个方法肯定是可以实现的，虽然还存在如何将JSON数据设置为checkboxgroup的items值的问题。一个更郁闷的问题彻底迫使我放弃这个方法了，因为Ext2.1不支持xtype:checkboxgroup属性。后来我到网上查了一下具体Ext各个版本之间的差别，有人总结了一下：

基本组件：
xtype	Class	描述
button	Ext.Button	按钮
splitbutton	Ext.SplitButton	带下拉菜单的按钮
cycle	Ext.CycleButton	带下拉选项菜单的按钮
buttongroup	Ext.ButtonGroup	编组按钮(Since 3.0)
slider	Ext.Slider	滑动条
progress	Ext.ProgressBar	进度条
statusbar	Ext.StatusBar	状态条，2.2加进来，3.0 又去了
colorpalette	Ext.ColorPalette	调色板
datepicker	Ext.DatePicker	日期选择面板

容器及数据类组件
xtype	Class	描述
window	Ext.Window	窗口
viewport	Ext.ViewPort	视口，即浏览器的视口，能随之伸缩
box	Ext.BoxComponent	盒子组件，相当于一个 <div>
component	Ext.Component	组件
container	Ext.Container	容器
panel	Ext.Panel	面板
tabpanel	Ext.TabPanel	选项面板
treepanel	Ext.tree.TreePanel	树型面板
flash	Ext.FlashComponent	显示 Flash 的组件(Since 3.0)
grid	Ext.grid.GridPanel	表格
editorgrid	Ext.grid.EditorGridPanel	可编辑的表格
propertygrid	Ext.grid.PropertyGrid	属性表格
editor	Ext.Editor	编辑器
dataview	Ext.DataView	数据显示视图
listview	Ext.ListView	列表视图

工具栏组件：
xtype	Class	描述
paging	Ext.PagingToolbar	分页工具条
toolbar	Ext.Toolbar	工具栏
tbbutton	Ext.Toolbar.Button	工具栏按钮
tbfill	Ext.Toolbar.Fill	工具栏填充区
tbitem	Ext.Toolbar.Item	工具条项目
tbseparator	Ext.Toolbar.Separator	工具栏分隔符
tbspacer	Ext.Toolbar.Spacer	工具栏空白
tbsplit	Ext.Toolbar.SplitButton	工具栏分隔按钮
tbtext	Ext.Toolbar.TextItem	工具栏文本项

菜单组件：
xtype	Class	描述
menu	Ext.menu.Menu	菜单
colormenu	Ext.menu.ColorMenu	颜色选择菜单
datemenu	Ext.menu.DateMenu	日期选择菜单
menubaseitem	BaseItem
menucheckitem	Ext.menu.CheckItem	选项菜单项
menuitem	Ext.menu.Item
menuseparator	Ext.menu.Separator	菜单分隔线
menutextitem	Ext.menu.TextItem	文本菜单项

表单及表单域组件：
xtype	Class	描述
form	Ext.FormPanel/Ext.form.FormPanel	表单面板
checkbox	Ext.form.Checkbox	多选框
combo	Ext.form.ComboBox	下拉框
datefield	Ext.form.DateField	日期选择项
timefield	Ext.form.TimeField	时间录入项
field	Ext.form.Field	表单字段
fieldset	Ext.form.FieldSet	表单字段组
hidden	Ext.form.Hidden	表单隐藏域
htmleditor	Ext.form.HtmlEditor	HTML 编辑器
label	Ext.form.Label	标签
numberfield	Ext.form.NumberField	数字编辑器
radio	Ext.form.Radio	单选按钮
textarea	Ext.form.TextArea	多行文本框
textfield	Ext.form.TextField	表单文本框
trigger	Ext.form.TriggerField	触发录入项
checkboxgroup	Ext.form.CheckboxGroup	编组的多选框(Since 2.2)
displayfield	Ext.form.DisplayField	仅显示，不校验/不被提交的文本框
radiogroup	Ext.form.RadioGroup	编组的单选按钮(Since 2.2)

数据集 Store：
xtype	Class	描述
arraystore	Ext.data.ArrayStore
directstore	Ext.data.DirectStore
groupingstore	Ext.data.GroupingStore
jsonstore	Ext.data.JsonStore
simplestore	Ext.data.SimpleStore
store	Ext.data.Store
xmlstore	Ext.data.XmlStore

无法使用checkboxgroup组件，想到一个简单的方法，使用同步的Ajax请求到后台取得需要展示的数据，在前台拼接成HTML直接显示到Window的html属性中。这里还需要实现全选的功能，直接遍历生成的html

for(var i=0,length=checkbox.length;i<length;i++){
      if(checkbox[i].type == 'checkbox'){
		if(checkbox[i].checked){
			checkbox[i].checked = false;
                }else{
			checkbox[i].checked = true;
		}
	}
}

 document.getElementById("tb_check").getElementsByTagName("input");取得table下面所有的checkbox的javascript组件。

场景四：ExtJs在IE报对象不支持此属性或方法。

有时候为了测试Ext相关文件是否被正确的引用，我们用eclipse自动生成jsp文件以及js文件，然后我们兴高采烈的在js中写下Ext.onReady(function(){})函数来测试，有时候会莫名其妙的出现此类问题

原因：引用js的JSP页面第一个元素不能为文本text,否则IE浏览器会报错。也就是说<body>标签后面紧跟的必需是div、table、form等元素，不能是任何类型的文本。

场景五：数据库分页语句(效率比较高)

SELECT x.* FROM (
SELECT jbxx.*,ROWNUM rn FROM T_XJ_JBXX jbxx WHERE ROWNUM <=10 ORDER BY xh
) x WHERE x.rn >0