main\uc774 \ub418\ub294 Frame \ud654\uba74\uc758 \uba54\ub274 \ubd80\ubd84\uc744 \ud568\uc218\ub85c \ub9cc\ub4dc\ub294 \ubd80\ubd84\uc740 \uc0ac\uc2e4 \ud6a8\uc6a9\uc131\uc774 \ud06c\uc9c0 \uc54a\uc744 \uc218 \uc788\ub2e4. \uc65c\ub0d0\ud558\uba74 frame\uc740 \ud55c \uc0ac\uc774\ud2b8 \ub0b4\uc5d0\uc11c \ub300\ubd80\ubd84 \ud558\ub098 \uc815\ub3c4\ub9cc \ucc28\uc9c0\ud558\uace0 tree menu\uc640 \uac19\uc774 \ubc18\ubcf5\uc801\uc778 \ubd80\ubd84\uc740 \uadf8\ub807\uac8c \ub9ce\uc9c0 \uc54a\uae30 \ub54c\ubb38\uc774\ub2e4.
\n\uc0ac\uc774\ud2b8\uc758 \ub0b4\uc6a9\uc774 \uc815\ubcf4 \uc870\ud68c\uac00 \ub9ce\uc740 \uae08\uc735 \uc0ac\uc774\ud2b8\uc778 \uacbd\uc6b0 \uc870\ud68c\ub418\ub294 \ub300\ubd80\ubd84\uc758 \ub0b4\uc6a9\uc740 grid, chart \ub4f1\uc73c\ub85c \ud654\uba74\uc5d0 \ud45c\uc2dc\ud55c\ub2e4. \uc774 \ub54c grid\uc640 chart\ub97c \ud558\ub098\uc529 \uac1c\ubc1c\ud558\ub294 \uacbd\uc6b0 \ub9ce\uc740 \uc778\ub825\uacfc \uc2dc\uac04\uc774 \uc18c\uc694\ub418\uba70 \uc720\uc0ac\ud55c grid\ub97c \uc5ec\ub7ec \ud398\uc774\uc9c0\uc5d0 \uac78\uccd0\uc11c \ubcf5\uc0ac&\ubd99\uc5ec\ub123\uae30(Copy&Pate)\ud558\ub294 \uac83 \ub610\ud55c \uc26c\uc6b4 \uc77c\uc740 \uc544\ub2c8\ub2e4.
\n\uc774\ub7f0 \uacbd\uc6b0 \uc5ed\uc2dc php\ub85c \uacf5\ud1b5\ud568\uc218\ub97c \uac1c\ubc1c\ud568\uc73c\ub85c\uc368 \ubcf5\uc7a1\ud55c \ubb38\uc81c\ub97c \uc77c\uc815\ubd80\ubd84 \uc27d\uac8c \ud574\uacb0\ud560 \uc218 \uc788\ub2e4.<\/p>\n
\uba3c\uc800 common.php\ub780 \uacf5\ud1b5 \ud30c\uc77c\uc744 \ud558\ub098 \ub9cc\ub4e0\ub2e4. grid.php\ub098 chart.php\ub85c \ubd84\ub9ac\ud574\uc11c \ub530\ub85c\ub530\ub85c \ub9cc\ub4e4\uc5b4\ub3c4 \uc0c1\uad00\uc5c6\ub2e4. \uc5b4\uc9dc\ud53c \ud654\uba74\uc5d0\ub294 \ud638\ucd9c\ud55c \ud568\uc218 \ubd80\ubd84\ub9cc \ud3ec\ud568\ub418\uae30 \ub54c\ubb38\uc774\ub2e4.<\/p>\n
common.php\r\n\r\n<?php\r\n\r\n\/\/ grid\ub97c \ud654\uba74\uc5d0 \ubfcc\ub824\uc8fc\ub294 \ud568\uc218\r\n\/\/ gridName : Unique\ud55c gridName\r\n\/\/ dataURL : ajax\ub85c \ub370\uc774\ud130\ub97c \ud638\ucd9c\ud558\uae30 \uc704\ud55c URL \uc8fc\uc18c(\uc2e4\uc81c \ub370\uc774\ud130\ub294 \ub2f9\uc5f0\ud788 ajax\ub85c \ubc1b\uc544\uc640\uc57c \ud55c\ub2e4)\r\n\/\/ header1 : grid\uc758 header(\uceec\ub7fc\uba85) 1\uc740 \uac00\uc7a5 \uc717\uc904\r\n\/\/ header2 : grid\uc758 \ub450\ubc88\uc9f8 header(\uceec\ub7fc\uba85), \uccab\ubc88\uc9f8\uc640 \ub450\ubc88\uc9f8\uac00 \ub3d9\uc77c\ud558\uba74 \ud558\ub098\uc758 cell\ub85c merge\ub41c\ub2e4. header2\uac00 null\uc774\uba74 \ub450\ubc88\uc9f8 \uceec\ub7fc\uc740 \ubcf4\uc774\uc9c0 \uc54a\ub294\ub2e4.\r\n\/\/ columnWidth : \ubc30\uc5f4\ud615\ud0dc\ub85c \ubc1b\ub294 \uac01 \uceec\ub7fc\uc758 \ub113\uc774\r\n\/\/ datafield : \uc11c\ubc84\ub85c\ubd80\ud130 \uc218\uc2e0\ud574\uc11c \uccab\ubc88\uc9f8 \uceec\ub7fc\ubcc4\ubd80\ud130 \ubcf4\uc5ec\uc904 field\uba85 (json\ud615\ud0dc\ub85c \ub370\uc774\ud130\ub97c \ubc1b\uc744 \uac83\uc774\ubbc0\ub85c field\uba85\uc744 \ubc18\ub4dc\uc2dc \uc368\uc57c\ud55c\ub2e4.)\r\n\/\/ align : \ubc30\uc5f4\ud615\ud0dc\ub85c \ubc1b\ub294 \uac01 \uceec\ub7fc\ubcc4 \uc815\ub82c \ubc29\uc2dd(left, center, right)\r\n\/\/ targetid : grid\ub97c \ud654\uba74\uc5d0 \uc704\uce58\ud558\uae30 \uc704\ud55c element id. \ud574\ub2f9 element\uc5d0 overriding\ud55c\ub2e4.\r\n\/\/ gridHeight : grid \uc804\uccb4\uc758 \ub192\uc774\r\n\/\/ autoload : \ucc98\uc74c grid\uc0dd\uc131\uc2dc \ub370\uc774\ud130\ub97c loading\ud560 \uac83\uc778\uc9c0 \uc5ec\ubd80. string\ud615\ud0dc.\r\nfunction GridType1($gridName, $dataURL, $header1, $header2, $columnWidth, $datafield, $align, $targetid, $gridHeight, $autoload=\"false\")\r\n{\r\n?>\r\n\t\tExt.onReady(function(){\r\n\t\t Ext.define('<?=$gridName?>',{\r\n\t\t extend: 'Ext.data.Model',\r\n\t\t proxy: {\r\n\t\t type: 'ajax',\r\n\t\t reader: 'json'\r\n\t\t },\r\n\t\t fields: [ <?\r\n\t\t $arr_count = count($datafield);\r\n\t\t for ( $i = 0; $i < $arr_count; $i++ ) {\r\n\t\t \techo \"'\". $datafield[$i] . \"'\";\r\n\t\t \tif ( $i < $arr_count - 1) echo \",\"; \t\t } ?> ]\r\n\t\t });\r\n\r\n\t\t \/\/ create the Data Store\r\n\t\t var store = Ext.create('Ext.data.Store', {\r\n\t\t model: '<?=$gridName?>',\r\n\t\t autoLoad: <?=$autoload?>,\r\n\t\t proxy: {\r\n\t\t type: 'ajax',\r\n\t\t url: '<?=$dataURL?>',\r\n\t\t reader: {\r\n\t\t type: 'json'\r\n\t\t }\r\n\t\t }\r\n\t\t });\r\n\t\t \/\/ create the grid\r\n\t\t Ext.create('Ext.grid.Panel', {\r\n\t\t \tid: '<?=$gridName?>',\r\n\t\t store: store,\r\n\t\t columnLines: true, \/\/ check.... \r\n\t\t font: '10px',\r\n\t\t cls: 'grid-row-span',\r\n\t\t columns: [ <?\r\n\t\t \tif ( count($header1) == count($header2) ) {\r\n\t\t \t\t$header_count = count($header1);\r\n\t\t \t\tfor ( $i = 0; $i < $header_count; $i++ ) { \t\t \t\t\tif ( strcmp($header1[$i], $header2[$i] ) != 0 || \t\t \t\t\t\t($i > 0 && strcmp($header1[$i-1], $header1[$i] ) == 0) || \r\n\t\t \t\t\t\t($i+1 < $header_count && strcmp($header1[$i+1], $header1[$i] ) == 0 )) { \t\t \t\t\t\techo \"{text: '{$header1[$i]}',\\n\"; \t\t \t\t\t\techo \"\tcolumns: [\\n\"; \t\t \t\t\t\twhile ( $header_count > $i && strcmp($header1[$i+1], $header1[$i]) == 0) {\r\n\t\t \t\t\t\t\techo \"{text: '{$header2[$i]}', style:'text-align:center', align:'\".$align[$i].\"', width:{$columnWidth[$i]}, minWidth:{$columnWidth[$i]}, autoSizeColumn: true, dataIndex:'{$datafield[$i]}'}\";\r\n\t\t \t\t\t\t\tif ( $header_count > $i+1 && strcmp($header1[$i+1], $header1[$i]) == 0 ) \r\n\t\t \t\t\t\t\t\techo \",\";\r\n\t\t \t\t\t\t\t$i++;\r\n\t\t \t\t\t\t}\r\n\t \t\t\t\t\techo \"{text: '{$header2[$i]}', style:'text-align:center', align:'\".$align[$i].\"', width:{$columnWidth[$i]}, minWidth:{$columnWidth[$i]}, autoSizeColumn: true, dataIndex:'{$datafield[$i]}'}\";\r\n\t\t \t\t\t\techo \"]\\n\";\r\n\t\t \t\t\t\techo \"}\\n\";\r\n\t\t \t\t\t}\r\n\t\t \t\t\telse {\r\n\t\t\t \t\t\techo \"{text: '{$header1[$i]}', style:'text-align:center', align:'\".$align[$i].\"', width:{$columnWidth[$i]}, minWidth:{$columnWidth[$i]}, autoSizeColumn: true, dataIndex:'{$datafield[$i]}'}\";\r\n\t\t\t \t\t}\r\n\t\t \t\t\tif ( $i < $header_count - 1 ) echo \",\\n\";\r\n\t\t \t\t}\r\n\t\t \t}\r\n\t\t \telse if (count($header2) == 0 ) {\r\n\t\t \t\t$header_count = count($header1);\r\n\t\t \t\tfor ( $i = 0; $i < $header_count; $i++ ) {\r\n\t \t\t\t\techo \"{text: '{$header1[$i]}', style:'text-align:center', align:'\".$align[$i].\"', width:{$columnWidth[$i]}, minWidth:{$columnWidth[$i]}, autoSizeColumn: true, dataIndex:'{$datafield[$i]}'}\";\r\n\t\t \t\t\tif ( $i < $header_count - 1 ) echo \",\\n\"; \t\t \t\t} \t\t \t} \t\t ?>\r\n\t\t ],\r\n\t\t renderTo:'',\r\n\t\t height: ,\r\n\t\t layout: 'fit',\r\n\t\t viewConfig: { \/* check... *\/\r\n\t\t stripeRows: true,\r\n\t\t\t listeners: {\r\n\t\t\t refresh: function(dataview) {\r\n\t\t\t Ext.each(dataview.panel.columns, function(column) {\r\n\t\t\t if (column.autoSizeColumn === true)\r\n\t\t\t column.autoSize();\r\n\t\t\t })\r\n\t\t\t }\r\n\t\t\t }\r\n\t\t }\r\n\t\t });\r\n\t\t});\r\n<? \t} \r\n?><\/pre>\n\uc2e4\uc81c\ub85c grid\ub294 \ud45c\ud604\ud558\ub294 \ub370\uc774\ud130\uc5d0 \ub530\ub77c\uc11c \uc57d\uac04\uc529 \ubaa8\uc591\uc774 \ub2ec\ub77c\uc9c8 \uc218 \uc788\uc73c\ubbc0\ub85c \ud558\ub098\uc758 grid\ub9cc \uc0ac\uc6a9\ud560 \uc218\ub294 \uc5c6\ub2e4. \ub530\ub77c\uc11c gridType1, 2, 3 \ub4f1\uc73c\ub85c \uc11c\ub85c \ub2e4\ub978 \uc774\ub984\uc744 \uc8fc\uc5c8\ub2e4.<\/p>\n
\uc774\uc81c \uc774\ub807\uac8c \uacf5\ud1b5\uc73c\ub85c \uc815\uc758\ub41c library\ub97c \ud654\uba74 \ud30c\uc77c\uc5d0\uc11c \ud638\ucd9c\ub9cc \ud558\uba74 \ub41c\ub2e4.<\/p>\n
SGAMS_1230_SUB.php\r\n<?\r\n \tinclude 'AMS_top.php';\r\n \tinclude '..\/lib\/mssql.php';\r\n \tinclude '..\/lib\/common.php';\r\n $conn_ms = ms_dbconn(); \r\n?>\r\n<script type=\"text\/javascript\">\r\n<?\r\n \t$header1 = array('\uc77c\uc790', '\uc6b4\uc6a9\uaddc\ubaa8', '\uc6b4\uc6a9\uaddc\ubaa8','\uc6b4\uc6a9\uaddc\ubaa8', '\uae30\uac04\uc218\uc775\ub960', '\uae30\uac04\uc218\uc775\ub960'); \t$header2 = array('\uc77c\uc790', '\ub9e4\uc218', '\ub9e4\ub3c4','\ud3c9\uac00\uae08\uc561', '\uc218\uc775\ub960', '\ub204\uc801\uc218\uc775\ub960');\r\n \t$columnWidth = array(150, 150, 150, 150, 150, 150 );\r\n \t$datafield = array('field0', 'field1', 'field2', 'field3', 'field4', 'field5');\r\n \t$align = array('center', 'right', 'right', 'right', 'right', 'right');\r\n\t$dataUrl1 = \"reply.php?peGrp=A&FromDate=2013-01-04\";\r\n \/\/ Grid\ud568\uc218\ub97c \ud638\ucd9c\ud558\ub294 \ubd80\ubd84\r\n \tGridType1('Grid2', $dataUrl1, $header1, $header2, $columnWidth, $datafield, $align, 'grid-main2', 200); <\/strong>\r\n?>\r\n\r\nfunction onClick();\r\n...<\/pre>\n\uc774 grid\ub294 \uac00\ub85c \ub610\ub294 \uc138\ub85c\ub85c \ud5e4\ub354 \ub0b4\uc5d0 \ub3d9\uc77c\ud55c \ud14d\uc2a4\ud2b8\uac00 \uc788\uc73c\uba74 merge\uac00\ub418\ub294 \uad6c\uc870\ub85c \ub418\uc5b4 \uc788\uc5b4\uc11c header\uac00 2\uac1c\uc758 array\ub85c \uc815\uc758\ub418\uc5b4 \uc788\ub2e4. \uadf8\ub9ac\uace0 \uac01 column width\ub3c4 array\ub85c \uc785\ub825 \ubc1b\ub3c4\ub85d \ud558\uc600\uc73c\uba70, \uac01 \uc140\ubcc4 \uc815\ub82c\uae30\uc900\uc778 align\ub3c4 array\ub85c \uc785\ub825 \ubc1b\ub294\ub2e4.
\n\uc5ec\uae30\uc11c datafield array\uac00 \uc788\ub294\ub370 \uc774\ub294 \uac01 grid\uc758 \uc2e4\uc81c \ub0b4\uc6a9\uc744 ajax\ub85c \uc870\ud68c\ud574\uc11c \uc870\ud68c \uacb0\uacfc\ub97c grid\ub0b4 column\uc5d0 \ubfcc\ub9b4 \ub54c column\ub4e4\uacfc ajax\uc758 json \uad6c\uc870\uc640 \uc77c\uce58\uc2dc\ud0a4\uae30 \uc704\ud55c \ubd80\ubd84\uc774\ub2e4. \uc989, server side\uc5d0\uc11c \uc870\ud68c\ub41c \uacb0\uacfc\uac00 json\uc73c\ub85c \ud654\uba74\uc5d0 \ubfcc\ub824\uc9c0\ub294\ub370 \uc774 \ub54c \uc870\ud68c \uacb0\uacfc\uc758 json header\uc640 \uac01 column\uc744 \ub9e4\uce58\uc2dc\ud0a4\uae30 \uc704\ud574 \uc0ac\uc6a9\ud55c\ub2e4.
\n\uc774 \ub54c \uc11c\ubc84\uce21(ajax\uc5d0 \uc751\ub2f5\ud558\ub294 \uc11c\ubc84)<\/p>\n
client server\r\n\r\npresentation layer : grid(column1, column2, column3...)\r\ndata layer : data model(field1, field2, field3...) dbms(field1, field2, field3...)\r\ndata : ajax(json: field1, field2, field3...) <-----------------> reply.php(json : field1, field2, ...)<\/pre>\nreply.php \uacb0\uacfc\r\n[{\"id\":\"RISKA001\",\"field1\":\"\uc804\uccb4\uc790\uae08(\uc7a1\ube44\ud3ec\ud568)\",\"field2\":\"N\",\"field3\":\"2010-01-01\",\"field4\":\"2013-12-31\",\"field5\":\"\",\"field6\":\"\",\"field7\":0,\"field8\":\"\"},\r\n{\"id\":\"RISKA002\",\"field1\":\"\uc804\uccb4\uc790\uae08(\uc7a1\ube44\uc81c\uc678)\",\"field2\":\"N\",\"field3\":\"2010-01-01\",\"field4\":\"2013-12-31\",\"field5\":\"\",\"field6\":\"\",\"field7\":0,\"field8\",\"\"},\r\n{\"id\":\"RISKA003\",\"field1\":\"\uc218\uc785\",\"field2\":\"N\",\"field3\":\"2010-01-01\",\"field4\":\"2013-12-31\",\"field5\":\"\",\"field6\":\"\",\"field7\":0,\"field8\":\"\"},\r\n{\"id\":\"RISKA004\",\"field1\":\"\ub9e4\ucd9c\",\"field2\":\"N\",\"field3\":\"2010-01-01\",\"field4\":\"2013-12-<\/pre>\n\uc11c\ubc84\uce21\uc5d0\uc11c \ub370\uc774\ud130\ub97c \ubcf4\ub0b4\uc8fc\ub294 \ud504\ub85c\uadf8\ub7a8\uc740 \ub370\uc774\ud130\ub97c json\uc73c\ub85c \ubcf4\ub0b4\uc900\ub2e4.
\n\uc989 \uc11c\ubc84 -> json -> \uc804\uc1a1 -> web brower -> json -> ajax \uc5d4\uc9c4 -> javascript -> grid \uc758 \ud750\ub984\uc744 \ubcf4\uc778\ub2e4.
\njson\uc740 php\uc5d0 \uad6c\ud604\ub418\uc5b4 \uc788\ub294 \uae30\ubcf8 \uae30\ub2a5\uc774\uba70 string\uc73c\ub85c \ub370\uc774\ud130\ub97c \ubcf4\ub0bc \uc218 \uc788\ub294 \uacbd\ub7c9\ud654\ub41c \uc88b\uc740 \ud504\ub85c\ud1a0\ucf5c\uc774\ub2e4. \ub2e8, \uc22b\uc790\uc640 \ubb38\uc790\uc5f4\uc5d0 \ub300\ud55c \uad6c\ubd84\uc744 \ud63c\ub3d9\ud558\uc9c0 \uc54a\ub3c4\ub85d \ud574\uc57c \ud55c\ub2e4.
\n\uac1c\ub150\uc774 \uc870\uae08 \uc5b4\ub824\uc6b8 \uc218\ub3c4 \uc788\ub294\ub370 \uc9c1\uc811 \uad6c\ud604\ud574\uc11c \uc2e4\ud589\ud55c \ub2e4\uc74c \ud654\uba74\uc5d0\uc11c \uc18c\uc2a4\ubcf4\uae30\ub97c \uc120\ud0dd\ud574\uc11c \ubcf4\uba74 grid\uc758 field array \ud30c\ub77c\ubbf8\ud130\uac00 \ud654\uba74\uc5d0 \uc5b4\ub5bb\uac8c \ub9e4\ud551\ub418\ub294 \uc9c0 \uc27d\uac8c \ud655\uc778\ud560 \uc218 \uc788\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"
main\uc774 \ub418\ub294 Frame \ud654\uba74\uc758 \uba54\ub274 \ubd80\ubd84\uc744 \ud568\uc218\ub85c \ub9cc\ub4dc\ub294 \ubd80\ubd84\uc740 \uc0ac\uc2e4 \ud6a8\uc6a9\uc131\uc774 \ud06c\uc9c0 \uc54a\uc744 \uc218 \uc788\ub2e4. \uc65c\ub0d0\ud558\uba74 frame\uc740 \ud55c \uc0ac\uc774\ud2b8 \ub0b4\uc5d0\uc11c \ub300\ubd80\ubd84 \ud558\ub098 \uc815\ub3c4\ub9cc \ucc28\uc9c0\ud558\uace0 tree menu\uc640 \uac19\uc774 \ubc18\ubcf5\uc801\uc778 \ubd80\ubd84\uc740 \uadf8\ub807\uac8c \ub9ce\uc9c0 \uc54a\uae30 \ub54c\ubb38\uc774\ub2e4. \uc0ac\uc774\ud2b8\uc758 \ub0b4\uc6a9\uc774 \uc815\ubcf4 \uc870\ud68c\uac00 \ub9ce\uc740 \uae08\uc735 \uc0ac\uc774\ud2b8\uc778 \uacbd\uc6b0 \uc870\ud68c\ub418\ub294 \ub300\ubd80\ubd84\uc758 \ub0b4\uc6a9\uc740 grid, chart \ub4f1\uc73c\ub85c \ud654\uba74\uc5d0 \ud45c\uc2dc\ud55c\ub2e4. \uc774 \ub54c grid\uc640 chart\ub97c \ud558\ub098\uc529 \uac1c\ubc1c\ud558\ub294 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-132","post","type-post","status-publish","format-standard","hentry","category-extjs"],"_links":{"self":[{"href":"https:\/\/www.fsquare.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/132","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fsquare.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fsquare.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fsquare.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fsquare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=132"}],"version-history":[{"count":4,"href":"https:\/\/www.fsquare.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/132\/revisions"}],"predecessor-version":[{"id":153,"href":"https:\/\/www.fsquare.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/132\/revisions\/153"}],"wp:attachment":[{"href":"https:\/\/www.fsquare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=132"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fsquare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=132"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fsquare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=132"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}