EXT各个控件属性6.docx
- 文档编号:6295510
- 上传时间:2023-01-05
- 格式:DOCX
- 页数:29
- 大小:27.71KB
EXT各个控件属性6.docx
《EXT各个控件属性6.docx》由会员分享,可在线阅读,更多相关《EXT各个控件属性6.docx(29页珍藏版)》请在冰豆网上搜索。
EXT各个控件属性6
ext3.1全选/反选/取消/临时数据集
1.定义数据集
/*默认源字符串*/
varRegular_Data={
totalProperty:
2,
root:
[]
}
/*临时数据源*/
varRegular_store=newExt.data.Store({
proxy:
newExt.data.MemoryProxy(),
reader:
newExt.data.JsonReader({
root:
'root',
totalProperty:
'totalProperty',
fields:
[
{name:
'Regular_name', type:
'string'}
]
})
});
Regular_store.loadData(Regular_Data);
2.临时数据集添加数据
varData_1001=Ext.data.Record.create([
{name:
'Regular_name'}
]);
vara=SmRegulartree.getSelections();
Ext.each(a,function(item,index,allItems){
varfoundItem=Regular_store.find('Regular_name',item.data.name);
if(foundItem ==-1){
Regular_store.add(newData_1001({Regular_name:
item.data['name']}));
}
});
3.全选反选取消
bbar:
[{
text:
'全选',
handler:
function(){
varcount=Regular_store.getCount();
if(count>0){
vara=newArray();
for(vari=0;i a[i]=i; } } regularg1.getSelectionModel().selectRows(a); } },'-',{ text: '反选', handler: function(){ vartrims=""; varstr=""; varid=""; varcount=Regular_store.getCount(); if(count>0){ vara=newArray(); for(vari=0;i a[i]=Regular_store.data.items[i].id+"-"+i; } } varlist2=regularg1.selModel.getSelections(); for(vark=0;k str=a[k].split("-"); for(varj=0;j id=list2[j].id.split("-"); if(str[2]==id[2]){ break; } } if(j continue; } if(trims! =''){ trims+=','; } trims+=k.toString(); } regularg1.getSelectionModel().selectRows(trims);//Ext.MessageBox.alert('提示',result); } },'-',{ text: '取消', handler: function(){ regularg1.getSelectionModel().clearSelections(); } }] grid表格的操作 行选择模式: Js代码 varrowcount=grid.getSelectionNode().getSelections(); varrowcount=grid.getSelectionNode().getSelections(); 可以获取全部选中的记录,得到的rowcount将是一个Array,比如想获取sex列的数据,语句如下 Js代码 varstrsex=rowcount[i].get(‘sex’); varstrsex=rowcount[i].get(‘sex’); 单元格选择模式 如果在GridPanel的配置属性增加sm属性如下 Js代码 sm: newExt.grid.CellSelectionModel(); sm: newExt.grid.CellSelectionModel(); 则表格的选择模式为单元格选择模式。 当单击时将选中对应的某一个单元格,而不是默认的选择某一行。 选择方式如下 Js代码 varcell=grid.getSelectionNode().getSelectedCell(); varcell=grid.getSelectionNode().getSelectedCell(); 得到的cell记录了当前选择的行(cell[0])以及列(cell[1]).可以通过一下语句得到该单元格数据 Js代码 varcolname=grid.getColumnModel().getDataIndex(cell[1]); //获取列名 varcelldata=grid.getStore().getAt(cell[0]).get(colname);//获取数据 varcolname=grid.getColumnModel().getDataIndex(cell[1]); //获取列名 varcelldata=grid.getStore().getAt(cell[0]).get(colname);//获取数据 getStore(): 获取表格的数据集 getAt(): 获取该数据集cell[0]行 get(): 获取该行colname的数据 2)为表格增加链接 有时我们需要为表格中的某一列添加一个链接。 可以利用renderer配置属性为该列添加html 如下: {id: '3',header: '名称',dataIndex: 'name',renderer: DomUrl}, 定义DomUrl方法 Js代码 functionDomUrl(value){ return" } functionDomUrl(value){ return" } 如果表格内的数据是一个链接如: 这样写法自然没有问题,但是大多数时候我们在表格中不会直接写一个链接,如果又需要根据单元格内容动态为链接添加几个参数。 那这种写法就几乎没有什么用了。 因为这个属性是在表格初始化的时候定义好的,而且表格初始化之后这个属性无法改变,也就是只读属性。 处理方法如下: 定义一个全局变量,初始值为0;DomUrl函数如下 Js代码 functionDomUrl(value){ varrow=grid.getSelectionModel().selectRow(startrow);//选中当前行 varrownum=grid.getSelectionModel().getSelected();//获取当前行 startrow++; varstrurl="abc.jsp? id="+rownum.get('id');//获取当前选中行的值,并组织链接字符串 return" } functionDomUrl(value){ varrow=grid.getSelectionModel().selectRow(startrow);//选中当前行 varrownum=grid.getSelectionModel().getSelected();//获取当前行 startrow++; varstrurl="abc.jsp? id="+rownum.get('id');//获取当前选中行的值,并组织链接字符串 return" } 不过不要忘记在下次提交的时候将startrow赋值为0。 3)表格的属性 表格的属性分为配置属性(在操作表格时无法修改),以及其他可读写属性,方法,以及事件。 如下: 配置属性 a)activeItem: 渲染布局时激活的子元素。 b)applyTo: 指定渲染对象。 c)autoDestroy: 当容器的子元素从容器中移除时是否自动销毁。 d)autoExpandColumn: 指定自动填充表格剩余区域的列id e)autoExpandMax: 可自动扩张的最大宽度。 f)autoExpandMin: 可自动扩张的最小宽度 g)autoHeight: 自动扩充高度 h)autoShow: 是否自动显示 i)autoWidth: 自动扩充宽度 j)bbar/tbar: 底部/顶部状态栏 k)bufferResize: 容器再布局的缓冲频率 l)colModel/cm: 列模式 m)cls: 组件的额外css格式。 n)collapsible: 是否显示快捷隐藏按钮 o)defaults: 指定默认配置。 p)disableSelection: 是否禁止选择表格行或列 q)enableDragDrop: 是否允许表格列的拖放操作。 r)enableHdMenu: 是否显示表格列的菜单。 s)frame: 边框是否显示 t)loadMask: 是否显示加载动画 u)selModel/sm: 表格选择模式 v)store: 表格数据集 w)stripeRows: 是否显示分隔线。 x)title: 表格标题 方法 a)getColumnModel(): 得到表格列模型 b)getGridEl(): 得到表格下的元素 c)getPosition(): 得到组件的当前位置,返回一个数组 d)getSelectionModel(): 得到选中模型 e)getSize(): 得到组件大小 f)getStore(): 得到组件的数据集 g)getView(): 得到表格的GridView对象。 h)hide(): 隐藏当前组件 i)isVisible(): 判断当前组件是否显示 j)setDisabled(Boolean): 设置组件的可用性 k)un(): 解除组件的监听 l)on(): 为组件添加监听 on(StringeventName,Functionhandler,[Objectscope]) eventName: 添加监听的名称 handler: 事件处理函数 scope: 事件响应的作用域,包括scope,delay,single,buffer。 布局嵌套横向摆放组件 Ext.onReady(function(){ Ext.QuickTips.init(); //初始化提示信息 varsimple=newExt.FormPanel({ //xtype: "form", renderTo: 'div', id: 'form', //title: '测试', labelWidth: 55, align: "center", //style: 'margin: 10auto;align: center', width: 850, height: 320, //border: false, //不显示边框 //定义表单元素 items: [{ xtype: 'panel', layout: 'table', frame: false, //渲染面板 defaults: { //设置默认属性 bodyStyle: 'borderColor: #FFFFFF', //设置面板体的背景色 align: "center" }, border: false, items: [{ xtype: 'panel', layout: 'form', items: [{ fieldLabel: '待处理', id: 'userId', name: 'userId',//元素名 allowBlank: false, //不允许为空 xtype: 'textarea', width: 300, height: 200 }] }, { xtype: 'panel', layout: 'form', items: [{ fieldLabel: '结果集', id: 'username', name: 'username',//元素名 xtype: 'textarea', width: 300, height: 200 }] }] }], buttons: [{ text: '执行', type: 'submit', handler: function(){ varname=$('#userId').val(); Ext.MessageBox.alert('提示',name);//取值方式一 if(simple.form.isValid()){ varuserId=Ext.getCmp("userId").getValue().toUpperCase();//取值方式二 Ext.getCmp('username').setValue(userId);//赋值 } } },{ text: '重置', handler: function(){ simple.form.reset(); //重置表单 } }] }); varformPanel=newExt.form.FormPanel({ layout: 'form',//可不写,默认 renderTo: 'div1', //border: false, width: 800, height: 200, items: [{ layout: 'column', border: false, items : [ { columnWidth: .3, layout: 'form', border: false, items: [{fieldLabel: '待处理',xtype: 'textfield'},{fieldLabel: '待处理',xtype: 'textfield'},{fieldLabel: '待处理',xtype: 'textfield'}] }, { columnWidth: .3, layout: 'form', border: false, items: [{fieldLabel: '待处理',xtype: 'textfield'},{fieldLabel: '待处理',xtype: 'textfield'},{fieldLabel: '待处理',xtype: 'textfield'}] }, {
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- EXT 各个 控件 属性