admin管理员组
文章数量:1539753

2024年7月4日发(作者：)

这种常见应用

布局：

Grid分页

级联：

代码如下：

* Ext JS Library 2.0.2

********************

*/license

y(function(){

// example of custom renderer function

function statusColor(val){

if(val == '在线'){

return '' + val + '';

}else if(val == '会议中'){

return '' + val + '';

}

return val;

}

// create the Data Store

var store = new ({

url:'',

storeId:'searchResult',

// create reader that reads the Topic records

reader: new ader({

totalProperty: 'totalrows',

root: 'data',

fields: [

{name: 'id', type:'int'},

'consumer',

'area',

'termid',

'name',

'status',

'udate'

]

})

// turn on remote sorting

// remoteSort: true

});

var sm = new oxSelectionModel();// 多选行

var cm = new Model([

new berer(),

sm,

{header:'序号',width:40,dataIndex:'id'},

{header:'用户',width:50,dataIndex:'consumer'},

{header:'地域',width:50,dataIndex:'area'},

{header:'终端编号',dataIndex:'termid'},

{header:'终端名称',dataIndex:'name'},

{header:'终端状态',dataIndex:'status',renderer: statusColor},

{header:'更新日期',dataIndex:'udate'}

]);

// tSortable = true;

// by default columns are sortable

tSortable = true;

var grid = new nel({

store: store,

cm: cm,

stripeRows: true,

height:350,

width:800,

title:'',

tbar: new Toolbar({

pageSize: 10,

width:'98%',

store: store,

// paramNames:{rowStart: 'start', rowLimit: 'limit'},

displayInfo: true,

displayMsg: '显示第 {0} 条到 {1} 条记录，共 {2} 条',

emptyMsg: "无记录"

})

});

// ('div-grid');

// ectionModel().selectFirstRow();

var consumerStore = getSelectStore("54");

var termTypeStore = getSelectStore("53");

var termStatusStore = getSelectStore("51");

// new Store({

// fields: ['text'],

// data : [['0','0'],['5','5'],['10','10'],['15','15'],['20','20']],

// fields:[{name: 'value', mapping: 0},{name:'text',mapping:1}],

// autoLoad:true

// })

var table = new ({

layout:'table',

defaults: {

bodyStyle.:'padding:1px'

layoutConfig: {

columns: 4

items: [{

width:165,

labelWidth:55,

items: [{

xtype:'textfield',

fieldLabel: '终端编号',

id:'termId',

anchor:'95%'

}]

},{

width:165,

labelWidth:55,

items: [{

xtype:'textfield',

fieldLabel: '终端名称',

id:'termName',

anchor:'95%'

}]

},{

width:165,

labelWidth:55,

items: [{

xtype:'textfield',

fieldLabel: '刷新延时',

id:'timeLapse',

anchor:'95%',

xtype:'combo',

store: new ({

proxy: new Proxy([['0','0'],['5','5'],['10','10'],['15','15'],['20','20']]),

reader: new eader({}, [

{name: 'value',mapping: 0, type: 'int'},

{name: 'text',mapping: 1}

]),

autoLoad:true

}) ,

displayField:'text',

valueField:'value',

hiddenName:'timeLapseValue',

typeAhead: true,

triggerAction: 'all',

forceSelection:true

}],

colspan:2

},{

width:165,

labelWidth:55,

items: [{

xtype:'textfield',

fieldLabel: '用户',

anchor:'95%',

id: 'consId',

xtype:'combo',

anchor:'95%',

store: consumerStore,

displayField:'text',

valueField:'value',

hiddenName:'consumerId',

typeAhead: true,

mode: 'local',

triggerAction: 'all',

forceSelection : true,

emptyText:'Select ',

allowBlank: false,

selectOnFocus:true,

forceSelection:true,

listeners:{

select:{

fn:function(combo,record,index) {

// ('','xxxxxxx');

var store = getSelectStore("55",('value'));

// (''+nt(),'xxxxxxxxx='+alCount());

('areaId').clearValue();

('areaId').store = store;

if(('areaId').view){

('areaId').re(store);

// ('areaId').h();

}

('areaId').enable();

}

}]

},{

width:165,

labelWidth:55,

items: [{

xtype:'textfield',

fieldLabel: '地域',

id:'areaId',

anchor:'95%',

xtype:'combo',

store: new (),

displayField:'text',

valueField:'value',

hiddenName:'consumerAreaId',

typeAhead: true,

mode: 'local',

triggerAction: 'all',

forceSelection : true,

emptyText:'Select ',

allowBlank: false,

selectOnFocus:true,

forceSelection:true,

disabled:true

}]

},{

width:165,

labelWidth:55,

items: [{

xtype:'textfield',

fieldLabel: '终端状态',

id:'termStatus',

anchor:'95%',

xtype:'combo',

store: termStatusStore,

displayField:'text',

valueField:'value',

hiddenName:'termStatusId',

typeAhead: true,

// {

// width:165,

// layout: 'form',

// labelWidth:55,

// items: [{

// xtype:'textfield',

// fieldLabel: '终端类型',

// name: 'termType',

// id:'termType',

// anchor:'95%',

// xtype:'combo',

// store: termTypeStore,

// displayField:'text',

valueField:'value',

hiddenName:'termTypeId',

typeAhead: true,

triggerAction: 'all',

forceSelection:true,

editable:false,

mode: 'local'

}]

// forceSelection:true,

// editable:false,

// mode: 'local'

// }]

// },

{

labelWidth:55,

items: [{

id: 'Save',

text: '查询',

xtype:'button'

}]

});

// ('div-grid');

var fp = new nel({

// labelAlign: 'top',

frame.:true,

title: '.',

bodyStyle.:'padding:5px 5px 0',

width: 800

});

(table);

(grid);

("div-form");

//增加基本参数

('beforeload', function(store) {

var para = {termId:'',termName:'',consumerId:'',areaId:'',termTypeId:'',tstatus:''};

= ('termId').getValue();

me = ('termName').getValue();

erId = ('consumerId').getValue();

= ('consumerAreaId').getValue();

s = ('termStatusId').getValue();

// peId = ('termTypeId').getValue();

(rams,para);

});

({params:{start:0, limit:10}});

("Save").on('click', function(){

({params:{start:0, limit:10}});

});

function getSelectStore(selectId,pid){

if(!pid) pid = '';

var store = new ({

proxy: new oxy({

method: 'GET',

url:

'../webapp-cfg/?selectId='+selectId+'&pvalue='+pid+'&random='+

dom()

}),

reader: new eader(

{id: "value"},

[

{name: 'value', mapping: 'value'},

{name: 'text',mapping:'text'}

]),

autoLoad:true

});

// var sss = new ();

();

('load', function( s, records, options ) {

var rs = new Array(1);

var all = new ([{name: 'value', mapping: 'value'},

{name: 'text',mapping:'text'}]);

('value','');

('text','全部');

rs[0] = all;

// (records);

// (0,rs);

(0,rs);

});

return store;

}

function rsubmit (response, options){

var dq = ry;

var url = l;

try{

var bj = (seText);

alert(obj);

}catch(e){

}

function rfailure(response){

}

此信息来自〖软工吧论坛〗

查看原网址:/htm_data/14/0805/

一. 需求

要求生成一颗部门树，初始只列出根部门

当点击一个部门节点时，动态载入该部门下的直属子部门，并展开该部门节点

部门节点要求支持右键单击事件，当点击右键时，列出相关操作菜单

二. 关键类

这里主要涉及Ext JS的两个类:

相关API可以参考：/deploy/ext/docs/

三. 代码示例

1. 先看一下测试页面

[复制此代码]CODE:

Reorder TreePanel

现在要生成一颗动态树

2. 再看一下生成树的函数

[复制此代码]CODE:

/***********************************

创建树

by chb

************************************/

function createTree(n){

();

var mytree=new nel({

el:"container",

animate:true,

title:"Extjs动态树",

collapsible:true,

enableDD:true,

enableDrag:true,

rootVisible:true,

autoScroll:true,

autoHeight:true,

width:"30%",

lines:true

});

//根节点

var root=new de({

id:"root",

text:"集团公司",

expanded:true

});

for(var i=0;i

var sub1=new de({

id:i+1,

text:"子公司"+(i+1),

singleClickExpand:true,

listeners:{

//监听单击事件

"click":function(node){

myExpand(node);

//监听右键

"contextmenu":function(node,e){

//列出右键菜单

menu=new ([

{

text:"打开当前节点",

icon:"",

handler:function(){

myExpand(node);

}

{

text:"编辑当前节点",

icon:"",

handler:function(){

alert();

}

{

text:"删除当前节点",

icon:"",

handler:function(){

alert();

}

}]);

//显示在当前位置

(nt());

}

});

Child(sub1);

}

tNode(root);//设置根节点

();//不要忘记render()下,不然不显示哦

}

3. 展开子节点的代码

[复制此代码]CODE:

/******************************************

展开节点

******************************************/

function myExpand(node){

if(=='1'){

if((0)==undefined){

Child(new de({

id:+'1',

text:+"的第一个儿子",

hrefTarget:"mainFrame",

listeners:{//监听

"click":function(node,e){

expand2(node)

}

}));

}

();

}else if(=='2'){

Child(new de({

id:+'2',

text:+"的第一个儿子",

hrefTarget:"mainFrame",

listeners:{//监听

"click":function(node){

expand2(node)

}

}));

}else{

alert(+"没有子部门了");

}

读者可以自己运行一下如上代码，会发现如下现象：无论点击“子公司1”多少次，只会列

出“子公司1的第一个儿子”一个节点，而每点击一次“子公司2”，就会多出一个“子公

司2的第一个儿子”节点，这是为什么呢？

因为每次点击都会激发myExpand函数，而“子公司1”上加了(0)==undefined的

判断，这里明白了？

即：如果该部门下没有子部门，则载入子部门，否则只展开，不重新载入。

好了，就到这里吧，困了，就不详细解释了o(∩_∩)o...哈哈

本文来自: 脚本之家() 详细出处参考：/article/

殷良胜



博客园

社区

首页

联系

管理

随笔- 78 文章- 0 评论- 498

【原】提高篇:第二十五篇,ext2.2打造全新功能grid系列--右键菜单篇

本文介绍如何在grid列表里在某行上面单击右键弹出菜单的功能

先看看效果图:

如上图所示,具体菜单的功能没有去实现,这里和前几篇的后台都极为类似,有需要后台代码的朋友只需要浏览前几篇即

可.

下面仅仅列出页面的设计代码

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="" Inherits=

"gridContextMenu" %>

1/DTD/">

无标题页

Tag标签: grid

posted @ 2008-10-31 13:35 殷良胜阅读(806) 评论(16) 编辑收藏网摘

发表评论

回复引用查看

#1楼 [楼主]2008-11-03 12:38 | 殷良胜

欢迎访问Ext小组:

/group/ext

回复引用

#2楼 2008-12-21 12:22 | 刘唤 [未注册用户]

一直不知道右键时的小图标怎么绑定的，

太感谢楼主了

回复引用

#3楼 2008-12-21 12:23 | 刘唤 [未注册用户]

我赞

回复引用查看

#4楼 [楼主]2008-12-22 11:32 | 殷良胜

@刘唤

谢谢支持

回复引用

#5楼 2008-12-23 10:15 | taorui [未注册用户]

博主这个例子中把MENU放在rowcontextmenu事件里定义的做法不可取,这样每点一次右键都会生成

一次MENU对象,很占内存的,建议把MENU的实例化放到rowcontextmenu事件外面.

回复引用查看

#6楼 [楼主]2008-12-23 11:55 | 殷良胜

@taorui

呵呵,有理!

回复引用

#7楼 2009-02-04 15:39 | 123123 [未注册用户]

问一下楼主，要是实例化在rowcontextmenu事件外面的话，点右键新打开窗口，要传关键字怎么办

回复引用

#8楼 2009-02-04 15:43 | 123123 [未注册用户]

因为先生成了menu,在按钮上写了handler:function(...){},而里面的参数是()var record =

re().getAt(rowIndex);产生的，怎么解决矛盾

回复引用查看

#9楼 [楼主]2009-02-04 17:31 | 殷良胜

@123123

要传关键字吗？

可以直接向下传即可

比如上例

("rowcontextmenu",function(grid,rowIndex,e)

{

tDefault();if(rowIndex<0){return;}

var treeMenu = new

([

{xtype:"button",text:"添加",icon:"Images/Icons/button/",pressed:true,handler:funct

ion(){}},

{xtype:"button",text:"编辑",icon:"Images/Icons/button/",pressed:true,handler:fu

nction(){}},

{xtype:"button",text:"隐藏",icon:"Images/Icons/",pressed:true,handler:func

tion(){}},

{xtype:"button",text:"显示",icon:"Images/Icons/",pressed:true,handler:functio

n(){}},

{xtype:"button",text:"删除",icon:"Images/Icons/button/",pressed:true, handler:fu

nction(){}},

{xtype:"button",text:"上传图片",icon:"Images/Icons/plugin_",pressed:true,handler:f

unction(){}}

]);

(nt());

});

要传关键字，只要写成这样即可

("rowcontextmenu",function(grid,rowIndex,e)

{

tDefault();if(rowIndex<0){return;}

var treeMenu = new

([

{xtype:"button",text:"添加",icon:"Images/Icons/button/",pressed:true,handler:funct

ion(grid,rowIndex){}},

{xtype:"button",text:"编辑",icon:"Images/Icons/button/",pressed:true,handler:fu

nction(grid,rowIndex){}},

{xtype:"button",text:"隐藏",icon:"Images/Icons/",pressed:true,handler:func

tion(grid,rowIndex){}},

{xtype:"button",text:"显示",icon:"Images/Icons/",pressed:true,handler:functio

n(grid,rowIndex){}},

{xtype:"button",text:"删除",icon:"Images/Icons/button/",pressed:true, handler:fu

nction(grid,rowIndex){}},

{xtype:"button",text:"上传图片",icon:"Images/Icons/plugin_",pressed:true,handler:f

unction(grid,rowIndex){}}

]);

(nt());

});

或者也可通过grid,rowIndex这两个关键字

获取具体的要传的数据放在handler:function(“要传的数据”){}即可

可以先尝试下

明天我会抽空尽量上传一个具体的完整的示例提供下载

回复引用

#10楼 2009-02-05 08:58 | 123123 [未注册用户]

谢谢楼主，提供一个思路，我的问题解决了，看到5楼的建议，我把menu实例化放在grid外面了，然

后在()里面动态通过监听添加menu按钮的事件。这样子每次点击行后，右键菜单中按钮的事件

添加完，就可以执行了

回复引用查看

#11楼 [楼主]2009-02-05 09:06 | 殷良胜

@123123

呵呵解决就好

回复引用

#12楼 2009-02-05 09:35 | 123123 [未注册用户]

楼主我碰到个棘手的问题，grid能正常显示数据，能正常分页，共78页，但是我点到第3页，就不会变

数据了，也就是说第3页数据没有正常显示。经过测试发现3-9，19，22，60-63，翻到这些页码都不

正常显示数据， start:0,limit:30，我直接拿start:60测试，理论上显示的是第3页的，结果是空白表

格这是为什么啊

回复引用

#13楼 2009-02-05 10:08 | 123123 [未注册用户]

上述问题找到原因了，数据库里的有个字段，内容是“ a"b"c ”，结果生成{"data":[{"id":"1","pname":

" a"b"c "}] }，请问怎么解决

回复引用查看

#14楼 [楼主]2009-02-05 10:09 | 殷良胜

@123123

能否将你的源代码张贴出来呢？

空想是要花很多时间的！

你说呢？

回复引用查看

#15楼 [楼主]2009-02-05 10:10 | 殷良胜

@123123

你的问题很有意思

回复引用查看

#16楼 [楼主]2009-02-05 10:11 | 殷良胜

--引用--------------------------------------------------

123123: 上述问题找到原因了，数据库里的有个字段，内容是“ a"b"c ”，结果生成{&qu

ot;data":[{"id":"1","pname":" a"b&qu

ot;c "}] }，请问怎么解决

--------------------------------------------------------

自己好好想想怎么替换里面的双引号吧

刷新评论列表

姓名

anson9918

[登录] [注册]请输入你的姓名

主页

(仅博主可见)邮件地址无效

验证码

* 看不清,换一张

内容(请不要发表任何与政治相关的内容) 请输入评论内容

网站首页

新闻频道

社区

小组

博问

网摘

人才

找找看

Remember Me?

提交

登录使用高级评论新用户注册返回页首恢复上次提交清除cookie

[使用Ctrl+Enter键可以直接提交]

该文被作者在 2009-02-05 16:43 编辑过

沪江网技术部招聘新成员啦！

新媒传信正在招聘

SQL Server 2005晚间培训课程(上海)

找找看

China-pub 计算机图书网上专卖店！6.5万品种 2-8折！

近千种 9-95 新二手计算图书火热销售中！

ExtJs+WCF+LINQ实现分页Grid

用ExtJs+Linq+Wcf打造简单grid

Microsoft .Net Remoting系列专题之一:.Net Remoting基础篇

ExtJS与.NET结合开发实例(Grid之数据显示、分页、排序篇)

Google关闭其中一家总部员工餐厅

红帽欲重新定义软件消费方式

服务端事件....

取不到值......

..........

笑死我了....

电子爱好者 - 最新技术资讯及电子产品介绍！

EXT动态添加组件

现在要生成一颗动态树