- 浏览: 263978 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
xurun:
点击节点的时候出错,怎么办??1120行,data为空为或不是 ...
TreeGrid -
QQ371496669:
引用load方式检索不到的话会抛出org.hibernate. ...
Hibernate中No row with the given identifier exists -
汽车城路:
我现在正在使用这个Extjs,目前也遇到了这个问题,就是怎么换 ...
ext使用--Panel和iframe联合使用时页面高度的解决方法 -
jsjzhou:
有必要. 在实际项目我们就采用了HttpUrlConnecti ...
HttpURLConnection VS HttpClient性能测试 -
小猪笨笨:
不错,通俗易懂
在oracle中创建unique唯一约束(单列和多列)
<script type="text/javascript"> //页面布局开始 //初始化 var queryForm; Ext.onReady(function(o){ // 因为我采用的是内嵌的ifram,所以这行为设定父panel的高度,根据页面显示内容调整自定义页面高度 parent.tabs.setHeight(574); // 绘制表单 paintForm(); // 绘制内容展示区 centerPanel = new Ext.Panel( { region :'center', // 当父panel布局为borderLayout时,必须有center region,否则将抛出异常 monitorResize :true, // 适应屏幕大小 border :false, // 不显示边框 style:'margin:3px 0 0 0;', // 设置上边距为3个像素 items : [{ id :'centerPanel', //名称可任意指定 header:false, // 不显示该panel的 title项 border:false, contentEl:'mainDiv' // 必须要有此项,当items里没有item项时,必须使用contentEl指定一个已存在的元素作为容器 }] }); // 从这里开始绘制页面,Viewport的默认容器为body var layout = new Ext.Viewport( { layout :'border', // 布局样式,类似swing的布局,分为上左中右下五个区域 defaults : {border :false}, // 设置全局样式 items : [queryForm, centerPanel] // 包含queryForm(north)和centerPanel(center)两个panel。 }); //调用绘制列表的方法 list(); }); // 绘制查询表单 function paintForm(){ //绘制下拉选择框,也可使用ComboBox的store对象的loadData方法动态加载选择项 var checkStateCombo = new Ext.form.ComboBox({ store:new Ext.data.SimpleStore({ fields: ["value", "text"], data: [['0','全部'],['3','违规'],['1','未审核'],['4','非违规']] }), valueField :"value", // 这两项要与上面的fields对应 displayField: "text", mode: 'local', // 数据从本地获取 blankText:'请选择', emptyText:'------', triggerAction: 'all', // 显示全部选择项 fieldLabel: '审核状态', name: 'torrentQuery.checkState', hiddenName:'torrentQuery.checkState', // 每个元素必须有hiddenName项,form对象读取的值是跟此项关联的,命名规则取决于你与action之间的传值策略,这里使用的是VO注入。 anchor:'100%' }); var orderCombo = new Ext.form.ComboBox({ store:new Ext.data.SimpleStore({ fields:["value","text"], data:[['downloadNum','排序A],['detectedTime','排序B]] }), valueField :"value", displayField: "text", mode: 'local', blankText:'请选择', emptyText:'------', triggerAction: 'all', fieldLabel:'排序方式', name: 'torrentQuery.orderBy', hiddenName:'torrentQuery.orderBy', value:'downloadNum', anchor:'100%' }); var sortCombo = new Ext.form.ComboBox({ store:new Ext.data.SimpleStore({ fields:["id","text"], data:[['desc','倒序'],['asc','正序']] }), valueField :"id", labelSeparator:"", displayField: "text", mode: 'local', blankText:'请选择', emptyText:'------', value:'desc', triggerAction: 'all', hiddenName:'torrentQuery.sortBy', fieldLabel:'', name: 'torrentQuery.sortBy', anchor:'100%' }); queryForm = new Ext.FormPanel({ height: 60, labelAlign: 'right', region:'north', buttonAlign:'right', labelWidth:70, border: false, header:false, frame:false, monitorResize:true, items:[{ layout:'column', // 布局为一列 ctCls:'form-bg', // 自定义父元素的样式 border:false, items:[{ columnWidth:.3, // 列宽为百分之30% layout: 'form', border:false, items: [{ id:'remark', xtype:'textfield', fieldLabel: '名称', name: 'torrentQuery.remark', hiddenName:'torrentQuery.remark', anchor:'100%', allowBlank:true // 允许为空 }] },{ columnWidth:.3, layout: 'form', border:false, items: [{ id:'sitename', xtype:'textfield', fieldLabel: '网站', name: 'torrentQuery.siteName', hiddenName:'torrentQuery.siteName', anchor:'100%', allowBlank:true }] },{ columnWidth:.25, layout: 'form', labelWidth:80, border:false, items: [ { id:'detectedTimeStart', xtype:'datefield', fieldLabel: '发现时间从', name: 'torrentQuery.detectedTimeStart', hiddenName: 'torrentQuery.detectedTimeStart', readOnly:true, // 设置为只读 maxValue:new Date(), // 设置最大值 format:'Y-m-d', anchor:'98%', value:'', allowBlank:true }] },{ columnWidth:.15, layout: 'form', border:false, labelWidth:10, labelSeparator:" ", items: [ { id:'detectedTimeEnd', xtype:'datefield', fieldLabel: '到', name: 'torrentQuery.detectedTimeEnd', hiddenName:'torrentQuery.detectedTimeEnd', readOnly:true, maxValue:new Date(), format:'Y-m-d', anchor:'100%', allowBlank:true }] } ,{ columnWidth:.3, layout:'form', border:false, items:[checkStateCombo] },{ columnWidth:.2, layout: 'form', border:false, labelWidth:70, labelSeparator:":", items: [orderCombo] },{ columnWidth:.1, layout: 'form', border:false, labelWidth:10, labelSeparator:" ", items: [sortCombo] },{ columnWidth:.2, layout: 'form', border:false, labelWidth:80, items:[{ xtype: 'radiogroup', fieldLabel: 'SELECT', // 单选框 items: [ {boxLabel: 'B',name:'torrentQuery.B', inputValue: 0}, {boxLabel: 'E', name:'torrentQuery.E',inputValue: 1} ] }] },{ columnWidth:.04, layout: 'form', border:false },{ layout:'form', columnWidth:.09, border:false, items:[{ xtype:'button', text:' 检索 ', cls:'w-btn', handler: list }] },{ layout:'form', columnWidth:.07, border:false, items:[{ xtype:'button', text:' 重置 ', cls:'w-btn', handler: function(){conditionForm.form.reset();} }] }] }] }); } // 绘制列表 function list(){ // 表单验证检查 if(!queryForm..form.isValid()){ Ext.Msg.alert('提示信息', '表单数据格式有误,请检查后重新查询。'); return; } if(queryForm.form.findField('torrentQuery.detectedTimeStart').getValue()!='' && queryForm.form.findField('torrentQuery.detectedTimeEnd').getValue()!=''){ if(queryForm.form.findField('torrentQuery.detectedTimeStart').getValue().getTime() > query.form.findField('torrentQuery.detectedTimeEnd').getValue().getTime()){ Ext.Msg.alert("提示信息","发现时间的起始时间大于结束时间,请重新输入!"); return; } } // 构造数据源 var ds = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({url:'${ctx}/torrent/manage!list.action'}), // 向action层传递参数,Ext提供的工具可以方便的将form中的值组装成json对象传到后台 baseParams:Ext.decode(Ext.encode(queryForm.form.getValues())), method: 'post', reader:new Ext.data.JsonReader( { root:'result', id:'id', totalProperty: 'totalCount' }, [ {name:"id"}, // 当name与返回数据的的JSON串的Element一致时,无须使用mapping属性,默认类型为string {name:"name"}, {name:"siteName"}, {name:"downloadNum",type:"int"}, //对于需要排序的数据,需要加上type属性指定具体数据类型 {name:"siteId"}, {name:"btEmule"} ] )}); // 构造多选框 var sm = new Ext.grid.CheckboxSelectionModel({ dataIndex: 'id', width: 20 }); // 构造列表的显示项 var cm = new Ext.grid.ColumnModel([ sm, { header:"名称", width:160, dataIndex:"name", align:"left" //renderer:addTooltip // 可以将结果重新绘制,传入6个参数,详细参考api }, { header:"网站", width:60, dataIndex:"siteName", //renderer:addUnderline, align:"left" }, { header:"下载次数", width:40, sortable:true, dataIndex:"downloadNum", align:"center" },{ header:"详情", width:40, dataIndex:"id", align:"center", renderer:detailStyle } ]); paintGrid(ds,cm,sm); } // 绘制表格或称为组装 function paintGrid(ds,cm,sm){ // 清空容器 Ext.get('mainDiv').dom.innerHTML=""; grid = new Ext.grid.GridPanel({ id:'resultGrid', el:'mainDiv', // 已存在的元素,与centerPanel对应同一容器,这样这个grid就会被绘制到centerPanel中去。 autoScroll:true, header: false, store: ds, cm: cm, sm: sm, height: document.body.clientHeight - 63, width: document.body.clientWidth, border: false, monitorResize:true, enableColumnHide:false, // 不允许隐藏列,用于避免列表的监听事件错位 enableColumnMove:false, // 不允许移到列 trackMouseOver:false, //鼠标滑动变色 默认false loadMask: true, // 加载时显示遮罩 listeners:{cellclick:renderPage}, // 添加监听事件 viewConfig: { forceFit: true, // 自动计算列宽以适应当前panel大小 columnsText:'选择列', // 默认为英文 sortAscText:'正序排列', sortDescText:'倒序排列' }, bbar: new Ext.PagingToolbar({ // 分页信息显示 pageSize: 15, store: ds, displayInfo: true, displayMsg: '显示第{0} - {1}条记录,总共{2}条记录,共{3}页', // 这里的信息重写了,原实现只有三个占位符,根据需要来定 emptyMsg: "没有结果显示", items:[{ xtype:'button', text:'导出查询结果', iconCls: 'addmenu', // 自定义图标样式 handler: exportResult // 自定义执行动作 },'-' ] }) }); grid.render(); ds.load({params:{start:0, limit:15}}); // 加载数据 } // 鼠标点击触发事件 function renderPage(grid, rowIndex, columnIndex, e){ var id = grid.getStore().getAt(rowIndex).data['id']; switch(columnIndex){ case 12: detail(id); break; case 13: alert('其它操作…'); break; …… default: break; } } </script>
顺便加一句:
formPanel里的Combo控件有一个bug,当id与hiddenName同时存在的时候,下拉框的位置会不对,用的时候只需要写入name和hiddenName就行了,hiddenName必须保留,因为在baseForm.getValue的时候,读的是这个属性。
发表评论
-
ext使用--Panel和iframe联合使用时页面高度的解决方法
2009-10-13 17:24 7052在项目使用borderLayout Panel时 ... -
实现Ext表单对checkBoxGroup的统一管理
2009-09-10 11:48 23461 对于类型是checkboxgroup的数据,数据库中保存数 ... -
CheckboxSelectionModel全选后,点击下一页时还原到未选中状态
2009-05-18 16:30 3504在Grid的中使用了CheckboxSelectionMode ... -
Ext2.2 iframe的刷新问题
2009-04-22 10:37 2264在 EXT2.0运行正常的程序,调换 EXT2.2 的脚本之后 ... -
左侧菜单
2009-03-20 18:33 2915自己写了一个菜单,不是很灵活,只支持到三层的树,使用了一点ex ... -
TreeGrid
2009-03-11 16:20 16772TreeGrid.js原路径:http://www.extjs ... -
Ext2-资料篇
2009-03-11 14:00 1353EXT GWT 官方网站: http://extjs.co ...
相关推荐
extjs grid示例代码extjs grid示例代码extjs grid示例代码extjs grid示例代码
EXTJS4 GRID 表格 分页 编辑 添加判断 颜色判断 分组 等示例
extjs4 grid 包括form js代码
Ext各种组件的使用实例,Extjs tree+grid+form+panel 使用实例
EXTJS 上传组件及示例EXTJS 上传组件及示例EXTJS 上传组件及示例
Extjs6 最简单的示例java版Extjs6 最简单的示例java版Extjs6 最简单的示例java版Extjs6 最简单的示例java版Extjs6 最简单的示例java版Extjs6 最简单的示例java版
EXTJS 折线 chart action 代码示例 1.远程加载数据(两种方法) 2.本地加载数据 3.完整示例,实例 4.后台为JAVA代码
ExtJS grid过滤操作,可以动态操作本地的store更改筛选的内容
Extjs动态Grid的生成 htm
Extjs 中想改变grid 行高,如果只是简单的设置了height的值是可以实现grid 的行高,但是如果使用了插件:rowexpander ,最出现新的问题。 感兴趣的朋友可以试试的。 此文档可以解决你的烦恼,为了找到资源下载,...
这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹,其余文件过大并且与主题无关,因此未包含。具体方法,请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》
extjs4打印grid插件,官网上的一个例子程序,有需要的人可以下载来看看。
自己写的一个Extjs Grid2Grid拖拽
ASP.NET结合EXTJS动态生成Grid列表的例子程序源码
apache 根目录包含: extjs 4.0.7 的文件夹,再新建一个测试用的文件夹 test-form, 根目录的目录列表如下所示: ext-4.0.7-gpl test-form/ test-form 文件夹里的列表如下所示,即为解压后的测试示例代码。 test-...
extjs-form组件配置参数详解 extjs各种组件说明
ExtJS示例,Grid的使用,Panle的使用,树的使用
extjs editgrid示例代码extjs editgrid示例代码extjs editgrid示例代码extjs editgrid示例代码
Extjs4下拉菜单中用Grid显示,有单选,和多选两个控件,完美通用代码控件,绝对让你好用,值得收藏^-^
swfupload.js与extjs整合由于与浏览器兼容性不好,后改为webuploader,图片上传示例,加入到grid列表,显示相关的状态信息,例子简单修改一下即可使用,extj所有版本都类似。注:IE中测试需要部署在服务器下,上传...