最近的项目中在使用EXTJS(3.3,3.4) ,在此记录遇到的问题及解决方式,供后续参考
1 获取表单的内容
var formValues=formpanel.getForm().getValues(); //获取表单中的所有Name键/值对对象.
2 改变按钮的状态
{
fieldLabel : "附件",
xtype : 'button',
id:"fujian",
text:'材料上传',
disabled: true,
}
在其他地方设置其可点击
Ext.getCmp('fujian').enable();
3 显示json对象为字符串
例如: console.log(obj)
显示为[Object,Object]
可以转化为json字符串显示
console.log(JSON.stringify(obj))
4 事件响应
按钮事件响应的方式主要有3种
- 直接写handler : function(){} 会直接响应点击事件
- listeners : {
check : function(radio, chked) {
if (chked) {
config['ids'] = undefined;
}else {
config['ids'] = ids;
}
}
}
此处需要注意是 listeners
- 使用on关键字(addListener 的简写)
Var btn =new Ext.Button();
btn.on(‘click’,function(){});
5 复制/拷贝
ext.apply(a,b)
将 b中的内容,复制到a中,
例如
var a={id:'aid',name:'aname'},
var b ={id:'bid',type:'typec'},
Ext.apply(a,b)
==> 此时的a变成了 {id: "bid", name: "aname", type: "typec"}
6 xtype
基本组件: | ||
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) |
| ||
图表组件: | ||
xtype | Class | 描述 |
chart | Ext.chart.Chart | 图表组件 |
barchart | Ext.chart.BarChart | 柱状图 |
cartsianchart | Ext.chart.CartesianChart |
|
columnchart | Ext.chart.ColumnChart |
|
linechart | Ext.chart.LineChart | 连线图 |
piechart | Ext.chart.PieChart | 扇形图 |
| ||
数据集 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 |
7 滚动条设置
设置autoscroll:true同时出现横向和纵向滚动条。
不设置autoscroll属性,或者autoscroll:false,然后设置bodyStyle : 'overflow-x:hidden; overflow-y:scroll'。
.
bodyStyle :'overflow-x:hidden;overflow-y:scroll', //隐藏水平滚动条,显示用overflow-x:visible
8 在dialog中新增提示信息
对话框:
/**
* 对话框
*
* @param {String}
* title
* @param {int}
* width
* @param {int}
* height
* @param {Ext.Panel}
* widget
*/
gdda.ux.Dialog = function(title, width, height, widget, config,maximizable) {
var _this = this;
if(maximizable){
_this.maximizable=true;
}else{
_this.maximizable=false;
}
/**
* 关闭按钮
*/
this.buttonClose = new Ext.Button({
text : '关闭',
handler : function() {
_this.close();
}
});
this.buttonCancel = new Ext.Button({
text : '取消',
handler : function() {
_this.close();
}
});
config = config || {};
Ext.applyIf(config, {
defaults : {
border : false
},
layout : 'fit',
title : title,
width : width,
height : height,
maximizable:_this.maximizable,
// resizable : config?config.resizable :true,
// draggable : config?config.draggable :true,
modal : true,
autoScroll : true,
items : widget
});
gdda.ux.Dialog.superclass.constructor.call(this, config);
};
Ext.extend(gdda.ux.Dialog, Ext.Window, {});
dlg.addButton() 这个方法除了可以增加按钮,也可以增加其他的内,例如panel,fieldLabel等,默认显示在下面,靠右显示
var form= new gdda.borrow.FileTransAddForm(conf,type);
var dlg = new gdda.ux.Dialog(conf.title, 700, 300, form);
dlg.addButton(form.showField);
dlg.addButton(form.save);
dlg.addButton(dlg.buttonClose);
dlg.on("show", function(com) {
form.getForm().findField("bean.fileName").focus(false, 10);
});
dlg.on("close",function(){
_this.dataStore.reload();
});
dlg.show();
9 获取下拉框中选中的值
var mystatus = new Ext.form.Combox({
name : 'status',
store : _this.mystore,
valueField: 'value',
displayField : 'text',
listeners:{
select : function(comb){
comb.value; //获取当前选择的值
comb.selectedIndex;//获取选择的下标
}
})