//列表
var ColModel = new Ext.grid.ColumnModel([
new Ext.grid.CheckboxSelectionModel({singleSelect:false}),//复选框
{header:'id',dataIndex:'id',hidden:true},
。。。
]);
//表单
var labelForm = new Ext.form.FormPanel({
layout:'form',
baseCls:'x-plain',//去除背景色
reader:new Ext.data.JsonReader({//这个Reader主要负责把Action中的obj对象的属性值解析出来,
//其中Action的配置文件中指定返回结果为json:<result type="json" />
root:'obj',//Action有属性 Label obj;其中Label(标签)类中的
//属性有 int id,String labelName,Label label;三个
idProperty:'id'
},[//记录与实体的属性映射关系
{name:'label.id',mapping:'id'},
{name:'label.labelName',mapping:'labelName'},
]),
items:[{
xtype:'hidden',//隐藏id 使用这个xtype='hidden'不会占用空间
id:'label.id',
name:'label.id'
},{
xtype:'textfield',
fieldLabel:'标签名',
id:'label.labelName',
name:'label.labelName',
allowBlank:false
}]
});
//窗口
var labelWindow = new Ext.Window({
plain:true,
modal:true,//窗口处于modal模式,也即其他窗口不能被激活,除非关闭该窗口
closeAction:'hide',//关闭窗口动作发生时 隐藏窗口
......
}
//表格
var labelGrid = new Ext.grid.EditorGridPanel({
stripeRows:true,//行间隔不同背景色
trackMouseOver:true,//鼠标在行移动时 高亮显示
viewConfig: {forceFit:true},
/*Ext.grid.EditorGridPanel
autoExpandColumn : String
[b]The id of a column[/b] in this grid that should expand to fill unused space. This value specified here can not be 0.
viewConfig : Object
A config object that will be applied to the grid's UI view. Any of the config options available for Ext.grid.GridView can be specified here. [b]This option is ignored if view is specified.[/b]
Ext.grid.GridView
autoFill : Boolean
Defaults to false. Specify true to have the column widths re-proportioned when the grid is initially rendered. The initially configured width of each column will be adjusted to fit the grid width and prevent horizontal scrolling. [b]If columns are later resized (manually or programmatically), the other columns in the grid will not be resized to fit the grid width.[/b]
forceFit : Boolean
Defaults to false. Specify true to have the column widths re-proportioned at all times. The initially configured width of each column will be adjusted to fit the grid width and prevent horizontal scrolling. [b]If columns are later resized (manually or programmatically), the other columns in the grid will be resized to fit the grid width. See autoFill also[/b].*/
listeners:{
rowdblclick:function(grid,rowIndex,e){//双击打开编辑窗口
var selModel = grid.getSelectionModel();
var row = selModel.getSelected();//获取被选中的行
var id = row.get("id");//获取被选中的记录ID
......
}
}
......
}
//下拉框
{
xtype:'combo',
fieldLabel:'标签分类',
displayField:'labelName',//显示名称
valueField:'id',//提交时的值
id:'labelCatId',
store:labelCatStore,//数据源
mode:'remote',//第一次触发时 自动查询数据
triggerAction:'all',
typeAhead:true,//在编辑框输入数据的时候 匹配列表的值
allowBlank:false//不能为空
}
今天就写到这,后面关于Component的都添加到这篇文章。
有空的话,欢迎到
红番薯逛逛
分享到:
相关推荐
ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor 另外,不常见的布局有:tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...
一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa
extjs2----关于extjs 的使用,操作.比较初级,但是也比较使用。适合初步接触extjs的朋友
ExtJS快速入门--传智播客--蔡世友
ExtJS----HelloWorld程序源码
extjs in action 1-6章节 pdf extjs in action 1-6章节 pdf
Extjs4---combobox省市区三级联动+struts2
extJs2.0+spket-1.6.11.zip extJs2.0+spket-1.6.11.zip
Extjs4---grid的修改、删除功能---结合struts2、hibernate
extjs_4.1.0_community_extjs4-mvc-complex-dashboard
通过这个观看视频会让你很快的了解到extjs,并且能够很快的进入ext的使用
ExtJs学习资料22-从服务器获取JSON数据并分页处理.doc
EXTJS开发包ext-3.2.0 EXTJS开发包ext-3.2.0
extjs-form组件配置参数详解 extjs各种组件说明
ExtJs学习资料47-完整的登录实例(非ajax提交).docExtJs学习资料47-完整的登录实例(非ajax提交).docExtJs学习资料47-完整的登录实例(非ajax提交).doc
ExtJs学习资料28-Ext.data.JsonStore数据存储器
ExtJs学习资料14-OOP[JavaScript面向对象编程]
extjs-theme-bootstrap-master.zip
ExtJs-4.1.1a-gpl+中午手册+入门教程