- 浏览: 267507 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
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 7101在项目使用borderLayout Panel时 ... -
实现Ext表单对checkBoxGroup的统一管理
2009-09-10 11:48 23871 对于类型是checkboxgroup的数据,数据库中保存数 ... -
CheckboxSelectionModel全选后,点击下一页时还原到未选中状态
2009-05-18 16:30 3558在Grid的中使用了CheckboxSelectionMode ... -
Ext2.2 iframe的刷新问题
2009-04-22 10:37 2296在 EXT2.0运行正常的程序,调换 EXT2.2 的脚本之后 ... -
左侧菜单
2009-03-20 18:33 2946自己写了一个菜单,不是很灵活,只支持到三层的树,使用了一点ex ... -
TreeGrid
2009-03-11 16:20 16821TreeGrid.js原路径:http://www.extjs ... -
Ext2-资料篇
2009-03-11 14:00 1384EXT GWT 官方网站: http://extjs.co ...
相关推荐
本篇文章将详细解析EXTJS中的上传组件及其示例,帮助开发者更好地理解和使用这一功能。 EXTJS 的上传组件通常通过`Ext.form.field.File`(也称为FileField或UploadField)实现。这个组件提供了一个表单字段,用户...
在这个"Extjs增删改查示例"中,我们将探讨如何使用ExtJS与etmvc(一个基于ExtJS的MVC模式扩展)和MySQL数据库配合,实现Web应用中的基本数据操作。 首先,ExtJS的MVC模式是其架构的核心部分,它将应用程序分为Model...
在"extjs3.x 官方示例以及chm版api"这个资源中,包含了两个关键部分:官方示例和CHM版API文档。 首先,让我们深入探讨ExtJS 3.x 的核心知识点: 1. **组件体系**:ExtJS 3.x 提供了一个组件化的UI框架,包括各种...
`GridComboBox` 结合了 `ComboBox` 和 `GridPanel` 的特性,允许用户在一个下拉菜单中浏览和选择多行数据。 1. **Extjs4 的 ComboBox** - `ComboBox` 是EXTJS中的一个基础组件,它提供了文本输入框和下拉列表的...
例如,`Ext.grid.Panel`用于创建网格,`Ext.form.Panel`用于创建表单,而`Ext.window.Dialog`则用于弹出对话框。这些组件可以通过配置项自定义样式、行为,甚至可以实现复杂的布局和数据绑定。 在EXTJS与asp.net的...
总结来说,这个示例展示了如何使用ExtJs 3.3动态加载Grid数据,涉及的主要组件包括数据模型、Action、Struts2配置和GridPanel。通过合理的配置和组件组合,可以构建出高效的动态加载数据的Web应用。
【描述】中的"封装的extjs2.0"表明该示例集是将ExtJS 2.0的功能与C#编程语言相结合,创建了一个易于理解和使用的框架。"很经典的"意味着这些示例在当时可能是非常流行和实用的,对于学习和掌握ExtJS控件的用法有很高...
这些示例涵盖了EXTJS4的各种组件和功能,包括表格(Grid)、面板(Panel)、表单(Form)、菜单(Menu)、工具栏(Toolbar)、树形视图(Tree)、图表(Charts)等。通过运行示例,你可以直观地看到组件的外观和交互...
1. **EXTJS组件库**:EXTJS 提供了多种组件,如表格(Grid)、表单(Form)、树形视图(Tree)、面板(Panel)等,它们都可以被用来构建用户界面。在增删改查的场景中,表格组件通常用于展示数据,而表单组件用于...
总结来说,`account_manager`示例展示了如何使用ExtJS 4.2.0的MVC模式来构建一个账户管理系统,包括数据模型、数据存储、用户界面和逻辑控制。通过这种结构,开发者可以高效地组织代码,提高项目的可维护性和可扩展...
5. **API使用**:熟悉ExtJS 4.1提供的各种类库,如Grid、Panel、Window、Form等,以及它们的方法和属性。 6. **主题和皮肤**:了解如何自定义ExtJS的外观,包括使用SASS和Compass工具来修改主题。 7. **MVC模式**...
通过学习和分析这些示例,开发者可以深入理解如何在实际项目中使用ExtJS构建复杂的表单和Grid,以及如何与ASP.NET后端进行有效集成。这将有助于提升Web开发技能,特别是对于那些希望在企业级应用开发中使用...
2. **组件使用**:ExtJS 提供了各种组件,如 Grid(表格)、Panel(面板)、Form(表单)、Tree(树形结构)等,后台模板会使用这些组件创建常见的功能模块。例如,Grid 用于显示和操作数据,Panel 用于组织内容,...
EXTJS提供了一系列丰富的组件,如Grid、Tree、Form等,这些组件可以直接绑定到模型或商店,实现数据的动态渲染。视图也可以通过事件监听器与控制器进行通信。 **5. Controller** 控制器是EXTJS MVC的核心,它负责...
例如,可以使用ExtJS的Grid Panel展示来自ASP.NET的数据,使用Form Panel进行数据的输入和提交,而这一切都通过Ajax请求与服务器进行通信。 标签"extjs"和"extjs_网站"进一步强调了这个项目的核心内容是关于ExtJS的...
ExtJS 是一个强大的JavaScript前端框架,它提供了丰富的用户界面组件,包括树形控件(tree)、表格(grid)和表单(form)。本实例“ext实例 左边是 tree 右边是grid 双击grid弹出form修改”是针对初学者的一个宝贵...
这个示例提供了一个完整的系统,可以立即运行,展现了SSH(Spring、Struts2和Hibernate)与ExtJS4.0的深度集成。下面我们将深入探讨这两个框架的核心概念以及它们如何协同工作。 首先,SSH是Java Web开发中的三大...
首先,EXTJS 3.0的核心库包含了大量的UI组件,如表格(Grid)、表单(Form)、树形视图(Tree)、菜单(Menu)、工具栏(Toolbar)等。这些组件都是基于EXTJS的组件模型构建的,具有高度可配置性和可扩展性。开发者...
在本文中,我们将深入探讨`ExtJS`框架中的两个关键组件——`Ext日期时间控件`和`Spinner控件`,以及它们在`Grid`中的应用。`ExtJS`是一款强大的JavaScript库,专用于构建富客户端应用程序,尤其适用于创建复杂的、...
它提供了一整套组件化的用户界面元素,包括Panel、Window、Tree、Grid、Form和Store等,这些都是ExtJS的核心组件。本文将详细讲解这些知识点,帮助无论是初学者还是有一定基础的学习者提升在ExtJS开发中的技能。 ...