Extjs4 Treepanel中添加右击事件
2012-04-16 10:29
232 查看
Extjs4: 在Treepanel中右击树节点,触发的是itemcontextmenu函数。itemcontextmenu( Ext.view.View
this, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObject e, Object eOpts )
参数中 record
记录是当前节点的信息。
参数中的 EventObject e 里设置
e.stopEvent() 就可以把浏览器默认的右击事件屏蔽掉。
Extjs3 Treepanel中则是contextmenu contextmenu( Node node, Ext.EventObject e )
参数中node是当前节点的信息。似乎只要监听了,不用其它设置属性就能屏蔽浏览器默认右击事件。
3与4的函数不同,参数不同之外。保存的节点信息的对象也不同。 4里面是在【record.raw】这个对象里面,而3里面要获取当前节点信息是通过【node.attribute】
参考文章
http://www.blogjava.net/algz/articles/294297.html
extjs data-view 横排列
ExtJs Data-view 默认是横排列的 float:left 竖排列的原因是父容器的样式表没有正确加载
仔细读 官方 data-view.html 的例子。里面引用了一个 data-view.css 里面
#images-view .thumb-wrap{
float: left;
margin: 4px;
margin-right: 0;
padding: 5px;
}
# id . class
父级容器的 id = images-view 才能生效
如 data-view.js 中
Ext.create('Ext.Panel', {
id: 'images-view',
自己开发的 desktop.css 中需要引用这段 css 并且将父级 id 设为 images-view
var view = Ext.create('Ext.view.View', {
id:'images-view',
参考文章
http://www.17ext.com/showtopic-4804.aspx
如何为 data-view 设置右键菜单
参考文章
http://blog.sina.com.cn/s/blog_6543cca50100nj20.html
![](http://hiphotos.baidu.com/fenglei0213/pic/item/b69b4c082134a6f20b7b8250.jpg)
ExtJS 3 和 4 DataView 有区别
ExtJS 3
contextmenu
ExtJS 4
itemcontextmenu
4 的事件名字变了,参数个数和排列也变了
itemcontextmenu( Ext.view.View this, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObject e, Object options )
如何让右键单击空白处和右键单击文件夹的菜单不一样?
在监听中添加如下两个事件,后面为处理函数
containercontextmenu:containerRightClick,
itemcontextmenu:itemRightClick
function itemRightClick(dataView,records,items,node,e){
dataView.menu = Ext.create('Ext.menu.Menu', {
items:
[
{
text:'重命名'
},
{
text:'删除'
}
]
});
dataView.menu.showAt(e.getXY());
e.stopEvent();
}
function containerRightClick(dataView,e){
dataView.menu = Ext.create('Ext.menu.Menu', {
注意删掉这个判断,否则菜单创建一次之后,就不再改变了
if(!dataView.menu) {
this, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObject e, Object eOpts )
参数中 record
记录是当前节点的信息。
参数中的 EventObject e 里设置
e.stopEvent() 就可以把浏览器默认的右击事件屏蔽掉。
Extjs3 Treepanel中则是contextmenu contextmenu( Node node, Ext.EventObject e )
参数中node是当前节点的信息。似乎只要监听了,不用其它设置属性就能屏蔽浏览器默认右击事件。
3与4的函数不同,参数不同之外。保存的节点信息的对象也不同。 4里面是在【record.raw】这个对象里面,而3里面要获取当前节点信息是通过【node.attribute】
参考文章
http://www.blogjava.net/algz/articles/294297.html
extjs data-view 横排列
ExtJs Data-view 默认是横排列的 float:left 竖排列的原因是父容器的样式表没有正确加载
仔细读 官方 data-view.html 的例子。里面引用了一个 data-view.css 里面
#images-view .thumb-wrap{
float: left;
margin: 4px;
margin-right: 0;
padding: 5px;
}
# id . class
父级容器的 id = images-view 才能生效
如 data-view.js 中
Ext.create('Ext.Panel', {
id: 'images-view',
自己开发的 desktop.css 中需要引用这段 css 并且将父级 id 设为 images-view
var view = Ext.create('Ext.view.View', {
id:'images-view',
参考文章
http://www.17ext.com/showtopic-4804.aspx
如何为 data-view 设置右键菜单
参考文章
http://blog.sina.com.cn/s/blog_6543cca50100nj20.html
![](http://hiphotos.baidu.com/fenglei0213/pic/item/b69b4c082134a6f20b7b8250.jpg)
ExtJS 3 和 4 DataView 有区别
ExtJS 3
contextmenu
ExtJS 4
itemcontextmenu
4 的事件名字变了,参数个数和排列也变了
itemcontextmenu( Ext.view.View this, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObject e, Object options )
如何让右键单击空白处和右键单击文件夹的菜单不一样?
在监听中添加如下两个事件,后面为处理函数
containercontextmenu:containerRightClick,
itemcontextmenu:itemRightClick
function itemRightClick(dataView,records,items,node,e){
dataView.menu = Ext.create('Ext.menu.Menu', {
items:
[
{
text:'重命名'
},
{
text:'删除'
}
]
});
dataView.menu.showAt(e.getXY());
e.stopEvent();
}
function containerRightClick(dataView,e){
dataView.menu = Ext.create('Ext.menu.Menu', {
注意删掉这个判断,否则菜单创建一次之后,就不再改变了
if(!dataView.menu) {
相关文章推荐
- extjs ext.tree.panel 添加监听事件
- extjs4 treepanel左右键事件
- ExtJs4问题笔记(一) 为treePanel 添加加载动画
- ExtJS4 Toolbar添加与事件监听
- AJAX-TabPanel -事件的添加
- Extjs5.0(5):为项目添加左侧导航栏(treepanel)
- c# TableLayoutPanel控件应用 动态添加控件及事件
- asp.net mvc + ExtJs 实现无限级TreePanel 加载、添加、编辑、删除
- EXTJS4 tabpanel添加网页标签
- 我自己写的关于EXTJS的TreePanel、viewPort和tabPanel动态切换和添加tabpanel的例子
- Extjs4 treePanel异步加载菜单(后台从数据库读取)
- Extjs4-treepanel-解析json/fields中是否加入leaf的区别
- Extjs 4.0.7 gridPanel记录添加右键菜单事件
- 为Ext.form.Panel的xtype:label添加事件
- 编写Extjs treepanel的节点展开事件
- ExtJS4 border layout 左侧treePanel 中间 panel
- ExtJS4 TreePanel 加载数据 J2EE
- ExtJs 4.x 学习小记:动态添加节点到Ext.tree.Panel
- 动态添加tab(ext中的treePanel)
- Panel 上添加了很多control,如何避免Panel的click事件被拦截