(1)快速定位,根据node.id
注： ext 树的节点如果不展开,数据是获取不到的( getnodebyid() 报异常)，即使你load了数据不展开节点前，一样获取不到。
var node=treepanel.getnodebyid(node_id);
注: 虽然能解决(1)中取不到数据的问题,但访问速度慢,而且级联查找时会层层扩展开.
treepanel.getrootnode().cascade(function(n) {
]]>
具体描述：
表格第一列（其它列也行）为类型选择列，采用combobox为编辑器，当选择某一类型（如：类型1）时表格当前行的某些列（如：第2列~第4列）就变为不可编辑状态，并显示不同的样式（类似于button的disable）。
当选择其它类型（如：类型2）时表格当前行的不可编辑单元格又变成可编辑的。
(1)
是否可编辑样式可以在列模型的renderer中操作
renderer : function(data, meta){
if(xxx){
meta.css = " x-item-disabled";
}
}
(2)
是否可编辑逻辑可以在grid的beforeedit事件中拦截判断
grid.on("beforeedit", function(e){
/*
e = {
grid: this,
record: r,
field: field,
value: r.data[field],
row: row,
column: col,
cancel:false
};
*/
if(xxx){
return false; // 中止，不让编辑
}
});
]]>
listview 处理日期采用tbl模板显示其日期样式,gridpanel采用renderer属性 ext.util.format.daterenderer(...)函数.
listview
{
xtype : "listview",
columns : [{
header : "项目",
width : .6,
dataindex : "projectnam"
}, {
width : .25,
header : "发布时间",
dataindex:"lastdate",
tpl: '{lastdate:date("m/d/y")}'
}],
store : new ext.data.jsonstore({
autoload:"true",
url:"/xtad/testext/data/waitfortask.jsp",
fields : ['projectnam', {
name : 'lastdate',
type:"date",
dateformat:'m/d/y'
}]
})
}
gridpanel
{
xtype : "grid",
cm : new ext.grid.columnmodel([
new ext.grid.rownumberer({
header : "no.1"
}), {
header : "项目",
dataindex : "projectnam"
}, {
header : "发布时间",
dataindex : "lastdate",
renderer: ext.util.format.daterenderer('m d/y')
}]),
store : new ext.data.jsonstore({
autoload:"true",
url:"/xtad/testext/data/waitfortask.jsp",
fields : [{
name : "projectnam"
},{
name : "lastdate",
type:"date",
dateformat: 'm/d/y'
}]
})
}
collapsemode:'mini',
2.标准伸缩(面板缩放后点击,则临时弹出组件,鼠标移出则自动缩放):
collapsible:true,
3.仅点击"<<"箭头才能伸缩(不存在临时弹出组件):
floatable: false,
collapsible:true,
url:"pages/myworks/mywork_left.jsp",
scripts:true
}
问题:
(1)不含脚本的加载页面,执行没问题;
(2)加载页中含有脚本可能会报80020101错误
解决方法如下:
"url":需加载的页面,如加载页中含有extjs脚本,应去掉extjs核心文件,以免与父页面冲突.
"scripts:true":执行页面js 代码 ,如果加载组件是panel,ie 报错:80020101,解决方法:更改为formpanel,详细bug内容见:
http://www.extjs.com/forum/showthread.php?90401-internet-explorer-error-80020101-after-framepanel-loaded
原因：
所有的jsp文件在响应给用户时都会编译成servlet，执行其中所有的jsp脚本或el表达式，并由java输出流转化成html文本代码response响应给客户端，所以浏览器接收到的只是html页面。而外部js文件与html一起响应给客户端，并在本地组装在一起，所以
在有javascript脚本中有时不方便引用acegi标签，可以从securitycontextholder中获得权限集合，然后判断当前登录的用户，其权限集合中是否有某权限，根据判断结果来决定显示或隐藏哪些页面元素，见下面的jsp:
<%@ page contenttype="text/html; charset=gbk"%>
<%@ taglib uri="/web-inf/struts-html.tld" prefix="html" %>
<%@ taglib uri="/web-inf/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/web-inf/struts-logic.tld" prefix="logic"%>
<%@ taglib uri="http://acegisecurity.sf.net/authz" prefix="authz"%>
<%@ page import="org.acegisecurity.authentication" %>
<%@ page import="org.acegisecurity.context.securitycontext" %>
<%@ page import="org.acegisecurity.context.securitycontextholder" %>
<%@ page import="org.acegisecurity.userdetails.userdetails" %>
<%@ page import="org.acegisecurity.ui.accessdeniedhandlerimpl" %>
<%@ page import="org.springframework.aop.framework.proxyfactorybean"%>
<%@ page import="org.springframework.context.applicationcontext"%>
<%@ page import="org.springframework.context.support.classpathxmlapplicationcontext"%>
<%@ page import="org.acegisecurity.grantedauthority"%>
<%@ page import="com.mysoft.common.validateacegiauth"%>
<%
securitycontext ctx = securitycontextholder.getcontext();
%>
。。。
下面是validateacegiauth类的代码：
package com.mysoft.common;
import org.acegisecurity.authentication;
import org.acegisecurity.context.securitycontext;
import org.acegisecurity.context.securitycontextholder;
import org.acegisecurity.userdetails.userdetails;
import org.acegisecurity.ui.accessdeniedhandlerimpl;
import org.springframework.aop.framework.proxyfactorybean;
import org.springframework.context.applicationcontext;
import org.springframework.context.support.classpathxmlapplicationcontext;
import org.acegisecurity.grantedauthority;
/**
* 验证权限集合中是否有某一权限
* @author bzwang
*
*
*/
public class validateacegiauth
{
/**
*验证权限集合中是否有某一权限
* @param ctxloginuser securitycontext
* @param sauthid 权限id
* @return boolean 是否有指定的权限
*/
public static boolean validate(securitycontext ctxloginuser,string sauthid)
{
boolean bool = false;
authentication authloginuser = null;
grantedauthority[] arrayauthorities = null;
if(ctxloginuser!=null)
{
authloginuser = ctxloginuser.getauthentication();
if(authloginuser!=null)
{
arrayauthorities = authloginuser.getauthorities();
for(int i=0;i
{
if(arrayauthorities[i].tostring().equals(sauthid))
{
bool = true;
break;
}
}
}
else
{
bool = false;
}
}
else
{
bool = false;
}
return bool;
}
}
var groupingview = new ext.grid.groupingview({
// grouptexttpl : '{text} ({[values.rs.length]}
// {[values.rs.length > 1 ? "items" : "item"]})',//
// 强制(width)填充
forcefit : true,
// 是否在首部group位置显示列名
showgroupname : false,
// 是否在列菜单中显示"show in group"选择(功能:是否以组方式显示)
enablenogroups : true,
// 是否在列菜单中显示"groupby this
// field"选择(功能:更换分组字段排版)
enablegroupingmenu : false,
// 是否在列中隐藏分段的字段头(列头)
hidegroupedcolumn : true
});
store : new ext.data.groupingstore({
reader : new ext.data.jsonreader({
fields : ['project', 'img',
'title', 'responsedate']
}),
// 本地数据加载
data : [{
id : 1,
project : '重要消息',
img : "
",title : '功能完善中1...',
responsedate : "2009-01-01"
}, {
id : 2,
project : '普通消息',
img : "
",title : '功能完善中2...',
responsedate : "2009-01-01"
}],
sortinfo : {
field : 'project',
direction : 'desc'// 降序'asc':升序
},
// 组存在的情况下,是否按组排序(默认为false,否)
grouponsort : true,
groupfield : 'project'
})
},
定义ie8 文本模式为ie8
ie8 文本模式为杂项(quirks):无定义状态
(2)ie8 浏览器中,对于extjs tabpanel在ie8中tab标签选中时,标签底部没有效果显示
原因:文本模式为杂项,extjs无法判断ie浏览器版本,也就无法在
html元素的标准事件是指mouseover、mousedown、click、 blur、focus、change等。在extjs中，这些事件的处理如下：
- 注册一个事件处理函数使用： ext.get('myelement').on('click', myhandler, myscope) myelement是要注册的元素的id，click是事件的名称（注意，和html元素中的声明onxxx不同，这里不需要on），myhandler 是处理函数的函数名称，myscope是一个可选的参数，指定处理函数绑定的对象，也就是处理函数的作用域，如果不提供这个参数，则是默认的 window。
- 撤销一个事件处理函数： ext.get('myelement').un('click', myhandler, myscope) 参数的意义同上。
extjs 会根据不同的浏览器进行相应的处理，支持多浏览器。事件处理函数的参数只能参考extjs的文档了，必要时还得参考源代码。
2. 处理自定义事件
在extjs中使用自定义事件，需要从ext.util.observable继承，示例代码如下：
employee = function(name){ this.name = name; this.addevents({ "fired" : true, "quit" : true }); } ext.extend(employee, ext.util.observable, { ... });
在这段代码中，定义了一个employee类，定义了fired和quit两个事件。如何触发这两个事件呢，基类 ext.util.observable提供了触发自定义事件的方法fireevent(eventname, arg1, arg2, ... argn), eventname是要触发的时间的名称（不区分大小写），后面的参数arg1，arg2等是要传给事件处理函数的参数。用上面的employee类做示例，触发quit事件：
this.fireevent('quit', this);
这行代码将触发quit事件，并将empolyee类的实例传给quit事件的处理函数，quit事件的订阅可以采用如下代码：
function myhandler1(empolyee){ ... } function myhandler2(empolyee){ ... } var emp = new empolyee('tom'); emp.on('quit', myhandler1); emp.on('quit', myhandler2);
在上面的代码中，为quit事件注册了两个处理函数（myhandler1与myhandler），当quit事件被激发时，将会依次调用 myhandler1和myhandler2两个函数。
值得注意的是，不管是html元素的标准事件还是自定义事件，如果为某个时间注册了多个处理函数，如前面的例子，如果myhandler1返回 false的话，则会取消在myhandler1之后注册的处理函数的执行，即该事件被取消，从而停止继续执行该事件的处理函数，而这个返回值false 会作为事件激发的结果，返回给empolyee，即：
var result = this.fireevent('quit', this); if (result === false) { alert('event canceled'); //这里表示事件被某个处理函数取消 } else { alert('event complete'); // 这里表示事件执行完毕 }
通过ext的自定义事件的机制，可以实现一对多的观察者模式，也可以实现一对一的绑定模式，这一点，在extjs的开发中是很重要的。
renderto:"content11",
el: "content11-title"
********************************************************
id:"box",
renderto:"content11",
//el: "content11-title"
********************************************************
id : "box",
renderto : "content11-title"//,
// el: "content11-title"
********************************************************
id : "box",
contentel: "content11-title",
renderto : "content11"//,
id : "box",
contentel: "content11-title",
renderto : "content11"//,
// consume json of this form:
{
"images":[
{
"name":"dance_fever.jpg", "size":2067, "lastmod":1236974993000, "url":"images\/thumbs\/dance_fever.jpg"
}, { "name":"zack_sink.jpg", "size":2303, "lastmod":1236974993000, "url":"images\/thumbs\/zack_sink.jpg" } ]
} var store = new ext.data.jsonstore({ url: 'get-images.php', root: 'images', fields: [ 'name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date', dateformat:'timestamp'} ]});store.load();var listview = new ext.listview({ store: store, multiselect: true, emptytext: 'no images to display', reservescrolloffset: true, columns: [{ header: 'file', width: .5, dataindex: 'name' },{ header: 'last modified', width: .35, dataindex: 'lastmod', tpl: '{lastmod:date("m-d h:i a")}' },{ header: 'size', dataindex: 'size', tpl: '{size:filesize}', // format using ext.util.format.filesize() align: 'right' }]});// put it in a panel so it looks prettyvar panel = new ext.panel({ id:'images-view', width:425, height:250, collapsible:true, layout:'fit', title:'simple listview (0 items selected)', items: listview});panel.render(document.body);// little bit of feedbacklistview.on('selectionchange', function(view, nodes){ var l = nodes.length; var s = l != 1 ? 's' : ''; panel.settitle('simple listview ('l' item's' selected)');});
panel default default custom additional additional
element element class element class style
======== ========================== ========= ============== ===========
header div basecls '-header' headercfg headercssclass headerstyle
bwrap div basecls '-bwrap' bwrapcfg bwrapcssclass bwrapstyle
tbar div basecls '-tbar' tbarcfg tbarcssclass tbarstyle
body div basecls '-body' bodycfg bodycssclass bodystyle
bbar div basecls '-bbar' bbarcfg bbarcssclass bbarstyle
footer div basecls '-footer' footercfg footercssclass footerstyle
basecls :"content11",
content11-header-text" id="ext-gen11">content11
headercssclass :"content11",
content11
var store = new ext.data.jsonstore({
url: 'get-images.php',
root: 'images',
fields: [
'name', 'url',
{name:'size', type: 'float'},
{name:'lastmod', type:'date', dateformat:'timestamp'}
]
});
store.load();
var tpl = new ext.xtemplate(
'for=".">' ,
'"thumb-wrap" id="{name}">',
'"thumb">"{url}" title="{name}">',
'"x-editable">{shortname}',
'',
'"x-clear">'
);
var panel = new ext.panel({
id:'images-view',
frame:true,
width:535,
autoheight:true,
collapsible:true,
layout:'fit',
title:'simple dataview',
items: new ext.dataview({
store: store,
tpl: tpl,
autoheight:true,
multiselect: true,
overclass:'x-view-over', //鼠标悬停item时的类样式,defaults to undefined
itemselector:'div.thumb-wrap', //必须项,值为item选择器,此值也可为.thumb-wrap e.g. div.some-class
//:'x-view-selected', //(默认名)defaults to 'x-view-selected',但仍必须写此类的css内容
emptytext: 'no images to display'
/*
plugins: [
new ext.dataview.dragselector(),
new ext.dataview.labeleditor({dataindex: 'name'})
],*/
preparedata: function(data){ //数据预处理,即数据处理前.data为原始数据,类型为对象.
data.shortname = ext.util.format.ellipsis(data.name, 15); //指定字符串为15个字符,超出部分用三个圆点代替.
// data.sizestring = ext.util.format.filesize(data.size);
// data.datestring = data.lastmod.format("m/d/y g:i a");
return data;
},
listeners: {
selectionchange: { //结点的选择发生改变时,即重新选择结点时,可以更改为selectionchange:function(dv,nodes)...
fn: function(dv,nodes){
var l = nodes.length;
var s = l != 1 ? 's' : '';
panel.settitle('simple dataview (' l ' item' s ' selected)');
}
}
})
});
panel.render(document.body);
dataview 用store提供的数据流，采用tpl的格式显示，itemselector的值为数据流中块的css类选择器，对块操作时更换其css类样式,如鼠标悬停在块上和块被选定时的css类样式;简单点说,就是有利于对数据流中的块好控制操作.
tpl定义的块：<div id="zack_hat.jpg" class="thumb-wrap">
鼠标悬停时的块（overclass）：<div id="zack_hat.jpg" class="thumb-wrap x-view-over">
点击被选中的块（selectedclass）：<div id="kids_hug2.jpg" class="thumb-wrap x-view-selected">
1.当鼠标点击数据流中某一块时，块增加selectedclass定义的类样式，如没定义类名,即采用默认的类名'x-view-selected'（css内容依然为空,仍需手写,只是类名必须为此）；
2.用overclass定义的css类样式，鼠标悬停在块(div)上，更换其css类样式.
3.dataview.store.filter(f1,f2):从store中查找f1字段,与f2匹配(不完全匹配相同)过滤,重新本地加载数据.
4.dataview.store.store(f1,'asc'/'desc'):store的内容按f1的值排序.
5.dataview.store.clearfilter():清除过滤状态.还原初始.
6.dataview.select(n):更换第n个块的css类样式.
(二)html:
-->
blogjava-凯发k8网页登录
loading...
