extjs 4中treepanel重复加载。
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了extjs 4中treepanel重复加载。相关的知识,希望对你有一定的参考价值。
var treeStore1 = Ext.create('Ext.data.TreeStore', autoLoad : true, proxy: type: 'ajax', url: '../menu.action', reader: type: 'json', root: 'root' //record: 'node' , sorters: [ property: 'leaf', direction: 'ASC' ], root: nodeType: 'async', text: 'Ext JS', //checked : true //id: '00', expanded:true , autoLoad: false);var treepanel2 = Ext.create('Ext.tree.Panel', //title: '简单的树形组件', store: treeStore1, animate:true, autoScroll:true, //如果超出范围带自动滚动条 width: 500, height:400, border:true, //显示tree side frame //数据容器 //loader:new Ext.tree.TreeLoader(url:"web/MenuTree.json"), rootVisible: true, //是否显示根节点 // renderTo: Ext.getBody() containerScroll:true, listeners: 'itemclick': function (view, record) //listeners -------funcation end----------);
'itemclick': function中的代码如下 var leaf = record.get('leaf'); if (leaf) else var expand = record.get('expanded') if (expand) view.collapse(record); else view.expand(record);
你后台的tree的json没有提供。不懂写得有没有问题。
给你一段extjs4的tree代码参考。希望能帮助到你
test.json 文件children:[
id:'01',text:'a01',children:[
id:'01-01',text:'a01-01',leaf:true,
id:'01-02',text:'a01-02',children:[
id:'01-02-01',text:'b01-02-01',leaf:true,
id:'01-02-02',text:'a01-02-02',leaf:true
]
,
id:'01-03',text:'b01-03',leaf:true
]
,
id:'02',text:'b02',leaf:true
]
var treeStore1 = Ext.create('Ext.data.TreeStore',
autoLoad : true,
proxy:
type: 'ajax',
//也可以是提交给action,返回json格式就行
url: 'test.json.json',
reader:
type: 'json',
root: 'children'
//record: 'node'
,
sorters: [
property: 'leaf',
direction: 'ASC'
],
root:
nodeType: 'async',
text: 'Ext JS',
//id: '00',
expanded: true
);
var treepanel1 = Ext.create('Ext.tree.TreePanel', //如果超出范围带自动滚动条 autoScroll:true,
//animate:true,
//root:root,
//默认根目录不显示
rootVisible:true,
border:false,
animate:true,
lines:true,
//enableDD:true,
height:600,
store:treeStore1
//width: 500
//containerScroll:true
); 参考技术A var store=Ext.create('Ext.data.TreeStore', defaultRootId : '', fields : ['id', 'name', 'code', 'dataType', 'describe', 'sql'], root: expanded: true, children: "children" , proxy : type : 'ajax', url : dataUrl, reader : type : 'stripedjson', striped : dataRoot )
children: "children" ,估计你的children没配置好追问
数据库应怎 样设了,children,要什么类型 了,怎 么设置了,与数据有什么 关系。
数据库应怎 样设了,children,要什么类型 了,怎 么设置了,与数据有什么 关系。
本回答被提问者采纳 参考技术B 我的情况是proxy reader root 配了就会多次加载,为空就不会。ExtJS:如何使用其他 ExtJS 组件创建自己的类?
【中文标题】ExtJS:如何使用其他 ExtJS 组件创建自己的类?【英文标题】:ExtJS: How to create own Class with other ExtJS components? 【发布时间】:2014-07-29 12:37:47 【问题描述】:我正在尝试使用不同的项目创建 Panel
类对象。基本上它与 ExtJS 中的桌面应用程序有关。DetailView.js
Ext.define("App.view.DetailView",
extend : 'Ext.panel.Panel',
alias : 'widget.asset-panel',
itemId : 'Detail-view',
region : 'center',
initComponent : function()
this.items = [ comboboxes, customPanel ];
this.callParent(arguments);
);
我正在尝试以两种方式创建items
组件,即使用xtype
和使用Ext.create()
方式。我不确定哪个是正确的,我应该如何解决。下面是 DetailView.js
comboboxes
变量
var comboboxes =
xtype : 'form',
border : false,
padding : '5 5 5 5',
items : [
layout : 'column',
border : false,
width : 600,
items : [
xtype : 'combobox',
columnWidth : .15,
itemId : 'filter-1',
store : [ 'Employee', 'Manager', 'TeamLead' ]
,
xtype : 'combobox',
columnWidth : .15,
margin : '0, 0, 0, 15',
store : [ 'Keywords', 'Names' ]
,
xtype : 'combobox',
columnWidth : .15,
margin : '0, 0, 0, 15',
store : [ 'Some Data here' ]
]
]
;
到目前为止一切顺利,如果我将 this.items = [comboboxes]
保留在 DetailView
类中,它可以正常工作,没有任何问题。但是当我尝试添加其他组件时,例如 DetailView.js
var custom = Ext.create('Ext.panel.Panel',
itemId : 'panel_1',
height : 300,
border : false,
layout : 'card',
items : [
xtype : 'container',
itemId : 'listCt',
layout :
type : 'vbox',
align : 'stretch'
,
defaults :
margin : 2
,
items : []
,
xtype : 'container',
itemId : 'fitCt',
layout : 'fit'
]
);
我尝试了两种初始化面板的方法,如上和使用initComponent()
,但每次都会出错:
Uncaught TypeError: Cannot set property 'component' of null ext-all.js:22
Ext.cmd.derive.privates.finishRender ext-all.js:22
Ext.cmd.derive.finishRenderItems ext-all.js:22
Ext.cmd.derive.finishRender ext-all.js:22
Ext.cmd.derive.privates.finishRenderChildren ext-all.js:22
Ext.cmd.derive.afterRender ext-all.js:22
Ext.cmd.derive.privates.finishRender ext-all.js:22
Ext.cmd.derive.finishRenderItems ext-all.js:22
Ext.cmd.derive.finishRender ext-all.js:22
Ext.cmd.derive.privates.finishRenderChildren ext-all.js:22
Ext.cmd.derive.afterRender ext-all.js:22
Ext.cmd.derive.privates.finishRender ext-all.js:22
Ext.cmd.derive.finishRenderItems ext-all.js:22
Ext.cmd.derive.finishRender ext-all.js:22
Ext.cmd.derive.privates.finishRenderChildren ext-all.js:22
Ext.cmd.derive.afterRender ext-all.js:22
Ext.cmd.derive.afterRender ext-all.js:22
Ext.cmd.derive.privates.finishRender ext-all.js:22
Ext.cmd.derive.render ext-all.js:22
Ext.cmd.derive.privates.doAutoRender ext-all.js:22
Ext.cmd.derive.show ext-all.js:22
Ext.define.restoreWindow Desktop.js?_dc=1406637300888:388
Ext.define.onShortcutItemClick Desktop.js?_dc=1406637300888:199
fire ext-all.js:22
doFireEvent ext-all.js:22
a.doFireEvent ext-all.js:22
fireEventArgs ext-all.js:22
fireEvent ext-all.js:22
Ext.cmd.derive.processUIEvent ext-all.js:22
Ext.cmd.derive.handleEvent ext-all.js:22
Ext.cmd.derive.doFire ext-all.js:22
Ext.cmd.derive.fire ext-all.js:22
Ext.cmd.derive.doDispatchEvent ext-all.js:22
Ext.cmd.derive.dispatch ext-all.js:22
Ext.cmd.derive.dispatch ext-all.js:22
Ext.cmd.derive.doPublish ext-all.js:22
Ext.cmd.derive.publish ext-all.js:22
Ext.cmd.derive.onDelegatedEvent ext-all.js:22
(anonymous function)
重新初始化窗口时出错。即它仅在第一次执行时起作用,但在第二次执行时不起作用。我怀疑组件是否被正确渲染和销毁。可能的原因是什么?任何可能的解决方案?
【问题讨论】:
【参考方案1】:您似乎在将组件销毁后重新使用它们:
initComponent : function()
// comboboxes & customPanel will be the same instances
// for every App.view.DetailView you create
this.items = [ comboboxes, customPanel ];
this.callParent(arguments);
这里也一样:
items : [
xtype : 'container',
itemId : 'listCt',
// ...
// The component in this items variable will be destroyed when their
// parent is destroyed, and won't be usable again after that
items : items
// ...
]
您有两种可靠的方法来定义带有预设项的自定义类。
首先,您可以使用内联 (xtype) 配置。这具有延迟初始化的优点;此外,每次您创建自定义组件的实例时,Ext 都会创建项目的单独实例。
例如:
Ext.define('My.Panel',
extend: 'Ext.panel.Panel'
,items: [
xtype: 'textfield'
,fieldLabel: "My field"
,
xtype: 'component'
,html: "Bla bla bla"
]
);
var myFirstPanel = new My.Panel(
renderTo: Ext.getBody()
,title: "First Panel"
);
var mySecondPanel = new My.Panel(
renderTo: Ext.getBody()
,title: "Second Panel"
);
如果您需要更多参与的处理,请使用 initComponent
方法,但请务必在其中创建子项的新实例。
Ext.define('My.InitComponentPanel',
extend: 'Ext.panel.Panel'
,customFieldLabel: "Example field"
,initComponent: function()
// initComponent will be called each time a InitComponentPanel
// is created, and a new textfield will be created for each
this.items = [
new Ext.form.field.Text(
fieldLabel: this.customFieldLabel
);
];
this.callParent(arguments);
);
var panel1 = new My.InitComponentPanel(
renderTo: Ext.getBody()
,customFieldLabel: "First field"
);
// will destroy panel1's items, but no problem
panel1.destroy();
var panel2 = new My.InitComponentPanel(
renderTo: Ext.getBody()
,customFieldLabel: "Second field"
);
如果您直接使用 Ext 组件(不扩展它们)也是如此;不要在多个地方使用现有组件。
// Inline (uninstantiated) items are always fine
var panel = new Ext.panel.Panel(
renderTo: Ext.getBody()
,items: [
xtype: 'checkbox'
,boxLabel: "My checkbox"
]
);
// You can also create children beforehand
var checkbox = new Ext.form.field.Checkbox;
var panel2 = new Ext.panel.Panel(
renderTo: Ext.getBody()
,items: [checkbox]
);
// But don't reuse the checkbox for another panel
var panel3 = new Ext.panel.Panel(
renderTo: Ext.getBody()
// this will remove the unique checkbox instance from panel2
// and if panel2 has been destroyed meanwhile, it will crash
,items: [checkbox]
);
不要忘记,您还可以从已使用 add
、insert
、remove
等方法创建的容器中添加/删除项目(但不要触摸 items
直接属性!)。
【讨论】:
哦,伙计!所以如果我们定义我们的类说Ext.define("My.CustomPanel",...)
所以每次销毁后重用这个组件我必须使用new
关键字重新初始化它! ? (因为它是一个桌面应用程序,所以一旦我关闭应用程序中的Ext.window.Window
实例,我必须更频繁地重复使用它们)
是的,您必须为每个需要它的地方创建一个组件实例,并且必须在它们被销毁后创建新的。使用new
关键字,或Ext.create
,它们大致相当,或者在某些容器的配置中使用组件的xtype
(或Ext5/Touch 中的xclass
)。然而,可以做的是移动一个现有的组件实例,将它添加到另一个容器中;如果你在销毁第一个容器之前这样做,它会起作用。
您也可以查看autoDestroy
选项,但我不会费心自己管理组件生命周期(从那时起,您必须自己销毁子组件以防止内存泄漏).. .
它总有一天会杀了我.. 什么以及如何理解这一切?我正在尝试在 extjs apidoc 上阅读它,但到目前为止它对我来说并没有那么好闻。顺便说一句,非常感谢你向我解释这个
很抱歉,我真的不知道您在哪里可以找到有关此的文档,您可以通过经验获得这些文档...我写过关于 initComponent
in another question 的文章,它可能会有所帮助。但是 Ext 的生命周期并没有那么复杂,如果你不把框架包装得太多,它本质上是自动的(感谢autoDestroy
)。以上是关于extjs 4中treepanel重复加载。的主要内容,如果未能解决你的问题,请参考以下文章
extjs4 treepanel 动态的加载节点,怎么在选中时,级联选中子节点呢?