取消 nestedlist 点击弹出 detailcard 事件,主要就是把detailcard 设置为null 即可;

2024-05-16 12:08
文章标签 设置 即可 事件 主要 点击 取消 null detailcard nestedlist

本文主要是介绍取消 nestedlist 点击弹出 detailcard 事件,主要就是把detailcard 设置为null 即可;，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！ 

主要就是把detailcard 设置为null 即可; 
我的app.js
// 上传完成之后跳转回之前的页面;用于接收之前的路径;
var parentPath = "/";
var url = window.location.href;// 所有的从其他地方来的似乎都会影响;
if (url != null && url != "" && url != undefined) {
var temp = 'parentpathfromuploadfile=';
var aa = url.indexOf(temp.length + 1);
if (aa > 0) {
url = url.substring(aa + 1);
parentPath = url;
}
};
// ----------------- 上传文件;
var flag = true; // 用於判斷是否改變 btn 的值; 也就是显示上传还是选择图片
function getFilePathFromDialog() {
if (flag) {
document.getElementById('fileBrowser').click();
document.getElementById('filePath').value = document
.getElementById('fileBrowser').value;
// document.getElementById('btn').value='上传图片';
Ext.getCmp('btn').setHtml('开始上传');
flag = false;
} else {
// index.html
// if(document.getElementById('filePath').value==null||
// document.getElementById('filePath').value==''||
// document.getElementById('filePath').value==undefined){
// Ext.Msg.alert("上传失败, 文件大小不能为空并且不能超过2M ");
// return;
// }
try {
// if(document.getElementById('filePath').value==null||
// document.getElementById('filePath').value==''||
// document.getElementById('filePath').value==undefined){
// flag=true;
// Ext.getCmp('btn').setHtml('选择文件');
//          
// return ;
//          
// }
document.getElementById('uploadForm').submit();
Ext.getCmp('btn').setHtml('选择文件');
flag = true;
// Ext.Msg.alert("上传成功 ");
var nestedList = Ext.getCmp('nestedlistid');
var nestedListstore = nestedList.getStore();
var beforeLength = nestedListstore.data.items.length;
// alert("before=="+beforeLength);
nestedListstore.setProxy({
type : 'ajax',
url : "'/TouchOnline/findAllResourceAction.action?id=01",
extraParams : {
parent : parentPath
},
reader : {
type : 'json',
root : ''
}
});
nestedListstore.load();
var afterlength = nestedListstore.data.items.length;
document.getElementById('filePath').value == '';
} catch (err) {
Ext.Msg.alert("上传失败, 文件大小不能为空并且不能超过2M ")
}
}
}
function uploadSuccess(msg) {
if ('fail' == msg) {
Ext.Msg.alert("上传失败, 文件大小必须在0~2M之间")
} else if ('success' == msg) {
Ext.Msg.alert("上传成功!!!");
}
// if (msg.split('|').length > 1) {
// $('#imgShow').attr('src', msg.split('|')[1]);
// $('#uploadLog').html(msg.split('|')[0]);
// Ext.Msg.alert(msg);
// Ext.Msg.alert("上传成功!!!");
// } else {
// $('#uploadLog').html(msg);
// Ext.Msg.alert("上传失败,请检查文件大小!!!");
// }
}
Ext.Loader.setPath({
'Ext' : '../../src' // 设置Ext代表../../src
// ,
,
'Ext.ux' : '../../src/ux'
});
// </debug>
Ext.application({
// name : 'Sencha',
name : 'Fileup',
controllers : ['Main'],
// controllers : ['Main'],// 设置控制层;
startupImage : {
'320x460' : 'resources/startup/Default.jpg', // Non-retina
'640x920' : 'resources/startup/640x920.png', // Retina iPhone
'640x1096' : 'resources/startup/640x1096.png', // iPhone 5 and
'768x1004' : 'resources/startup/768x1004.png', // Non-retina
'748x1024' : 'resources/startup/748x1024.png', // Non-retina
'1536x2008' : 'resources/startup/1536x2008.png', // : Retina
'1496x2048' : 'resources/startup/1496x2048.png' // : Retina iPad
},
isIconPrecomposed : true,
icon : {
57 : 'resources/icons/icon.png',
72 : 'resources/icons/icon@72.png',
114 : 'resources/icons/icon@2x.png',
144 : 'resources/icons/icon@144.png'
},
requires : ['Ext.tab.Panel', 'Ext.form.*', 'Ext.field.*', 'Ext.data.*',
'Ext.TitleBar', 'Ext.Button', 'Ext.field.Hidden', 'Ext.ux.Fileup'],
launch : function() {
var detailCard = null;
Ext.Viewport.add({
// xtype : 'tabpanel',
// fullscreen : true,
// ui :'light',
// title : '资源管理',
// items : [
// {
xtype : 'nestedlist',
fullscreen : true,
title : '主菜单',
id : "nestedlistid",
iconCls : 'star',
cls : 'blog',
displayField : 'title',
toolbar : {
items : [
{
xtype : 'button',
iconCls : 'arrow_left',
iconMask : true,
id : 'homeBtn',
handler : function() {
if (parentPath != "/") {
parentPath = parentPath.substring(0, parentPath
.lastIndexOf("/"));
if (parentPath.lastIndexOf("/") < 0) {
parentPath = "/";// think
}
} else {
parentPath = "/";
}
var view = Ext.getCmp('nestedlistid');
var nestedListstore = view.getStore();
nestedListstore.setProxy({
//
type : 'ajax',
url : "'/TouchOnline/findAllResourceAction.action?id=01",
extraParams : {
parent : parentPath
},
reader : {
type : 'json',
root : ''
}
});
nestedListstore.load();
}
}        // ,
, {
xtype : 'button',
// iconCls : 'arrow_left',
iconMask : true,
text : '上传文件',
id : 'btn',
handler : function() {
getFilePathFromDialog();
}
}
/**
* { xtype : 'button', iconAlign : 'right', iconCls : 'add', ui :
* 'plain', xtype : 'fileupload', autoUpload : false, url :
* '/TouchOnline/servlet/UploadServlet', itemId : 'fileBtn', id :
* "fileBtn", handler : function() { Ext.Ajax .request( { url :
* '/TouchOnline/checkIsLoginAction.action', params : { id :
* '01' }, method : 'POST', timeout : 3000, form : "myform",
* success : function( response, options) {
* 
* var obj = Ext .decode(response.responseText);
* 
* var info = obj['isLogin'];
* 
* if (info == "true") { } else {
* 
* window.location.href = '../forms/index.html'; } }, failure :
* function( response, options) { Ext.Msg .alert("请求失败"); } }); } }*
*/
]
},
store : {
type : 'tree',
autoLoad : true,
fields : ['title', 'link', 'author', 'contentSnippet',
'content', 'filetype', 'icon', {
name : 'leaf',
defaultValue : true
}],
root : {
leaf : false
},
proxy : {
type : 'ajax',
url : '/TouchOnline/findAllResourceAction.action',
reader : {
type : 'json',
root : 'list'
}
}
},
getItemTextTpl : function(node) {
// return template ="<div><div ><div > <img
// src='{icon}'/></div><div ><h2>Menu</h2><ul><li>HTML</li>"+
// "<li>CSS</li><li>JavaScript</li></ul></div></div></div>";
// return template = '<div id="container" ><span id="menu"><img
// src="{icon}" width="50px" height="70px"/>'+
// '</span><span id="titleandcontent"><span ><font size="5"
// color="gray">{title}</font></span><span
// >{link}</span></span></div>';
return template = '<div><span  ><img src="{icon}" width="74px" height="74px"  /> {title} </span></div>';
// getItemTextTpl : function(node) {
// return template =
// '<div><span>{text}</span><tpl
// if="price &gt; 0"> @
// {price}</tpl></div>';
// },
},
detailCard : detailCard
// {
// xtype : 'panel',
// scrollable : true,
// styleHtmlContent : true
// }
,
listeners : {
itemtap : function(nestedList, list, index, element, post) {
// Window.location.href=post.get('url');
// nestedList.removeAll(true,true);
// alert(post.get('filetype'));
if ("dir" != post.get('filetype')) {
/*
* 
* 
* 
* var nestedListstore = nestedList.getStore(); if
* (parentPath == "/") { parentPath +=
* post.get('title'); } else { parentPath += "/" +
* post.get('title'); } nestedListstore.setProxy({
* 
* type : 'ajax', url :
* "'/TouchOnline/findAllResourceAction.action?id=01",
* 
* extraParams : { parent : parentPath }, reader : {
* type : 'json', root : ''
*  } }); nestedListstore.load(); //
* alert('/TouchOnline/servlet/DownloadServlet?path=../upload'+parentPath+"/"+post.get('title'));
* 
* window.location =
* '/TouchOnline/servlet/DownloadServlet?path=../upload' +
* parentPath; this.getDetailCard().setHtml("'../upload" +
* parentPath + "/" + post.get('title') + "'>" + "<img
* src='../upload" + parentPath + "/" +
* post.get('title') + "'/>");
* 
* 
*/
return;
} else if ("dir" == post.get('filetype')) {
// function stopEvent (evt) {
var evt = evt || window.event;
evt.preventDefault();
if (evt.preventDefault) {
evt.preventDefault();
evt.stopPropagation();
} else {
evt.returnValue = false;
evt.cancelBubble = true;
}
var nestedListstore = nestedList.getStore();
if (parentPath == "/") {
parentPath += post.get('title');
} else {
parentPath += "/" + post.get('title');
}
nestedListstore.setProxy({
type : 'ajax',
url : "'/TouchOnline/findAllResourceAction.action?id=01",
// params : {
// id : '01'
// },
extraParams : {
parent : parentPath
},
reader : {
type : 'json',
root : ''
}
// ,
});
nestedListstore.load();
}
}
}
// }
// ]
});
}
});
///官网demo;
Ext.setup({onReady: function () {var data = {text: 'Groceries',items: [{text: 'Drinks',items: [{text: 'Water',items: [{text: 'Sparkling',leaf: true}, {text: 'Still',leaf: true}, {text: 'Deep',leaf: true}, {text: 'Muddy',leaf: true}]}]}]};Ext.define('ListItem', {extend: 'Ext.data.Model',config: {fields: [{name: 'text',type: 'string'}]}});var store = Ext.create('Ext.data.TreeStore', {model: 'ListItem',defaultRootProperty: 'items',root: data});var detailCard = null;var showDetail = true;var nestedList = Ext.create('Ext.NestedList', {fullscreen: true,title: 'Groceries',displayField: 'text',store: store,listeners: {leafitemtap: function (nlist, list, index, element, record, e, opts) {if (showDetail) {detailCard = {xtype: 'container',items: [{xtype: 'button',text: 'hi ' + record.get('text')}]}nlist.setDetailCard(detailCard);} else {// Cancel the DetailCardnlist.setDetailCard(null);}// toggle whether we are showing or not.showDetail = !showDetail;}}});}
});

这篇关于取消 nestedlist 点击弹出 detailcard 事件,主要就是把detailcard 设置为null 即可;的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/994864。

相关文章

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》：本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例，但是返回n
阅读更多...
浅析Java中如何优雅地处理null值

浅析Java中如何优雅地处理null值

《浅析Java中如何优雅地处理null值》这篇文章主要为大家详细介绍了如何结合Lambda表达式和Optional,让Java更优雅地处理null值,感兴趣的小伙伴可以跟随小编一起学习一下... 目录场景 1：不为 null 则执行场景 2：不为 null 则返回，为 null 则返回特定值或抛出异常场景
阅读更多...
C#TextBox设置提示文本方式(SetHintText)

C#TextBox设置提示文本方式(SetHintText)

《C#TextBox设置提示文本方式(SetHintText)》：本文主要介绍C#TextBox设置提示文本方式(SetHintText),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑... 目录C#TextBox设置提示文本效果展示核心代码总结C#TextBox设置提示文本效果展示核心代
阅读更多...
Pyserial设置缓冲区大小失败的问题解决

Pyserial设置缓冲区大小失败的问题解决

《Pyserial设置缓冲区大小失败的问题解决》本文主要介绍了Pyserial设置缓冲区大小失败的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面... 目录问题描述原因分析解决方案问题描述使用set_buffer_size()设置缓冲区大小后，buf
阅读更多...
Feign Client超时时间设置不生效的解决方法

Feign Client超时时间设置不生效的解决方法

《FeignClient超时时间设置不生效的解决方法》这篇文章主要为大家详细介绍了FeignClient超时时间设置不生效的原因与解决方法,具有一定的的参考价值,希望对大家有一定的帮助... 在使用Feign Client时，可以通过两种方式来设置超时时间：1.针对整个Feign Client设置超时时间
阅读更多...
C#如何动态创建Label,及动态label事件

C#如何动态创建Label,及动态label事件

《C#如何动态创建Label,及动态label事件》：本文主要介绍C#如何动态创建Label,及动态label事件,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录C#如何动态创建Label,及动态label事件第一点：switch中的生成我们的label事件接着，
阅读更多...
PyCharm如何设置新建文件默认为LF换行符

PyCharm如何设置新建文件默认为LF换行符

《PyCharm如何设置新建文件默认为LF换行符》：本文主要介绍PyCharm如何设置新建文件默认为LF换行符问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录PyCharm设置新建文件默认为LF换行符设置换行符修改换行符总结PyCharm设置新建文件默认为LF
阅读更多...
Linux上设置Ollama服务配置(常用环境变量)

Linux上设置Ollama服务配置(常用环境变量)

《Linux上设置Ollama服务配置(常用环境变量)》本文主要介绍了Linux上设置Ollama服务配置(常用环境变量),Ollama提供了多种环境变量供配置,如调试模式、模型目录等,下面就来介绍一... 目录在 linux 上设置环境变量配置 OllamPOgxSRJfa手动安装安装特定版本查看日志在
阅读更多...
关于@RequestParam的主要用法详解

关于@RequestParam的主要用法详解

《关于@RequestParam的主要用法详解》：本文主要介绍关于@RequestParam的主要用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1. 基本用法2. 默认值3. 可选参数4. 绑定到对象5. 绑定到集合或数组6. 绑定到 Map7. 处理复杂类
阅读更多...
Ubuntu中Nginx虚拟主机设置的项目实践

Ubuntu中Nginx虚拟主机设置的项目实践

《Ubuntu中Nginx虚拟主机设置的项目实践》通过配置虚拟主机,可以在同一台服务器上运行多个独立的网站,本文主要介绍了Ubuntu中Nginx虚拟主机设置的项目实践,具有一定的参考价值,感兴趣的可... 目录简介安装 Nginx创建虚拟主机1. 创建网站目录2. 创建默认索引文件3. 配置 Nginx4
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2