取消 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。

相关文章

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

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

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

PostgreSQL 默认隔离级别的设置

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

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

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

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

《mtu设置多少网速最快?路由器MTU设置最佳网速的技巧》mtu设置多少网速最快？想要通过设置路由器mtu获得最佳网速，该怎么设置呢？下面我们就来看看路由器MTU设置最佳网速的技巧... 答：1500 MTU值指的是在网络传输中数据包的最大值，合理的设置MTU 值可以让网络更快！mtu设置可以优化不同的网
阅读更多...
MySQL 设置AUTO_INCREMENT 无效的问题解决

MySQL 设置AUTO_INCREMENT 无效的问题解决

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

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

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

安装centos8设置基础软件仓库时出错的解决方案

《安装centos8设置基础软件仓库时出错的解决方案》：本文主要介绍安装centos8设置基础软件仓库时出错的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录安装Centos8设置基础软件仓库时出错版本 8版本 8.2.200android4版本 javas
阅读更多...
Ubuntu设置程序开机自启动的操作步骤

Ubuntu设置程序开机自启动的操作步骤

《Ubuntu设置程序开机自启动的操作步骤》在部署程序到边缘端时,我们总希望可以通电即启动我们写好的程序,本篇博客用以记录如何在ubuntu开机执行某条命令或者某个可执行程序,需要的朋友可以参考下... 目录1、概述2、图形界面设置3、设置为Systemd服务1、概述测试环境：Ubuntu22.04 带图
阅读更多...
VSCode设置python SDK路径的实现步骤

VSCode设置python SDK路径的实现步骤

《VSCode设置pythonSDK路径的实现步骤》本文主要介绍了VSCode设置pythonSDK路径的实现步骤,包括命令面板切换、settings.json配置、环境变量及虚拟环境处理,具有一定... 目录一、通过命令面板快速切换（推荐方法）二、通过 settings.json 配置（项目级/全局）三、
阅读更多...
如何Python使用设置word的页边距

如何Python使用设置word的页边距

《如何Python使用设置word的页边距》在编写或处理Word文档的过程中,页边距是一个不可忽视的排版要素,本文将介绍如何使用Python设置Word文档中各个节的页边距,需要的可以参考下... 目录操作步骤代码示例页边距单位说明应用场景与高级用China编程途小结在编写或处理Word文档的过程中，页边距是一个
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2