Ext4 treePanel checkBox 선택 예

/**
 *  
 */
Ext.define('com.RolePanel', {
	extend : 'Ext.panel.Panel',
	xtype : 'com-role-grid',
	initComponent : function() {
		var self = this;
		var store = new Ext.data.Store({
			autoLoad : true,
			proxy : {
				type : 'ajax',
				url : 'roleAction!list.action',
				reader : {
					type : 'json',
					root : 'rows'
				}
			},
			model : 'com.RolePanel.Mode',
			writer : new Ext.data.JsonWriter(),
			listeners : {
				'load' : function(store, records) {
					if (records) {
						if (roleGridPanel.getSelectionModel().getSelection().length <= 0) {
							roleGridPanel.getSelectionModel()
									.select(records[0]);
							self.authFormPanel.loadRecord(records[0]);
						}
					}
				}
			}
		});

		var roleGridPanel = new Ext.grid.Panel({
					region : 'center',
					columnLines : true,
					store : store,
					loadMask : true,
					columns : [{
								text : ' ',
								sortable : true,
								dataIndex : 'cid',
								locked : true,
								hidden : true
							}, {
								text : ' ',
								dataIndex : 'cname',
								flex : 5
							}, {
								text : ' ',
								dataIndex : 'cdesc',
								flex : 5
							}, {
								text : 'ctype',
								dataIndex : 'ctype',
								hidden : true
							}, {
								text : ' ',
								dataIndex : 'authIds',
								hidden : true
								// renderer : function(value, metaData, record)
							// {
							// if (record.raw.authNames) {
							// return Ext.String.format(
							// '<span title={0}>{1}</span>',
							// record.raw.authNames,
							// record.raw.authNames);
							// }
							// }
						}],
					bbar : Ext.create('Ext.PagingToolbar', {
								store : store,
								displayInfo : true,
								beforePageText : ' ',
								afterPageText : ' ， {0} ',
								displayMsg : ' {2} ',
								emptyMsg : " "
							}),
					tbar : [{
								text : ' ',
								scope : this,
								iconCls : 'Add',
								handler : function() {
									roleGridPanel.getSelectionModel()
											.deselectAll();
									self.authFormPanel.form.reset();
								}
							}, {
								text : ' ',
								scope : this,
								iconCls : 'Delete',
								handler : function() {
									this.openDelete(self);
								}
							}],
					forceFit : true
				});
		this.roleGridPanel = roleGridPanel;
		roleGridPanel.getSelectionModel().on('selectionchange',
				function(t, sMode) {
					if (sMode[0]) {
						self.authFormPanel.loadRecord(sMode[0]);
					}
				}, this);
		var storeRoleAuth = Ext.create('Ext.data.TreeStore', {
					// autoLoad : true,
					proxy : {
						type : 'ajax',
						url : "authAction!authTreeRecursive.action"
					},
					fields : ['id', 'text', 'leaf', 'checked'],
					root : {
						id : '0',
						text : 'root',
						lazyLoad : true
					}
				});

		var authTree = new Ext.tree.Panel({
					width : 400,
					height : 450,
					autoScroll : true,
					animate : true,
					containerScroll : true,
					rootVisible : false,
					store : storeRoleAuth,
					listeners : {
						'expand' : function(p) {
							var node = p.getSelectedNode();
							if (!node)
								self.refresh(p.getRootNode());
							else {
								self.refresh(node);
							}
						}
					}
				});
		authTree.on('checkchange', function(node, checked) {
					node.checked = checked;
					if (node.parentNode.id.length != 1) {
						self.setParentNode(node.parentNode, checked, self);
						node.expand();
					}
					if (node.hasChildNodes())
						self.setChildNode(node, checked, self);
				}, authTree);
		self.authTree = authTree;
		var authFormPanel = new Ext.form.Panel({
			title : ' ',
			region : 'east',
			split : true,
			collapsible : true,
			border : false,
			items : [{
						fieldLabel : ' ',
						name : 'id',
						hidden : true
					}, {
						xtype : 'textfield',
						allowBlank : false,
						fieldLabel : ' ',
						name : 'name',
						emptyText : ' '
					}, {
						xtype : 'textfield',
						fieldLabel : ' ',
						name : 'desc'
					}, {
						xtype : 'textfield',
						name : 'authIds',
						fieldLabel : ' Id',
						hidden : true,
						listeners : {
							'change' : function(authId) {
								var root = authTree.getRootNode();
								root.eachChild(function(child) {
											child.checked = false;
											child.set('checked', false);
											authTree.fireEvent('checkchange',
													child, false);
										});
								var authIds = authId.getValue();
								if (authIds) {
									Ext.each(authIds.split(","), function(
											authId) {
										self.setNodeChecked(authId, root, self);
									});
								}
							}
						}
					}, {
						xtype : 'fieldset',
						autoHeight : true,
						title : ' ',
						width : '100%',
						items : authTree
					}],
			tbar : [{
						text : ' ',
						iconCls : 'icon-save',
						scope : this,
						handler : function() {
							self.saveRoleAuth(self);
						}
					}]
		});
		self.authFormPanel = authFormPanel;
		Ext.apply(this, {
					layout : 'border',
					border : 0,
					items : [roleGridPanel, authFormPanel]
				});
		this.callParent();
	},
	setNodeChecked : function(nodeId, node, self) {
		if (nodeId == node.data.id) {
			node.checked = true;
			node.set('checked', true);
			self.authTree.fireEvent('checkchange', node, true);
			return false;
		} else if (node.hasChildNodes()) {
			node.eachChild(function(child) {
						var result = self.setNodeChecked(nodeId, child, self);
						if (!result)
							return false;
					});
		}
		return true;
	},
	setChildNode : function(node, checked, self) {
		node.expand();
		node.eachChild(function(child) {
					child.checked = checked;
					child.set('checked', checked);
					if (child.hasChildNodes())
						self.setChildNode(child, checked, self);
				});
	},
	setParentNode : function(node, checked, self) {
		var childNoChecked = false;
		node.checked = checked;
		node.eachChild(function(child) {
					if (!child.checked) {
						childNoChecked = true;
						return false;
					}
				});
		node.set('checked', childNoChecked
						? (checked ? false : checked)
						: checked);
		if (node.parentNode != null)
			self.setParentNode(node.parentNode, checked, self);
	},
	openDelete : function(self) {
		var selection = self.roleGridPanel.getSelectionModel().getSelection()[0];
		if (selection) {
			Ext.MessageBox.confirm(' ', ' "' + selection.raw.cname
							+ '" ?', function(resu) {
						if (resu == 'yes') {
							Ext.Ajax.request({
										url : 'userAction!delete.action',
										params : {
											ids : selection.raw.cid
										},
										success : function(response, options) {
											var jsonResult = Ext.JSON
													.decode(response.responseText);
											if (jsonResult.success)
												self.roleGridPanel.getStore()
														.reload();
											Ext.Msg.alert(' ', jsonResult.msg);
										},
										failure : function(response, options) {
											var jsonResult = Ext.JSON
													.decode(response.responseText);
											Ext.Msg.alert(' ', jsonResult.msg);
										}
									});
						}
					});
		} else {
			Ext.MessageBox.alert(' ', ' ');
		}
	},
	saveRoleAuth : function(self) {
		var result = self.authFormPanel.form.getFieldValues();
		var root = self.authTree.getRootNode();
		var authIds = [];
		root.eachChild(function(child) {
					self.getChildNodeAuth(child, authIds, self);
				});
		self.authFormPanel.form.findField('authIds')
				.setValue(authIds.join(','));
		self.authFormPanel.form.submit({
					url : "roleAction!save.action",
					method : 'POST',
					success : function(f, action) {
						var result = action.result;
						if (result.success) {
							self.roleGridPanel.getStore().load();
						} else {
							Ext.Msg.alert(' ', result.message);
						}
					},
					failure : function(f, action) {
						Ext.Msg.alert(' ', resp.responseText);
					}
				});
	},
	getChildNodeAuth : function(node, authIds, self) {
		if (node.data.checked)
			authIds.push(node.data.id);
		if (node.hasChildNodes())
			node.eachChild(function(child) {
						self.getChildNodeAuth(child, authIds, self);
					});
	}
});

/**
 *  MODE
 */
Ext.define('com.RolePanel.Mode', {
			extend : 'Ext.data.Model',
			fields : [{
						name : 'id',
						type : 'string'
					}, {
						name : 'name',
						type : 'string'
					}, {
						name : 'desc',
						type : 'string'
					}, {
						name : 'type',
						type : 'string'
					}, {
						name : 'authIds',
						type : 'string'
					}, {
						name : 'authNames',
						type : 'string'
					}]

		});

public class TreeNode implements java.io.Serializable {

	private static final long serialVersionUID = 1L;
	private String id;
	private String text;//  
	private String iconCls;//  
	private List<TreeNode> children;//  
	private boolean leaf = false;
	private boolean expanded = true;//  (true,false)
	private String checked = null;
	private Object attachment;
}