extJs自学笔记

Ext.define自定义按钮

自定义按钮并添加初始化方法和监听，注意define（‘js文件路径’），只有这样的命名才能被extjs加载 //文件路径 js/define.js //文件路径 js/test-define.js Ext.define('js.define', { Ext.require(['js.define']); require : ['Ext.util.*'], Ext.onReady(function(){ extend: 'Ext.button.Button', Ext.create('myButton'); alias : 'myButton',//定义别名 }); text : '自定义按钮', //初始化组件方法，在组件加载时调用 initComponent: function() { 在JSP文件中首先引用ext必须的文件 //this.text = new Date(); 然后引用test-define.js Ext.MessageBox.alert('title','init'); console.log('init'); 结果：在执行到require方法时会自动this.renderTo = Ext.getBody(); 加载define.js文件，执行create方法时//调用父类的构造方法 会调用initComponent方法显示自定义this.callParent(); 按钮 }, listeners: { click : function(){ Ext.MessageBox.alert('title', 'onclick'); console.log('onclick'); } } });

Eclipse运行参数

导师配置

-Xms2048m -Xmx2048m -XX:MaxPermSize=1024m 老潘配置

Xms512m -Xmx512m -XX:MaxPermSize=1024m

-DWORKING_PATH=\

Ext.grid

获取选中的元素信息

获取单行数据

var selectedDatas=me.dataGridPanel.getSelectionModel().selected;

if(selectedDatas.length>1){ }

Ext.MessageBox.alert('提示','一次只能对一行数据进行操作'); return;

alert(selectedDatas.items[0].data.name); json数据中包含name属性

获取多行数据

var _selections = me.gridVar.getSelectionModel().selected; var codeArray = new Array();

for ( var i = 0; i < _selections.length; i++) { var _data = _selections.items[i].data; codeArray.push(_data.code); }

XIRJS.common.Util.ajaxRequest({

url : \ params : {

\ }, });

向后台传递参数codes,值为code数组 Ajax

http://extjs-doc-cn.github.io/ext4api/#!/api/Ext.Ajax

Ext.Ajax.request({ url:'page.php', params:{ id:1 },

success:function(response){ var text = response.responseText; // process server response here } });

通过修改Ext.Ajax类的属性，可以设置所有请求的默认配置: Ext.Ajax.timeout=60000;// 60秒

所有在Ajax请求request方法中设置的选项都会覆盖Ext.Ajax类上对应的默认选项。在以下示例代码中，请求的超时时间将会是60秒。 Ext.Ajax.timeout=120000;// 120秒 Ext.Ajax.request({ url:'page.aspx', timeout:60000 });

一般来说，在你的应用中，所有Ajax请求都会使用该类。单独创建Ext.data.Connection实例的主要原因是，

存在一系列请求，它们共享相同的配置，但是这些配置跟应用中的所有其它请求都不相同。

Ext.Json

http://extjs-doc-cn.github.io/ext4api/#!/api/Ext.JSON

解析decode( String json, Boolean safe ) : Object

解码（解析）JSON字符串对象。如果JSON是无效的，这个函数抛出一个

SyntaxError，除非设置了安全选项。Parametersjson : Stringsafe : Boolean（可选） 如果JSON是无效的，是否返回null或抛出一个异常。

代码示例： Ext.Ajax.request({ url : '/zhangliang-test-ext/getjson.action', params : { type : 'delete', names : namesArray.join(',') }, success : function(response) { var text = response.responseText; var data=Ext.JSON.decode(text); Ext.MessageBox.alert('提示',data.msg); } }); 分页

//每次输入换页前端传递参数 limit page start limit=20,_dc=1457784450612,page=1,start=0 后台传递json格式

{total:’10’,items : [{},{}]}

Java.util.List的subList(start,end)方法截取从start到end-1的元素 me.storeData = Ext.create('Ext.data.Store', { model : 'User', proxy : { type : 'ajax', url : '/zhangliang-test-ext/getjson.action', reader : { type : 'json', root : 'items', totalProperty : 'total' } }); }, autoLoad : true

向前端传递数据时必须传递数据总数，totalProperty指定的就是后台传递的属性名，root指定数据属性名

鼠标移至column弹出提示显示内容

initComponent()方法第一句初始化quicktips

Ext.QuickTips.init(); 需要tip的column添加如下代码

renderer: function(value,metaData,record,rowidx,colldx,store){ metaData.tdAttr = \ +Ext.String.htmlEncode(value)+\; returnvalue; } 例子：

效果：

可编辑表格

1添加行编辑插件

plugins: [ Ext.create('Ext.grid.plugin.RowEditing', { clicksToEdit : 2, autoCancel : false, errorSummary : false, saveBtnText : \确定\, cancelBtnText : \取消\ }) ],

2给想要编辑的column添加editor Textfield编辑 editor: { textfield相关配置，如allowBlank: false} 下拉框编辑 editor: 已经定义好的combo 3给grid添加edit事件监听

edit: function(editor,e,eOpts){ vardata=e.record.data; varparams={ id: data.id, text: data.text, jsName: data.jsName, leaf: data.leaf }; //获取修改后的数据并处理 }

新方法探索

reconfigure( Ext.data.Store store, Object[] columns )

使用一个新的store/columns配置项进行重新配置生成grid。 如果你不想改变store或者columns，他们任意一项均可以省略。

Parameters：store : Ext.data.Store(可选) 新的store。columns : Object[](可选) columns配置对象数组

Ext.form.Panel

默认表单项

defaultType : 'textfield' fieldset {

xtype:'fieldset', title: '联系信息', collapsible: true,

defaultType: 'textfield', defaults: {anchor: '100%'}, layout: 'anchor',

items :[me.tf_name, me.tf_email, me.tf_phone] }

显示如下效果

底部按钮对齐方式

buttonAlign : 'center' 底部按钮及提交方法：

前台要显示成功信息后台返回的json格式必须包含success

{

\ \}

buttons : [{

text : '重置',

handler : function() { } }, {

text : '提交',

handler : function() {

var form = this.up('form').getForm(); if (form.isValid()) {

form.submit({

url : '/zhangliang-test-ext/getjson.action', params : {

},

Ext.Msg.alert('失败', },

Ext.Msg.alert('完成',

'修改数据成功');

type : 'update'

this.up('form').getForm().reset();

success : function(form, action) {

failure : function(form, action) {

}]

}

}

}

'修改数据失败');

});

文档解释

myFormPanel.getForm().submit({ clientValidation: true,

url: 'updateConsignment.php', params: {

newStatus: 'delivered' },

success: function(form, action) {

Ext.Msg.alert('Success', action.result.msg); },

failure: function(form, action) { switch (action.failureType) {

case Ext.form.action.Action.CLIENT_INVALID:

Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');

break;

case Ext.form.action.Action.CONNECT_FAILURE: Ext.Msg.alert('Failure', 'Ajax communication failed'); break;

case Ext.form.action.Action.SERVER_INVALID: Ext.Msg.alert('Failure', action.result.msg); } } });

以下将会处理成功提交的服务器响应：

{

\ \}

并且以下是失败提交的服务端相应：

{

\

\}

ExtJS获取父子、兄弟容器元素方法

1.当前对象的父对象(上级对象) this.ownerCt:

2.当前对象的下一个相邻的对象 this.nextSibling();

3.当前对象的上一个相邻的对象 this.previousSibling();

4.当前容器中的第一个子对象 this.get(0);

this.items.first();

5.当前容器的最后一个子对象 this.items.last();

6.查找当前对象的所有上级匹配的容器 this.findParentByType(String xtype)

7.查找当前对象的所有下级匹配的组件

this.findByType(String xtype)

关闭折叠展开方法

http://extjs-doc-cn.github.io/ext4api/#!/api/Ext.window.Window-method-expand show() hide() close( )

关闭Panel。默认情况下这个方法会将其自身的DOM对象在浏览器中移除，destroys 销毁Panel对象并且销毁该Panel中的子组件。在关闭Panel动作发生之前beforeclose事件被触发，如果 要取消关闭动作则在其事件的处理函数中返回false即可。

collapse( String direction, [Boolean animate] ) : Ext.panel.Panel

折叠 Panel 体以便将其隐藏。挂靠组与边界平行折叠之后保持其依然可见。触发beforecollapse事件，如果取消 折叠动作在该事件的处理函数中返回false。

Parameters

direction : String

折叠的方向，必须从下面当中选一个

Ext.Component.DIRECTION_TOP Ext.Component.DIRECTION_RIGHT Ext.Component.DIRECTION_BOTTOM Ext.Component.DIRECTION_LEFT animate : Boolean (optional)

True 折叠的时候动态的过度，否则没有动态效果 (默认参照Panel的animCollapse属性配置)

expand( Boolean animate ) : Ext.panel.Panel

展开 Panel 使之状态变为可见.触发beforeexpand事件,当处理函数中返回false则展开操作被取消.

Parameters

animate : Boolean

设为true开启动画过度效果, false 则没有动画效果(默认值依照Panel中属性 animCollapse的配置)

ReturnsExt.panel.Panel

两个js文件的交互

显示页面gridPageMain.js，修改界面formPage.js

显示界面要传递数据给修改界面，修改界面修改成功之后要通知显示界面关闭修改界面

解决方法：config熟悉中添加空方法，主界面创建修改界面时实现方法，然后修改界面就可以调用此方法执行关闭操作 Ext.define('js.pageForm',{ Ext.define('js.pageForm',{ extend:'Ext.form.Pane', extend:'Ext.form.Pane', config:{ pageForm : null, closePanel : null initComponent : function(){ } var me =this; me.pageForm=Ext.create( ‘js.pageForm’, { closePanel : function(){ //关闭修改界面代码 } } ); me.callParent(arguments); }

布局

http://extjs-doc-cn.github.io/ext4api/#!/api/Ext.layout.container.VBox-cfg-pack http://extjs-doc-cn.github.io/ext4api/#!/api/Ext.layout.container.Form http://extjs-doc-cn.github.io/ext4api/#!/api/Ext.layout.container.Anchor http://extjs-doc-cn.github.io/ext4api/#!/api/Ext.layout.container.HBox http://extjs-doc-cn.github.io/ext4api/#!/api/Ext.layout.container.Fit

http://extjs-doc-cn.github.io/ext4api/#!/api/Ext.layout.container.Accordion http://extjs-doc-cn.github.io/ext4api/#!/api/Ext.layout.container.Border http://extjs-doc-cn.github.io/ext4api/#!/api/Ext.layout.container.Column http://extjs-doc-cn.github.io/ext4api/#!/api/Ext.layout.container.Table http://extjs-doc-cn.github.io/ext4api/#!/api/Ext.layout.container.Card

漂亮的表单

http://bbs.51cto.com/thread-1094487-1.html

Ext.LoadMask

一个模态的,悬浮的组件, 比如当某个组件加载数据时, 在其上方显示. 当此组件显示时, 附属组件将被一个模态遮罩覆盖, 同时LoadMask的msg中的内容将会随着一个旋转的图片显示在中间位置.

如果指定了store参数, 那么在Store进行加载处理时, 遮罩会自动同步的显示和隐藏.

// 基本的mask:

var myMask =newExt.LoadMask(myPanel,{msg:\myMask.show();

图表

http://mljavalife.iteye.com/blog/1320109

图表的轴(axes)

position设置轴的位置。可用的选项有left, bottom, right, top. 默认为bottom.

grid表格的配置项可以是你能够设置一个轴的背景表格. 如果你将纵轴设置成true, 垂直的线将会显示出来. 如果你将横轴设置成true, 水平的线将会显示出来. 如果都设置了, 水平线和垂直线都会被显示出来. (1) 数值轴 Ext.chart.axis.Numeric

处理数值的轴。这个轴用于定量的数据而不是类别轴。你可以设置最大值和最小值使它

的值绑定到该轴。如果未设置值，那么其规模将自动调整值。

{ }

type: 'Numeric', position: 'left',

fields: ['data1', 'data2' ,'data3', 'data4', 'data5'], label: {

renderer: Ext.util.Format.numberRenderer('0,0') },

title: 'Sample Values', grid: true, minimum: 0

(2) 时间轴 Ext.chart.axis.Time

单位是时间值的计量的轴。使用这个轴可以列出你想要以组的形式或者动态变化的日期。如果你只是想显示时间类别，你可以使用Category类代替.

axes: [{

title: 'Time', type: 'Time',

position: 'bottom',

fields: ['date'], //坐标轴开始时间

fromDate: new Date(2011, 1, 1, 8), //坐标轴结束时间

toDate: new Date(2011, 1, 1, 12),

//坐标轴间隔，‘h’是Ext.Date.HOUR的值，意义坐标轴间隔为1小时 step: ['h', 1],

//坐标轴标签日期格式化

//参考：http://extjs-doc-cn.github.io/ext4api/#!/api/Ext.Date dateFormat: 'ga' }]

(3) 分类轴Ext.chart.axis.Category

{

type: 'Category', }

position: 'bottom', fields: ['name'], title: 'Sample Metrics'

(4) 仪表轴 Ext.chart.axis.Gauge

{ }

图表的类型series

type: 'gauge', position: 'gauge', minimum: 0,//最小值 maximum: 100,//最大值 steps: 20,//分为100/20格 margin: 10

（1）折线图 Ext.chart.series.Line

{ { }

type: 'line', highlight: { size: 7, radius: 7 }, tips: {

trackMouse: true, width: 140, height: 28,

renderer: function(storeItem, item) { this.setTitle(storeItem.get('name') + ': ' + } },

storeItem.get('data1') + ' views');

axis: 'left', xField: 'name', yField: 'data1', markerConfig: { type: 'cross', size: 4, radius: 4, 'stroke-width': 0 }

(2) 柱形图 Ext.chart.series.Column {

type: 'column', axis: 'bottom',

//是否把不同的field折叠起来 stacked: true, xPadding: 0,

//大组间的距离，bar宽度的百分比 gutter: 10,

//组内的距离，bar宽度的百分比 groupGutter: 0, tips: {

trackMouse: true, width: 140, height: 28,

renderer: function(storeItem, item) {

this.setTitle(item.yField + ': ' + item.value[1] + ' $'); } },

label: {

display: 'insideEnd',

field: ['data1', 'data2', 'data3', 'data4', 'data5'], renderer: Ext.util.Format.numberRenderer('0'), orientation: 'horizontal' //color: '#fff' },

xField: 'name',

yField: ['data1', 'data2', 'data3', 'data4', 'data5'] }

(3) 饼状图 Ext.chart.series.Pie

{

type: 'pie',

angleField: 'data', showInLegend: true, tips: {

trackMouse: true, width: 140, height: 28,

renderer: function(storeItem, item) {

// calculate and display percentage on hover

var total = 0;

store.each(function(rec) { total += rec.get('data'); });

this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data') / total * 100) + '%'); } },

highlight: { segment: { margin: 20 } },

label: {

field: 'name', display: 'rotate', contrast: true, font: '18px Arial' } }

(4) 条形图 Ext.chart.series.Bar

(5) 面积图 Ext.chart.series.Area

{

type: 'area', highlight: false, axis: 'left', xField: 'name',

yField: ['data1', 'data2', 'data3', 'data4', 'data5' ],

style: {

opacity: 0.93 } }

(6) 雷达图 Ext.chart.series.Radar {

type: 'radar', xField: 'name',

yField: 'data1',

showInLegend: true, showMarkers: true, markerConfig: { radius: 5, size: 5 },

style: {

'stroke-width': 2, fill: 'none' } }

(7) 散点图 Ext.chart.series.Scatter {

type: 'scatter', markerConfig: { radius: 5, size: 5 },

axis: 'left', xField: 'name', yField: 'data2' }

(8) 仪表图 Ext.chart.series.Gauge {

type: 'gauge',

field: 'value',//被映射的store的属性 highlight: true,

needle: true,//显示指针

donut: 30,//显示仪表盘的面积0-100之间，会从半圆中挖去一部分 colorSet: ['gray', '#DBEAF9']//第一个颜色是仪表盘的颜色 }

常用属性

highlight高亮，label标题，tips提示，renderer格式化

常用属性

collapsible 是否允许折叠 frame是否渲染为窗口模式，有圆角 titleCollapse标题栏是否可折叠 bodyPadding 主体内边距

afterLabelTextTpl表单项标签后方提示

afterLabelTextTpl:'

data-qtip=\

显示红色星号在表单项标签后 textfield相关属性

Ext.widget('textfield', { labelWidth: 100, shadow: 'drop', margin: '20 10', labelAlign: 'right', fieldLabel: 'number', inputType: 'password',

//校验及对应校验失败时显示的信息 regex: new RegExp('^-?\\d+$'), regexText: '只能输入整数', allowBlank: false,

blankText: '不允许为空', minLength: '10',

minLengthText: '输入不能少于10个字符', maxLength: '15',

maxLength: '输入不能多于15个字符',

invalidText : ‘出错而没有找到对应的错误信息，显示的文字内容’ msgTarget: 'side',

renderTo: Ext.getBody() });

Ext.widget('textfield', { }); labelWidth : 100, afterLabelTextTpl : XIRJS.common.Util.required, allowBlank : false, margin : '5 20 0 0', labelAlign : \, fieldLabel : '情景id', tabIndex : 101 datefield相关属性

Ext.create(\

fieldLabel : '起始日期', labelWidth : 100, name : 'beginDate',

afterLabelTextTpl : XIRJS.common.Util.required, format : 'Y-m-d', margin : '5 20 0 0', tabIndex : 104, labelAlign : \

validator : function(value) { }

var df_endDateValue = Ext.util.Format.date( }

returntrue;

me.df_endDate.getValue(), 'Y-m-d'); me.df_beginDate.getValue(), 'Y-m-d');

var df_beginDateValue = Ext.util.Format.date(

if (df_endDateValue != null&& df_endDateValue != '') {

if (df_endDateValue < df_beginDateValue) { }

return '起始日期不能超过结束日期';

});

comboBox常用属性

var states = Ext.create('Ext.data.Store', { fields: ['show', 'value'], data: [{ 'show': '陕西', 'value': 'shanxi' }, { 'show': '西安', 'value': 'xian' }, { 'show': '中国', 'value': 'china' }] }); { margin:'5 20 0 0', labelWidth:30, lableAlign:'right', name:'location',//对应表单的name fieldLabel:'省份', store:states, queryMode:'local',//加载本地数据 value:'xian',//默认选中值 displayField:'show',//展示对应field valueField:'value',//值对应field renderTo:Ext.getBody() }

获取值

获取对象的属性值

objectname.property

获取数组

简单类型数组arrayname[index]

对象类型数组arrayname[index].property

ExtJS正则表达式

http://www.cnblogs.com/azai/archive/2010/12/31/1923140.html

margin

/ 上右下左 /

margin : '50 0 0 200' / 上下左右 /

margin : '50 20'

Ext

getDoc( )

将当前的HTML的document对象作为Ext.Element返回。

getDom( String/HTMLElement/Ext.Element el )

返回dom对象，参数可以是string(id)，dom节点，或Ext.Element。

getHead( )

将当前document的head对象当作Ext.Element返回。 getBody( )

将当前document的body对象当作Ext.Element返回。

get( String/HTMLElement/Ext.Element el ) : Ext.dom.Element 检索Ext.dom.Element对象。get是Ext.dom.Element.get的别名。 getCmp( String id )

Ext.ComponentManager.get方法的简写。 通过id查找现有的Component

decode( String json, Boolean safe ) : Object

Ext.JSON.decode的简写形式

解码（解析）JSON字符串对象。如果JSON是无效的，这个函数抛出一个SyntaxError，除

非设置了安全选项。

iterate( Object/Array object, Function fn, [Object scope] )

迭代一个数组或一个对象。如果给定的值可迭代他的方法将委派给 Ext.Array.each，否则为Ext.Object.each。 var person = { name: 'Jacky'

hairColor: 'black'

loves: ['food', 'sleeping', 'wife'] };

Ext.Object.each(person, function(key, value, myself) {

//利用此方法可以遍历对象的属性和值 console.log(key + \ if (key === 'hairColor') { return false; // 停止迭代 } });

each( Array/NodeList/Object iterable, Function fn, [Object scope], [Boolean reverse] ) : Boolean

迭代一个数组或是可迭代的值，在每个元素上调用给定的回调函数 在回调函数中返回false，即可停止迭代过程。

Ext.Array.each(countries, function(name, index, countriesItSelf) { if (name === 'Singapore') { return false; // 此处中止 } });

Ext.each是Ext.Array.each的别名

typeOf( Object value ) : String

var a; Ext.typeOf(a); //return undefined;

以字符串格式返回给定变量的类型。可能值的列表: undefined: 如果给定的值是 undefined null: 如果给定的值是 null

string: 如果给定的值是一个字符串 number: 如果给定的值是一个数值 boolean: 如果给定的值是一个布尔值 date: 如果给定的值是一个 Date 对象 function: 如果给定的值是function的引用 object: 如果给定的值是一个对象 array: 如果给定的值是一个数组

regexp: 如果给定的值是一个正则表达式

element: 如果给定的值是一个 DOM 元素

textnode: 如果给定的值是一个 DOM 文本节点和包含空格以外的东西

whitespace: 如果给定的值是一个 DOM 文本节点和包含只有空格

isEmpty(value,allowBlank)

Ext.dom.Element

提供了很多操作Dom元素的方法例如

setOpacity( Number opacity, [Boolean/Object animate] ) : Ext.dom.Element

设置元素的透明度 参数说明

opacity : Number

新的透明度. 0 = transparent完全透明, .5 = 50% visibile, 1 = 完全可见 animate : Boolean/Object (optional)

可以设置为标准的 Element animation 配置对象; 如果设置为 true 则使用动画配置: ({duration: .35, easing: 'easeIn'})

getViewSize()

获取对应视图的大小，Ext.getBody().getViewSize()可以获得浏览器窗口大小

Ext.util

Array

Ext.Array中有很多操作array的方法

var arrays=[{a:1,b:'t'}];

arrays.push({'name':'zhangliang','sex':'男'}); //arrays[0].a=1 arrays[1].name=zhangliang

遍历数组

Ext.Array.forEach(childs,function(item, index, allItems) { if (item.jsName != null && item.jsName != '') { tab.remove(item.id, false); } });

HashMap

var map = new Ext.util.HashMap(); map.add('key1', 1); map.add('key2', 2); map.add('key3', 3);

map.each(function(key, value, length) { console.log(key, value, length); });

if (map.get('key') == undefined) { //沒有找到值时返回undefined console.log('undefined'); }

var keys = map.getKeys();

for (var i = 0; i < keys.length; i++) {

console.log(keys[i] + \}

Ext.button

splitbutton

分割按钮提供了内置的下拉箭头菜单，可以分别触发按钮不同的单击时事件一般使用下拉菜单用于提供主按钮之外的附加选项，并且可以实现不同的单击事件。 // display a dropdown menu: Ext.create('Ext.button.Split', { renderTo: Ext.getBody(), text: 'Options',

// handle a click on the button itself handler: function() {

alert(\ },

menu: new Ext.menu.Menu({ items: [

// these will render as dropdown menu items when the arrow is clicked: {text: 'Item 1', handler: function(){ alert(\ {text: 'Item 2', handler: function(){ alert(\ ] }) });

cyclebutton

是一个专用的分割按钮，通常包括带有Ext.menu.CheckItem元素的菜单。当单击某个菜单的时候按钮会自动进行循环切换，同时触发按钮的change事件（当支持的时候，或者调用按钮的changeHandler函数），当单击箭头的位置，将显示菜单，就想分割按钮一样。

Ext.create('Ext.button.Cycle', { showText: true,

prependText: 'View as ', renderTo: Ext.getBody(), menu: {

id: 'view-type-menu', items: [{

text: 'text only', iconCls: 'view-text', checked: true },{

text: 'HTML',

iconCls: 'view-html' }] },

changeHandler: function(cycleBtn, activeItem) { Ext.Msg.alert('Change View', activeItem.text); } });

Ext.panel.Tool Panel头部小图标

这个类用于显示可视化的小图标在Panel的头部。有25个可设置的图标依照配置type使用。属性handler配置提供一个方法来响应单击事件。通常情况下，这个类不会被直接实例化，它是通过Ext.panel.Panel.tools被创建显示在Panel自身上。 Ext.create('Ext.panel.Panel', { width: 200, height: 200,

renderTo: document.body, title: 'A Panel', tools: [{

type: 'help',

handler: function(){

// 此处显示帮助的逻辑 } }, {

itemId: 'refresh', type: 'refresh', hidden: true,

handler: function(){

// 实现刷新的逻辑 } }, {

type: 'search',

handler: function(event, target, owner, tool){

// 实现查询的逻辑

owner.child('#refresh').show(); } }] });

type:工具类型的渲染。以下是可用的类型：

close minimize maximize restore toggle gear prev next pin unpin right left down up refresh plus minus search save help print expand

collapse

常用工具类

TreePanel

TreePanel节点Node配置

参照NodeInterface

TreePanel常用方法及属性

NodeInterface中的方法

遍历子节点，修改子节点属性

node.eachChild(function(childnode) { childnode.set('checked', false); },this);

判断节点是否是叶子节点node.isLeaf() 判断节点是否打开node.isExpanded()

判断节点是否是父节点的第一个子节点node.isFirst()同理node.isLast() 是否包含某个节点 node.contains(child)

追加节点或节点数组node.appendChild(node/node[]) 返回节点深度node.getDepth()根节点深度 返回节点路径node.getPath(field,separator)

属性

childNodes firstChild isNode lastChild nextSibling parentNode previousSibling

TreePanel需求及实现（带复选框的TreePanel）

1选中父节点时让所有子节点全部选中，取消选中让子节点全部取消选中 2当我选中一个节点的时候，如果这个节点的父节点就这一个子节点，那么父节点也要选中，如果再继续选的话，父节点不是干菜这个节点的话，那么去掉刚才所有的选中节点，这个要怎么做

3点击节点时，如果是子节点，改变子节点的选中状态 源码

本文来源：https://www.bwwdw.com/article/2df.html