khilda
commented
8 years ago AXGrid 에서도 같은 내용에 대해서 문의드립니다.
브라우저의 사이즈를 줄이면 Xscroll이 정상적으로 나타나는데 Splitter 를 사용하면 콘텐츠 부분이 짤리는 현상이 나타납니다.
해당 부분 어떻게 사용해야하나요?
해당 화면 코드입니다.
<head>
<meta charset="utf-8" />
<title>AXTree Xscoll Disable</title>
<link rel="stylesheet" type="text/css" href="../css/common.css">
<link rel="stylesheet" type="text/css" href="../css/Component.css">
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/AXJ.min.js"></script>
<script src="../js/jquery.splitter.js"></script>
<link href="../css/jquery.splitter.css" rel="stylesheet" />
<script>
jQuery(function($) {
$('#widget').width(1200).height(200).split({
orientation: 'vertical',
limit: 100,
position: '220px'
});
});
</script>
<style>
#main {
background-color: #666;
}
</style>
</head>
<body STYLE="OVERFLOW:HIDDEN;">
<div id="widget" style="margin:40px;">
<div id="tree" style="min-width:300px; max-width:800px;">
<div id="AXTreeTarget" style="height:200px;"></div>
</div>
<div id="main">
<div id="AXGridTarget" style="height:200px"></div></div>
</div>
<script>
var pageID = "setList";
var myTree = new AXTree();
var fnObj = {
pageStart: function() {
fnObj.tree1();
fnObj.grid.bind();
var List = [{
no: 1,
nodeName: "LEVEL 1dddddddddddddddddddddddddd-1",
writer: "tom",
type: "0",
pno: 0
}, {
no: 11,
nodeName: "LEVEL 1-1-1",
writer: "tom",
type: "0",
pno: 1
}, ];
myTree.setList(List);
},
tree1: function() {
myTree.setConfig({
targetID: "AXTreeTarget",
theme: "AXTree_none",
relation: {
parentKey: "pno",
childKey: "no",
openKey: "open",
display: "display"
},
colGroup: [{
key: "nodeName",
label: "제목",
width: "auto", /* spliter 넓이 맞춰 자동 적용*/
align: "left",
indent: true,
getIconClass: function() {
var iconNames = "folder, AXfolder, movie, img, zip, file, fileTxt, fileTag".split(/, /g);
var iconName = "";
if (this.item.type) iconName = iconNames[this.item.type];
return iconName;
},
formatter: function() {
return "<b>" + this.item.no.setDigit(2) + "</b> : " + this.item.nodeName + " (" + this.item.writer + ")";
}
}]
});
},
grid: {
target: new AXGrid(),
bind: function(){
window.myGrid = fnObj.grid.target;
var getColGroup = function(){
return [
{key:"no", label:"번호", width:"50", },
{key:"title", label:"제목", width:"200", colHeadTool: false, sort: false},
{key:"writer", label:"작성자", width:"100"},
{key:"regDate", label:"작성일", width:"100"},
{key:"price", label:"가격", width:"100", formatter:"money"},
{key:"cost", label:"금액", width:"100"},
{key:"desc", label:"비고", width:"200"}
];
};
myGrid.contentScrollResize(true);
myGrid.setConfig({
targetID : "AXGridTarget",
sort : true, //정렬을 원하지 않을 경우 (tip
colHeadTool : false, // column tool use
fitToWidth : true, // 너비에 자동 맞춤
colGroup : getColGroup(),
remoteSort : true,
colHeadAlign: "", // 헤드의 기본 정렬 값. colHeadAlign 을 지정하면 colGroup 에서 정의한 정렬이 무시되고 colHeadAlign : false 이거나 없으면 colGroup 에서 정의한 속성이 적용됩니다.
body : { },
});
var list = [
{no:1, title:"AXGrid 첫번째 줄 입니다.", writer:"김기영", regDate:"2013-01-18", desc:"myGrid.setList 의 첫번째 사용법 list json 직접 지정 법", price:1709401, amount:10}, // item
{no:2, title:"AXGrid 두번째 줄 입니다.", writer:"정기영", regDate:"2013-01-18", desc:"myGrid.setList 의 첫번째 사용법 list json 직접 지정 법", price:12300.00, amount:7},
{no:3, title:"AXGrid 세번째 줄 입니다.", writer:"한기영", regDate:"2013-01-18", desc:"myGrid.setList 의 첫번째 사용법 list json 직접 지정 법", price:12000, amount:5},
{no:4, title:"AXGrid 세번째 줄 입니다.", writer:"박기영", regDate:"2013-01-18", desc:"myGrid.setList 의 첫번째 사용법 list json 직접 지정 법", price:13000, amount:4},
{no:5, title:"AXGrid 세번째 줄 입니다.", writer:"곽기영", regDate:"2013-01-18", desc:"myGrid.setList 의 첫번째 사용법 list json 직접 지정 법", price:3000, amount:3},
{no:6, title:"AXGrid 세번째 줄 입니다.", writer:"문기영", regDate:"2013-01-18", desc:"myGrid.setList 의 첫번째 사용법 list json 직접 지정 법", price:123000, amount:2},
{no:7, title:"AXGrid 세번째 줄 입니다.", writer:"소기영", regDate:"2013-01-18", desc:"myGrid.setList 의 첫번째 사용법 list json 직접 지정 법", price:129500, amount:1},
{no:8, title:"AXGrid 첫번째 줄 입니다.", writer:"재기영", regDate:"2013-01-18", desc:"myGrid.setList 의 첫번째 사용법 list json 직접 지정 법", price:123000, amount:10},
{no:9, title:"AXGrid 두번째 줄 입니다.", writer:"원기영", regDate:"2013-01-18", desc:"myGrid.setList 의 첫번째 사용법 list json 직접 지정 법", price:12300, amount:7},
{no:10, title:"AXGrid 세번째 줄 입니다.", writer:"고기영", regDate:"2013-01-18", desc:"myGrid.setList 의 첫번째 사용법 list json 직접 지정 법", price:12000, amount:5},
{no:11, title:"AXGrid 세번째 줄 입니다.", writer:"장기영", regDate:"2013-01-18", desc:"myGrid.setList 의 첫번째 사용법 list json 직접 지정 법", price:13000, amount:4},
{no:12, title:"AXGrid 세번째 줄 입니다.", writer:"장기영", regDate:"2013-01-18", desc:"myGrid.setList 의 첫번째 사용법 list json 직접 지정 법", price:3000, amount:3},
{no:13, title:"AXGrid 세번째 줄 입니다.", writer:"장기영", regDate:"2013-01-18", desc:"myGrid.setList 의 첫번째 사용법 list json 직접 지정 법", price:123000, amount:2},
{no:14, title:"AXGrid 세번째 줄 입니다.", writer:"장기영", regDate:"2013-01-18", desc:"myGrid.setList 의 첫번째 사용법 list json 직접 지정 법", price:129500, amount:1},
{no:15, title:"AXGrid 두번째 줄 입니다.", writer:"장기영", regDate:"2013-01-18", desc:"myGrid.setList 의 첫번째 사용법 list json 직접 지정 법", price:12300, amount:7},
{no:16, title:"AXGrid 세번째 줄 입니다.", writer:"장기영", regDate:"2013-01-18", desc:"myGrid.setList 의 첫번째 사용법 list json 직접 지정 법", price:12000, amount:5},
{no:17, title:"AXGrid 세번째 줄 입니다.", writer:"장기영", regDate:"2013-01-18", desc:"myGrid.setList 의 첫번째 사용법 list json 직접 지정 법", price:13000, amount:4},
{no:18, title:"AXGrid 세번째 줄 입니다.", writer:"장기영", regDate:"2013-01-18", desc:"myGrid.setList 의 첫번째 사용법 list json 직접 지정 법", price:3000, amount:3},
{no:19, title:"AXGrid 세번째 줄 입니다.", writer:"장기영", regDate:"2013-01-18", desc:"myGrid.setList 의 첫번째 사용법 list json 직접 지정 법", price:123000, amount:2},
{no:20, title:"AXGrid 세번째 줄 입니다.", writer:"장기영", regDate:"2013-01-18", desc:"myGrid.setList 의 첫번째 사용법 list json 직접 지정 법", price:129500, amount:1}
];
myGrid.setList(list);
//trace(myGrid.getSortParam());
}
},
};
jQuery(document.body).ready(function() {
fnObj.pageStart();
});
</script>
</body>
AXTree를 사용 중, 문의사항이 있어 글남깁니다.
영역을 Split을 사용해서 AXTree의 width가 유동적으로 변화되는데 이에 맞춰 Xscroll의 넓이도 유동적으로 적용되었으면 합니다.
AXScroll의 updateScroll();를 AXTree에서도 사용이 가능한가요?
확인 부탁드립니다~