- 浏览: 342294 次
- 性别:
- 来自: 武汉
-
最新评论
-
ynymf：
错位问题看这里：http://www.cnblogs.com/ ...
EXTJS制作的嵌套表格实例(点击一行，展开下面的子表) -
xlshlr：
code.php在哪？？？？貌似么有找到这个文件
ExtJS带验证码登录框[新增回车提交] -
langfeng123ac：
二货，这种写法本地又不行，本地有图片，服务器上又没图片。。浪费 ...
JQUERY+ASP.NET的AJAX文件上传（含Demo） -
553718707：
楼主有没有解决方法啊？
EXTJS制作的嵌套表格实例(点击一行，展开下面的子表) -
553718707：
这个代码对于，子表格的列数很多的时候会出现子表格的列与数据行错 ...
EXTJS制作的嵌套表格实例(点击一行，展开下面的子表)
这几天赶着做一个B/S系统，基于ExtJs框架，从中学了不少东西，今天写的高级查询界面感觉比较有意义，很多人应该也用得着，特拿出来共享一下。当然没正式完工，余下与服务器交互、Lookup列表、取生成查询条件一部分没有完成，做得有点腻了，先放出来，曾经做过的不妨交流一下。
界面：
代码：
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><title>XXXX系统V1.0</title>
<meta name="Author" contect="彭国辉">
<meta name="Keywords" content="blog:http://blog.csdn.net/nhconch" />
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="resources/css/hndc.css">
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="source/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif';
Ext.onReady(function () {
var dsPQ=new Ext.data.JsonStore({
fields:["idx","relation","leftParenthesis","fieldname","operator","value","rightParenthesis"]
});
var fieldsDef = new Ext.data.JsonStore({
fields: ['value','text','type'],
data:[
{value:'A.Billno',text:'预约单号',type:'string'},
{value:'A.Date',text:'时间',type:'date'},
{value:'A.boolean',text:'布尔',type:'boolean'},
{value:'A.int',text:'整形',type:'int'},
{value:'A.float',text:'浮点',type:'float'},
{value:'A.lookup',text:'Lookup',type:'lookup',data:[[1,'list1'],[2,'list2'],[3,'list3']]}
]
});
var numericOp = datetimeOp = new Ext.data.SimpleStore({
fields: ['value','text'],
data : [['=','='],['<>','<>'],['<','<'],['<=','<='],['<','>'],['>=','>='],['is null','空白'],['is not null','非空白']]
});
var stringOp = new Ext.data.SimpleStore({
fields: ['value','text'],
data : [['=','='],['<>','<>'],['<','<'],['<','>'],
['like |%','以...开头'],['like %|','以...结尾'],['like %|%','包含字符'],['not like %|%','不包含字符'],
['is null','空白'],['is not null','非空白']]
});
var lookupOp = booleanOp = new Ext.data.SimpleStore({
fields: ['value','text'],
data : [['=','='],['<>','<>'],['is null','空白'],['is not null','非空白']]
});
var objGridTextEditor = new Ext.grid.GridEditor(new Ext.form.TextField());
//var objGridMemoEditor = new Ext.grid.GridEditor(new Ext.form.TextArea());
var objGridDateEditor = new Ext.grid.GridEditor(new Ext.form.DateField({format:'Y-m-d'}));
var objGridIntegerEditor = new Ext.grid.GridEditor(new Ext.form.NumberField({allowBlank:false,allowNegative:false,allowDecimals:false}));
var objGridFloatEditor = new Ext.grid.GridEditor(new Ext.form.NumberField({allowBlank:false,allowNegative:false}));
var objGridBooleanEditor = new Ext.grid.GridEditor(new Ext.form.ComboBox({
store: [[true,'是'],[false,'否']],
mode: 'local',
readOnly: true,
triggerAction: 'all',
allowBlank: false,
editable: false,
forceSelection: true,
blankText:'请选择...'
}));
var objGridLookupEditor = new Ext.grid.GridEditor(new Ext.form.ComboBox({
//store: [],
mode: 'local',
readOnly: true,
triggerAction: 'all',
allowBlank: false,
editable: false,
forceSelection: true,
blankText:'请选择...'
}));
function fileListChange(field,newValue,oldValue){
//alert(field);
}
function findRecordValue(store,prop, propValue,field){
var record;
if(store.getCount() > 0){
store.each(function(r){
if(r.data[prop] == propValue){
rrecord = r;
return false;
}
});
}
return record ? record.data[field] : '';
}
function displayOperator(v){
switch(v){
case 'is null': return '空白';
case 'is not null': return '非空白';
case 'like |%': return '以...开头';
case 'like %|': return '以...结尾';
case 'like %|%': return '包含字符';
case 'not like %|%': return '不包含字符';
default: return v;
}
}
function displayValue(v, params, record){
var dataType = findRecordValue(fieldsDef,'value',record.get('fieldname'),'type');
var operator = record.get('operator');
if (operator=='is null'||operator=='is not null') return '';
switch(dataType){
case 'date': return v ? v.dateFormat('Y-m-d'): '';
case 'boolean': return (v?'是':'否');
default: return v;
}
}
var qRowData = Ext.data.Record.create([
{name:'idx',type:'int'},
{name:'relation',type:'string'},
{name:'leftParenthesis',type:'string'},
{name:'fieldname',type:'string'},
{name:'operator',type:'string'},
{name:'value',type:'string'},
{name:'rightParenthesis',type:'string'}
]);
var dsPQ=new Ext.data.JsonStore({
data:[],
fields:["idx","relation","leftParenthesis","fieldname","operator","value","rightParenthesis"]
});
var colM=new Ext.grid.ColumnModel([
{
header:"关系",
dataIndex:"relation",
width:50,
renderer: function(v){return (v=='and'?'并且':'或者')},
editor:new Ext.form.ComboBox({
store: [['and','并且'],['or','或者']],
mode: 'local',
readOnly: true,
triggerAction: 'all',
allowBlank: false,
editable: false,
forceSelection: true,
blankText:'请选择'
})
},{
header:"括号",
dataIndex:"leftParenthesis",
width:40,
editor:new Ext.form.ComboBox({
store: ['(','((','((','(((','(((('],
mode: 'local',
triggerAction: 'all',
valueField: 'value',
displayField: 'text',
editable: false
})
},{
header:"字段名",
dataIndex:"fieldname",
width:130,
renderer: function(v){return findRecordValue(fieldsDef,'value',v,'text');},
editor:new Ext.form.ComboBox({
store: fieldsDef,
mode: 'local',
triggerAction: 'all',
valueField: 'value',
displayField: 'text',
editable: false,
listeners:{change:fileListChange}
})
},{
header:"运算符",
width:80,
dataIndex:"operator",
renderer: displayOperator
},{
header:"内容",
dataIndex:"value",
width:130,
renderer: displayValue
},{
header:"括号",
width:40,
dataIndex:"rightParenthesis",
editor:new Ext.form.ComboBox({
store: [')','))',')))','))))'],
mode: 'local',
triggerAction: 'all',
valueField: 'value',
displayField: 'text',
editable: false
})
}
]);
var grdDPQuery = new Ext.grid.EditorGridPanel({
height:500,
width:490,
renderTo:"hello",
cm:colM,
sm:new Ext.grid.RowSelectionModel({singleSelect:false}),
store:dsPQ,
region:'center',
border: false,
enableColumnMove: false,
enableHdMenu: false,
loadMask: {msg:'加载数据...'},
clicksToEdit:1,
tbar:[
{text:'添加',handler:function(){
var count = dsPQ.getCount();
var r = new qRowData({idx:dsPQ.getCount(),relation:'and',leftParenthesis:'',fieldname:'',operator:'=',value:'',rightParenthesis:''});
dsPQ.commitChanges();
dsPQ.insert(count,r);
}
},
{text:'删除',handler:function(){
//store = grid.getStore();
var selections = grdDPQuery.getSelectionModel().getSelections();
for(var i = 0; i < selections.length; i++){
dsPQ.remove(selections[i]);
}
}
},
{text:'全部清除',handler:function(){dsPQ.removeAll();}}
],
listeners: {
afteredit: function(e){
if (e.column==2/*e.field=='fieldname'*/){
var oldDataType = findRecordValue(fieldsDef,'value',e.originalValue,'type');
var newDataType = findRecordValue(fieldsDef,'value',e.value,'type');
if (oldDataType!=newDataType){
e.record.set('operator', '=');
e.record.set('value', '');
}
}
},
cellclick: function(grid, rowIndex, columnIndex, e){
if (columnIndex!=3&&columnIndex!=4) return;
var record = grid.getStore().getAt(rowIndex); // Get the Record
//var fieldName = grid.getColumnModel().getDataIndex(columnIndex); // Get field name
//var data = record.get(fieldName);
var dataType = findRecordValue(fieldsDef,'value',record.get('fieldname'),'type');
if (dataType=='') return;//未选定字段，退出
if (columnIndex==3){//绑定运算符
var grdEditor = grid.colModel.getCellEditor(columnIndex,rowIndex);
if (grdEditor) grdEditor.destroy();
var _store;
switch(dataType){
case 'string': _store = stringOp; break;
case 'date': _store = datetimeOp; break;
case 'boolean': _store = booleanOp; break;
case 'int':
case 'float': _store = numericOp; break;
case 'lookup': _store = lookupOp; break;
}
grdEditor = new Ext.form.ComboBox({
store: _store,
mode: 'local',
triggerAction: 'all',
valueField: 'value',
displayField: 'text',
editable: false
})
grid.colModel.setEditor(columnIndex, new Ext.grid.GridEditor(grdEditor));
}
else if (columnIndex==4){//绑定编辑器
var operator = record.get('operator');
if (operator=='is null'||operator=='is not null'){
grid.colModel.setEditor(columnIndex, null);
return;
}
var grdEditor;
switch(dataType){
case 'string': grdEditor = objGridTextEditor; break;
case 'date': grdEditor = objGridDateEditor; break;
case 'boolean': grdEditor = objGridBooleanEditor; break;
case 'int': grdEditor = objGridIntegerEditor; break;
case 'float': grdEditor = objGridFloatEditor; break;
case 'lookup': grdEditor = objGridLookupEditor; break;
}
if (grid.colModel.getCellEditor(columnIndex,rowIndex)!=grdEditor){
grid.colModel.setEditor(columnIndex, grdEditor);
}
}
}
}
});
});
</script>
</head><div id="hello"></div><body>
</body></html>
文章出处：DIY部落(http://www.diybl.com/course/1_web/javascript/Javascriptxl/2008921/144280.html)
发表评论
-
浅谈Coolite 方法调用
2009-06-13 08:24 2880今天需要做个复选框删除,碰到了一个小难题,然后我一通乱写,居然 ... -
ExtJS Loading 悬浮层
2009-06-08 11:45 4220<!DOCTYPE html PUBLIC &q ... -
Ext中TreePanel控件和TabPanel控件搭配测试
2009-03-23 08:58 2648在实际的项目中，左边树形菜单，提供各种功能点击，右边一个面板， ... -
ExtJs grid使用详细［转］
2009-03-08 21:36 89412008-11-20 09:09 Ext ... -
ExtJS带验证码登录框[新增回车提交]
2009-03-08 21:29 7034/** 用户带验证码登 ... -
ExtJs2.0学习系列(14)--Ext.TreePanel之第三式(可增删改的树)
2009-03-04 19:28 1449继续tree的learn! 今天就来个可增删改的树吧,操作数 ... -
extjs中 combobox级联
2009-03-04 19:13 7337关键字: extjs, combobox, 级 ... -
ext动态新增一行之二
2009-03-03 10:39 1444ext 动态 新增行 新增一行(2)------------- ... -
ext动态新增一行
2009-03-03 10:37 1564ext 动态 新增行 新增一行(1)------------- ... -
ext表单之高级选项
2009-03-03 10:36 1164ext表单之高级选项--------------------- ... -
ext实现标签式浏览内容
2009-03-03 10:31 1509Ext.onReady(function(){ E ... -
ext异步树加入子节点事件
2009-03-03 10:30 2144extext异步树加入子节点 ... -
实现Ext combox 动态数据加载
2009-03-02 20:37 2480核心代码如下：（注意名称的对应！） 服务器生成的json数据形 ... -
解决TreeNode.reload()失效的办法
2009-03-02 20:36 3881Ext Api文档里面 TreeNode.reload()是没 ... -
Ext2.0的通用grid包括（增、删、改、查、导出excel）
2009-03-02 20:32 2865下面为扩张grid的 代码/** * @a ... -
ext构造自己的组件
2009-03-02 20:16 1333/*** @title:新闻中心模块* @au ... -
Ext.Window
2009-02-28 17:19 2119var winUpload = new Ext.Window( ... -
ExtJs中的树分析及实现
2009-02-27 18:12 2296<网上抄录> 首先我们来看日志分类树,这一部分我将 ... -
扩展EXTJS框架的内容检查
2009-02-27 10:36 1059Ext.apply(Ext.form.VTyp ... -
EXT中也有支持快捷键
2009-02-26 10:00 2392EXT中也有支持快捷键，比如回车，ESC等，你可以通过按钮 ...
相关推荐
- `extjs/ext-all.js` 或 `extjs/ext-core.js`：根据需求选择引入完整库或仅核心库。 配置BLANK_IMAGE_URL是解决图像路径问题的一个常见步骤，例如： ```javascript Ext.BLANK_IMAGE_URL = "/images/s.gif"; ``` ...
本项目是一个基于JSP技术开发的WEB版QQ聊天程序，其用户界面采用了EXTJS框架，提供了美观且交互友好的体验。EXTJS是一个强大的JavaScript库，专为构建富客户端应用程序而设计，它提供了丰富的组件库，可以方便地创建...
在"基于EXTJS框架的工作流设计器"中，EXTJS主要用于构建用户界面。EXTJS的组件模型允许开发者构建复杂的交互式UI，包括表格、树形视图、表单、面板等。工作流设计器的前台界面很可能使用了EXTJS的GridPanel、...
基于extjs框架实现的双日历功能
在这个场景中，"自定义高级查询Extjs"指的是利用Ext JS框架来构建这样的功能。Ext JS是一个流行的JavaScript库，用于创建富客户端应用程序，特别是与数据展示和操作相关的Web应用。 1. **Ext JS简介** - Ext JS...
EXTJS框架是一款基于JavaScript的富客户端应用开发框架，主要用于构建桌面级的Web应用程序。它以其强大的组件库、优雅的MVC架构以及丰富的UI控件而备受开发者青睐。EXTJS的核心特性包括可拖拽布局、数据绑定、强大的...
基于ThinkPHP和ExtJS框架开发的全功能CRM企业管理软件系统PHP源码|ERP管理系统源码
基于ExtJs的框架允许开发者将应用拆分为独立、可重用的组件，便于团队协作和后期维护。 2. **数据绑定**：ExtJs提供了强大的数据绑定机制，能自动同步视图和模型之间的数据，简化了数据管理。 3. **高级组件**：...
在这个例子中，我们将深入探讨如何利用SSH整合来实现一个登录功能，并且这个功能的前端界面是通过ExtJS库创建的。 1. **Spring框架**：Spring是核心的依赖注入（DI）和面向切面编程（AOP）框架，它管理着应用中的...
本项目是一款基于ExtJS框架的文档生成器设计源码，综合运用Java、CSS、JavaScript、HTML和Shell等多种编程语言，总计包含365个文件，其中243个为GIF图像，57个为Java源文件，17个为PNG图片，9个为PSD设计文件，8个为...
ExtJS是一个很不错的Ajax框架，可以用来开发带有华丽外观的富客户端应用，使得我们的b/s应用更加具有活力及生命力。ExtJS是一个用javascript编写，与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java...
使用ASP.NET和ExtJS开发的教务系统框架，能够实现后台的数据处理和管理，以及前台的交互式界面展示，确保教务人员和学生能够方便地访问和操作各种信息。 综上所述，这个源码包提供了一个结合了ASP.NET和ExtJS技术的...
Extjs框架基础.pptExtjs框架基础.ppt
ASP.NET多层架构与EXTJS框架的结合在CRM系统中的应用是一个高级的开发技术组合，旨在提供高效且用户友好的客户关系管理解决方案。这个压缩包文件"CrmpProject"很可能包含了一个完整的CRM系统的源代码和相关资源，让...
【基于ExtJS技术与SSH框架的权限管理研究】 在信息化高度发展的今天，社区管理信息平台的建设至关重要。这种平台需要处理大量的信息，有效管理和分析，以满足不断增长的服务和管理需求。权限管理作为社区信息平台的...
extjs框架、实例。从入门到深入的全部例子
EXTJS框架简介里包含各种EXT框架案例，快速上手EXT之宝典
EXTJS是一种基于JavaScript的富客户端应用开发框架，由Sencha公司开发。它提供了一套完整的组件模型、数据绑定机制、事件处理系统以及丰富的用户界面组件，使得开发者可以构建出功能强大的Web应用程序。EXTJS框架...
基于 Extjs + spring + hibernate 的OA框架 基于 Extjs + spring + hibernate 的OA框架 基于 Extjs + spring + hibernate 的OA框架
用extjs框架与go的iris框架进行搭建的一个基础性用户管理系统。 本次的侧重点主要放在Extjs框架的搭建 实现功能： 1.用户登录退出 2.用户信息管理模块 运用extjs框架很好的呈现用户信息，实现分页排序等功能 3....