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

2024-05-16 12:08

本文主要是介绍取消 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

相关文章

Linux线程之线程的创建、属性、回收、退出、取消方式

《Linux线程之线程的创建、属性、回收、退出、取消方式》文章总结了线程管理核心知识:线程号唯一、创建方式、属性设置(如分离状态与栈大小)、回收机制(join/detach)、退出方法(返回/pthr... 目录1. 线程号2. 线程的创建3. 线程属性4. 线程的回收5. 线程的退出6. 线程的取消7.

C++中NULL与nullptr的区别小结

《C++中NULL与nullptr的区别小结》本文介绍了C++编程中NULL与nullptr的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编... 目录C++98空值——NULLC++11空值——nullptr区别对比示例 C++98空值——NUL

linux hostname设置全过程

《linuxhostname设置全过程》:本文主要介绍linuxhostname设置全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录查询hostname设置步骤其它相关点hostid/etc/hostsEDChina编程A工具license破解注意事项总结以RHE

Python设置Cookie永不超时的详细指南

《Python设置Cookie永不超时的详细指南》Cookie是一种存储在用户浏览器中的小型数据片段,用于记录用户的登录状态、偏好设置等信息,下面小编就来和大家详细讲讲Python如何设置Cookie... 目录一、Cookie的作用与重要性二、Cookie过期的原因三、实现Cookie永不超时的方法(一)

Qt 设置软件版本信息的实现

《Qt设置软件版本信息的实现》本文介绍了Qt项目中设置版本信息的三种常用方法,包括.pro文件和version.rc配置、CMakeLists.txt与version.h.in结合,具有一定的参考... 目录在运行程序期间设置版本信息可以参考VS在 QT 中设置软件版本信息的几种方法方法一:通过 .pro

PostgreSQL 默认隔离级别的设置

《PostgreSQL默认隔离级别的设置》PostgreSQL的默认事务隔离级别是读已提交,这是其事务处理系统的基础行为模式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价... 目录一 默认隔离级别概述1.1 默认设置1.2 各版本一致性二 读已提交的特性2.1 行为特征2.2

一文详解MySQL如何设置自动备份任务

《一文详解MySQL如何设置自动备份任务》设置自动备份任务可以确保你的数据库定期备份,防止数据丢失,下面我们就来详细介绍一下如何使用Bash脚本和Cron任务在Linux系统上设置MySQL数据库的自... 目录1. 编写备份脚本1.1 创建并编辑备份脚本1.2 给予脚本执行权限2. 设置 Cron 任务2

mtu设置多少网速最快? 路由器MTU设置最佳网速的技巧

《mtu设置多少网速最快?路由器MTU设置最佳网速的技巧》mtu设置多少网速最快?想要通过设置路由器mtu获得最佳网速,该怎么设置呢?下面我们就来看看路由器MTU设置最佳网速的技巧... 答:1500 MTU值指的是在网络传输中数据包的最大值,合理的设置MTU 值可以让网络更快!mtu设置可以优化不同的网

MySQL 设置AUTO_INCREMENT 无效的问题解决

《MySQL设置AUTO_INCREMENT无效的问题解决》本文主要介绍了MySQL设置AUTO_INCREMENT无效的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参... 目录快速设置mysql的auto_increment参数一、修改 AUTO_INCREMENT 的值。

详解Linux中常见环境变量的特点与设置

《详解Linux中常见环境变量的特点与设置》环境变量是操作系统和用户设置的一些动态键值对,为运行的程序提供配置信息,理解环境变量对于系统管理、软件开发都很重要,下面小编就为大家详细介绍一下吧... 目录前言一、环境变量的概念二、常见的环境变量三、环境变量特点及其相关指令3.1 环境变量的全局性3.2、环境变