Ext.define('CategoryTree', {
extend: 'Ext.data.Model',
fields: [
{ name:'id', type:'long' },
]
});
var treeStore = Ext.create('Ext.data.TreeStore', {
autoLoad: false,
model: 'CategoryTree',//对应上面model
proxy: {
type: 'ajax',
url: '/ProductMgr/getFrontCategoryTreeData',
reader: {
type: 'json',
}
},
rootVisible: false
});
var treePanel = Ext.create('Ext.tree.Panel', {
region: 'west',//可以直接展示
bodyStyle: 'background-color: #F6F6F6;',
store: treeStore,//对应上面store
displayField: 'nodeName',
width: '20%',
selModel: {
mode: 'SINGLE'
},
key:'',
rootVisible: false,
shadow: false,
manageHeight: false,
listeners: {
itemclick:function(v, e) {
id = e.data.id;
value = e.data.nodeName;
Ext.getCmp("treeValue").setValue(value);
treePanel.key = id;
backStore.loadPage(1);//加载下面的backStore
childStore.loadPage(1);//未写
}
},
viewConfig: {
}
});
var backStore = Ext.create('Ext.data.Store',{
model: 'CategoryTree',
proxy:
{
type: 'ajax',
url: '/CategoryMgr/systemCategoryByCategoryId',// 向该URL发送Ajax请求
reader: { // 使用Ext.data.reader.Json读取服务器数据
type: 'json',
root: 'rows' // 直接读取服务器响应的data数据
},
},
autoLoad:true// 自动加载服务器数据
});
backStore.on('beforeload',function(store,option){
var cid = treePanel.key;
var newParams = {categoryId:cid};
Ext.apply(backStore.proxy.extraParams,newParams);
});
var backCategoryGrid = Ext.create('Ext.grid.Panel', {//提供表格一样的展示//也是可以展示的
xtype: "grid",
store: backStore,//对应上面的store
columns: [
{ text: '类目ID', dataIndex: 'categoryId' },
{ text: '关联的后台类目', dataIndex: 'categoryName', flex: 1 }
],
height: 200,
width: '100%',
renderTo: Ext.getBody()
});
var middlePanel = Ext.create('Ext.panel.Panel', {//用做展示(把上面的grid嵌套进去这个plan)
title: '绑定的后台类目',
bodyStyle: 'background-color: #F6F6F6;',
border: 0,
height : 200,
items:[
backCategoryGrid//对应上面grid
]
});
var greyPanel = Ext.create('Ext.panel.Panel', {
region: 'east',
bodyStyle: 'background-color: #F6F6F6;',
width: '80%',
border: 0,
defaults: {
split: true,
autoScroll: true,
height: 30
},
items:[
topPanel,//未写
secondPanel,//未写
middlePanel,
bottomPanel//未写
]
});
Ext.create('Ext.Viewport', {//最终展示
border: 0,
layout: {
type: 'border'
},
defaults: {
split: true
},
items:[
treePanel,
greyPanel
]
});
extend: 'Ext.data.Model',
fields: [
{ name:'id', type:'long' },
]
});
var treeStore = Ext.create('Ext.data.TreeStore', {
autoLoad: false,
model: 'CategoryTree',//对应上面model
proxy: {
type: 'ajax',
url: '/ProductMgr/getFrontCategoryTreeData',
reader: {
type: 'json',
}
},
rootVisible: false
});
var treePanel = Ext.create('Ext.tree.Panel', {
region: 'west',//可以直接展示
bodyStyle: 'background-color: #F6F6F6;',
store: treeStore,//对应上面store
displayField: 'nodeName',
width: '20%',
selModel: {
mode: 'SINGLE'
},
key:'',
rootVisible: false,
shadow: false,
manageHeight: false,
listeners: {
itemclick:function(v, e) {
id = e.data.id;
value = e.data.nodeName;
Ext.getCmp("treeValue").setValue(value);
treePanel.key = id;
backStore.loadPage(1);//加载下面的backStore
childStore.loadPage(1);//未写
}
},
viewConfig: {
}
});
var backStore = Ext.create('Ext.data.Store',{
model: 'CategoryTree',
proxy:
{
type: 'ajax',
url: '/CategoryMgr/systemCategoryByCategoryId',// 向该URL发送Ajax请求
reader: { // 使用Ext.data.reader.Json读取服务器数据
type: 'json',
root: 'rows' // 直接读取服务器响应的data数据
},
},
autoLoad:true// 自动加载服务器数据
});
backStore.on('beforeload',function(store,option){
var cid = treePanel.key;
var newParams = {categoryId:cid};
Ext.apply(backStore.proxy.extraParams,newParams);
});
var backCategoryGrid = Ext.create('Ext.grid.Panel', {//提供表格一样的展示//也是可以展示的
xtype: "grid",
store: backStore,//对应上面的store
columns: [
{ text: '类目ID', dataIndex: 'categoryId' },
{ text: '关联的后台类目', dataIndex: 'categoryName', flex: 1 }
],
height: 200,
width: '100%',
renderTo: Ext.getBody()
});
var middlePanel = Ext.create('Ext.panel.Panel', {//用做展示(把上面的grid嵌套进去这个plan)
title: '绑定的后台类目',
bodyStyle: 'background-color: #F6F6F6;',
border: 0,
height : 200,
items:[
backCategoryGrid//对应上面grid
]
});
var greyPanel = Ext.create('Ext.panel.Panel', {
region: 'east',
bodyStyle: 'background-color: #F6F6F6;',
width: '80%',
border: 0,
defaults: {
split: true,
autoScroll: true,
height: 30
},
items:[
topPanel,//未写
secondPanel,//未写
middlePanel,
bottomPanel//未写
]
});
Ext.create('Ext.Viewport', {//最终展示
border: 0,
layout: {
type: 'border'
},
defaults: {
split: true
},
items:[
treePanel,
greyPanel
]
});