Данный пост посвящен двум типам пользователей с разными целями: Гуру - скажите, что стоит улучшить в данном подходе (по части JS и PHP атак же со стороны реализации, может нужно по другому всё организовать), Новичкам - демонстрация возможностей ExtJS Предыстория: Почитав пост 440hz об игре, в которой админка основана на ExtJS, решил освоить сие творение и начал с орагнизации админки. Сам проект: Строим такую структуру файлов и папок: /ext /index.html /ajax.php /scripts/info.php /scripts/info3.php Каталог "ext" содержит фреймворк ExtJS index.html HTML: <html> <head> <link rel="stylesheet" type="text/css" href="/ext/resources/css/ext-all.css"> <style> #menu .x-panel { margin-bottom:3px; margin-right:0; } #menu .x-panel-body { border:0 none; } #menu .x-panel-body li { margin:3px; } #menu .x-panel-body li a { text-decoration:none; color:#3764A0; } #menu .x-plain-body { padding: 3px 0 0 5px; } #data {padding:15px;} </style> <script type="text/javascript" src="/ext/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="/ext/ext-all-debug.js"></script> <script> var obj = "data"; function DOM(obj) { return document.getElementById(obj); } function loadContent(url,postdata) { var r = Ext.get(obj); p = postdata? postdata : ''; r.load ({ url: url, params: p, method: "POST", text: "работаем...", callback:function(el, success, response){ DOM(obj).innerHTML = ''; var answer = Ext.util.JSON.decode(response.responseText); // Если получаем текст if (answer.text !== undefined && answer.text !== null) DOM(obj).innerHTML = answer.text; // Если получаем сообщения if (answer.window !== undefined && answer.window !== null) createMsg(answer.window.msg,answer.window.title); // Если есть код if (answer.code !== undefined && answer.code !== null) eval(answer.code); } }); } function createMsg(msg,title) { Ext.Msg.show({ title: title, modal: true, msg: msg, width: 300, animEl: obj, buttons: Ext.Msg.OK }); } Ext.onReady(function(){ var viewport = new Ext.Viewport({ layout: "border", renderTo: Ext.getBody(), items: [{ id:'menu', region: 'west', xtype: 'panel', split:true, width:200, collapseMode:'mini', baseCls: 'x-plain', margins:'5 0 5 5', items:[{ xtype:'panel', frame:true, title:'Общее', collapsible:true, titleCollapse:true, contentEl:'main' },{ xtype:'', frame:true, title:'Модули', collapsible:true, titleCollapse:true, contentEl:'modules' }] },{ region: 'center', xtype: 'panel', html: '<div id="data"></div>' }] }); }); </script> </head> <body> <ul id="main" class="x-hidden"> <li> <a href="#" onclick='loadContent("/ajax.php")'>Главная</a> </li> </ul> <ul id="modules" class="x-hidden"> <li><a href="#" onclick='loadContent("/ajax.php?section=info")'>Info</a></li> <li><a href="#" onclick='loadContent("/ajax.php?section=info2")'>Info2</a></li> <li><a href="#" onclick='loadContent("/ajax.php?section=info3")'>Info3</a></li> </ul> </body> </html> ajax.php PHP: <? error_reporting(E_ALL & ~E_NOTICE); header('Content-Type: text/html; charset=windows-1251'); DEFINE('INDEX',1); function json_encode_safe($var) { return json_encode(json_fix_cyr($var)); } function json_fix_cyr($var) { if (is_array($var)) { $new = array(); foreach ($var as $k => $v) { $new[json_fix_cyr($k)] = json_fix_cyr($v); } return $new; } if (is_string($var)) { return iconv('cp1251', 'utf-8', $var); } return $var; } if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'){ $result = array(); if (isset($_GET['section']) and !empty($_GET['section'])) { if (file_exists('scripts'.DIRECTORY_SEPARATOR.$_GET['section'].'.php')) require_once('scripts'.DIRECTORY_SEPARATOR.$_GET['section'].'.php'); else { $msg = 'Нет такого модуля'; $title = 'Ошибка'; } } else { $text = '<p>Добро пожаловать в администраторскую панель</p>'; } if (!empty($text)) $result['text'] = $text; if (!empty($msg)) { $result['window']['title'] = $title; $result['window']['msg'] = $msg; } if (!empty($code)) $result['code'] = $code; echo json_encode_safe($result); exit(); } else die('Only AJAX'); ?> info.php PHP: <? if (!DEFINED('INDEX')) DIE('Any hacking attempt'); $text = '<a href="#" onclick=\'loadContent("/ajax.php")\'>Ссылка</a><br/> Логин: <input id="login" type="text" name="login"><br/> Пароль: <input id="pass" type="text" name="pass"><br/> <button onclick=\'loadContent("/ajax.php?section=info","login="+Ext.get("login").getValue()+"&pass="+Ext.get("pass").getValue());\'>Го!</button> '; if (isset($_POST['login']) or isset($_POST['pass'])) { $text = 'Ваши данные: ' . iconv('utf-8', 'cp1251', $_POST['login']) . '/' . $_POST['pass']; } info3.php PHP: <? if (!DEFINED('INDEX')) DIE('Any hacking attempt'); $code = 'alert("any JS code");'; Немного поясню код: Данные передаются в JSON. Дабы не было проблем с русскими буквами, написал функцию json_encode_safe (в ajax.php). Через переменную "section" подгружаются модули из папки scripts (при условии, что они там есть). После выполнения работы модулей формируются 3 типа ответов обработчиком: текст, окно и код. Текст выводится в div с заданным ID, окно выводится средствами ExtJS, а код выполняется через eval(). В файле info.php пример использования ссылок и отправка данных текстовых полей в ajax.php
конечно, здесь не показано все, на что способен ExtJS, но постепенно думаю получится освоить. в ближайшее время хочу приделать гриды