| RogeR31415 | 25.06.2012 22:37 |
Пока вот что есть..
Вывод с БД в таблицу [EXT JS]
Требуется осуществить вывод информации с БД (имя wp, одна таблица journal, три поля id surname name) в таблицу, grid как я понимаю. Я думаю кто то да сталкивался с таким делом - можете дать рабочий пример? Или обьяснить кому не тяжело... Нужно наверное взять данные json`ном с бд - передать в стор а потом в грид? Не могу никак все в кучу собрать... Жду помощи. За ранее благодарен Всем! :cray:
|
есть json данные взятые с бд...
есть json данные взятые с бд...
[{"id":1,"surname":"фывфыв","name":"фывф ввв"},{"id":2,"surname":"фывыфаппре ","n ame":"кнокно"},{"id":3,"surname":"Putin","na me":"Vladimir"},{"id":4,"surname":"M edvedev","name":"Dmitriy"},{"id":5,"surname":"Yanu kovich","name":"Viktor"}] Теперь надо создать хранилище? |
Спасибо с этим я тоже разобрался... Сейчас вот пытаюсь понять - этож
data:{'items':[.... Вместо этого надо подключить данные от сюда json_encode($rows); ? |
нафига, хотя может быть можно и так, только вряд ли нужно :)
store.load() - обычно достаточно :) ======================== Опять же пример из документации.
Ext.define('userModel', {
extend: 'Ext.data.Model',
fields: ['name', 'surname']
});
var store = Ext.create('Ext.data.JsonStore', {
model: 'userModel',
proxy: {
type: 'ajax',
url: 'users.json',//адрес откуда берём инфу
reader: {
type: 'json',
root: 'users'
}
}
});
store.load();// грузим инфу с сервера
==================================== json файл приведите к виду.
{
success: true,
users: [
{"id":1,"surname":"фывфыв","name":"фывф� �ввв"},
{"id":2,"surname":"фывыфаппре� �","n ame":"кнокно"},{"id":3,"surname":"Putin","na me":"Vladimir"},
{"id":4,"surname":"M edvedev","name":"Dmitriy"},{"id":5,"surname":"Yanu kovich","name":"Viktor"}
]
}
фывыфаппре� � - что за кракозябры ? |
Спасибо. Делаю. Кракозябры - там мое имя было и моей подруги (для конспирации) =)
|
Конспирируетесь говорите :)
Видимо у вас много подруг и половина из них на этом форуме :D |
Правильно я думаю?
Я вообще с программированием (php) дружу... А сегодня вот начальник (я стажер) сказал за день все освоить [extjs] (не, не все - а типо ознакомиться и показать результат)... я над простым выводом инфы с бд сижу уже 4 часа.. а даже до грида не дошел(
Так должно быть как то? --- ---------- Файл show.js ---------- Смысл: Задать модель, создать хранилище, а потом уже в грид и вывод? типо...
Ext.define('showModel', {
extend: 'Ext.data.Model',
fields: ['id','surname', 'name', {name:'size', type: 'float'}, {name:'lastmod', type:'date', dateFormat:'timestamp'}]
});
var store = Ext.create('Ext.data.JsonStore', {
model: 'showModel',
proxy: {
type: 'ajax',
url: 'get.json',//адрес откуда берём инфу
reader: {
type: 'json',
root: 'images' (тут немного не понятно)
}
}
});
store.load();// грузим инфу с сервера
Вот файл get.php (он уже не нужен?) надо через *.json делать?
<?php
$mysql = mysql_connect('localhost', 'roor', '') or
die("Could not connect: " . mysql_error());
mysql_select_db('wp');
$query = 'select * from journal';
$res = mysql_query($query);
while ($row = mysql_fetch_assoc($res)) {
for ($i=0; $i < mysql_num_fields($res); $i++) {
$info = mysql_fetch_field($res, $i);
$type = $info->type;
if ($type == 'real')
$row[$info->name] = doubleval($row[$info->name]);
if ($type == 'int')
$row[$info->name] = intval($row[$info->name]);
}
$rows[] = $row;
}
echo json_encode($rows);
mysql_close($mysql);
?>
|
не не! Я тут первый из моих друзей)
|
Цитата:
Цитата:
|
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<script src='http://dev.sencha.com/deploy/ext-4.0.7-gpl/ext-all.js'></script>
<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.0.7-gpl/resources/css/ext-all.css">
<script>
Ext.onReady(function() {
var gc = [
{ dataIndex: 'id', hidden: true },
{ dataIndex: 'name', header: 'Имя' },
{ dataIndex: 'surname', header: 'Фамилия', flex: 1 }
],
sf = [];
for(var i=0; i<gc.length; i++) {
sf.push(gc[i].dataIndex);
}
Ext.define('User', {
extend: 'Ext.data.Model',
fields: sf
});
var store = Ext.create('Ext.data.JsonStore', {
model: 'User',
data: [{"id":1,"surname":"фывфыв","name":"фывф� �ввв"},{"id":2,"surname":"фывыфаппре� �","name":"кнокно"},{"id":3,"surname":"Putin","name":"Vladimir"},{"id":4,"surname":"M edvedev","name":"Dmitriy"},{"id":5,"surname":"Yanu kovich","name":"Viktor"}]
});
Ext.create('Ext.grid.Panel', {
columns: gc,
renderTo: Ext.getBody(),
store: store
});
});
</script>
</head>
<body></body>
</html>
Соответственно вместо статического указания данных вам нужно использовать proxy, примерно так:
proxy: {
type: 'ajax',
url: 'get.php',
reader: {
type: 'json'
}
}
|
nekto_O,
Все работает... Спасибище огромное! Буду разбираться дальше. Здоровья и удачи тебе добрый человек! |
Вложений: 1
ещё одна демка.
ТОлько данные грузятся с сервера и формируются в PHP скрипте. Смотреть после установки в денвер, иначе php несработает. Демка в вложении. Думаю допилить твой серверный код можно вот так.
<?php
$mysql = mysql_connect('localhost', 'roor', '') or
die("Could not connect: " . mysql_error());
mysql_select_db('wp');
$query = 'select * from journal';
$res = mysql_query($query);
while ($row = mysql_fetch_assoc($res)) {
for ($i=0; $i < mysql_num_fields($res); $i++) {
$info = mysql_fetch_field($res, $i);
$type = $info->type;
if ($type == 'real')
$row[$info->name] = doubleval($row[$info->name]);
if ($type == 'int')
$row[$info->name] = intval($row[$info->name]);
}
$rows[] = $row;
}
$result=Array(
"success"=>true,
"users"=>$rows;
);
echo json_encode($result);
mysql_close($mysql);
?>
|
DjDiablo,
Перезалей пожалуйста... Последний байт не грузит. |
DjDiablo,
Я на Zend'e сижу) |
Вложений: 1
перезалил, Хотя архив всёравно читается с ошибкой. Чо-то здесь не так с вложениями
перезалил на депозит. Качайте отсюда. На дипозите. Качать здесь |
DjDiablo,
Круть! Я понял! Еще раз спасибо. |
Вывести button!
Вот что есть...
============== index.html ==============
<!DOCTYPE html>
<html>
<head>
<title>Hospital</title>
<script type="text/javascript" src='extjs/ext-all.js'></script>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src='app.js'></script>
</head>
<body>
</body>
</html>
=========== get.php ===========
<?php
$mysql = mysql_connect('localhost', 'root', '') or
die("Could not connect: " . mysql_error());
mysql_select_db('hospital');
$query = 'select * from patient';
$res = mysql_query($query);
while ($row = mysql_fetch_assoc($res)) {
$rows[] = $row;
}
echo json_encode($rows);
mysql_close($mysql);
?>
======= app.js =======
Ext.onReady(function() {
var gc = [
{ dataIndex: 'id', header: 'ID', /*hidden: true*/ },
{ dataIndex: 'first_name', header: 'Name' },
{ dataIndex: 'last_name', header: 'Surname' },
{ dataIndex: 'time_1', header: 'time_1' },
{ dataIndex: 'time_2', header: 'time_2' },
{ dataIndex: 'time_3', header: 'time_3' },
{ dataIndex: 'date', header: 'Date', flex: 1 },
],
sf = [];
for(var i=0; i<gc.length; i++) {
sf.push(gc[i].dataIndex);
}
Ext.define('User', {
extend: 'Ext.data.Model',
fields: sf
});
var store = Ext.create('Ext.data.JsonStore', {
model: 'User',
proxy: {
type: 'ajax',
url: 'get.php',
reader:
{
type: 'json'
}
}
});
Ext.create('Ext.grid.Panel', {
width: 700,
columns: gc,
renderTo: Ext.getBody(),
store: store
});
store.load();
});
Вопрос... Как зделать чтобы в time_1 выводилась кнопочка при нажатии на которою появлялся лайтбокс? |
по простому кнопку можно воткнуть так.
{
dataIndex: 'time_1',
header: 'time_1' ,
renderer: function(val){ return '<input type="button" click="alert('+val+')" />'; }
},
более продвинутый вариант.
{
dataIndex: 'time_1',
header: 'time_1' ,
function extjsRenderer(value) {
var id = Ext.id();
//функция запустится только через 25 милисекунд, это необходимо чтобы extjs успел прорисовать таблицу
(function() {
var btn = new Ext.Button({
renderTo: id,
text: 'Price: ' + value
});
}).defer(25);
return (String.format('<div id="{0}"></div>', id));
}
}
http://docs.sencha.com/ext-js/4-1/#!...t-method-defer Родное средство дл создания конопок в таблице, как я понял только иконки
{
xtype:'actioncolumn',
items: [{
icon: 'http://im4-tub-ru.yandex.net/i?id=311939905-44-72',
tooltip: 'hello',
handler: function(grid, rowIndex, colIndex) {
alert("hello world");
}
}]
},
|
расположение на экране
Спасибо! А как заняться выводом(расположением на экране)? Хочется чтоб по центру экрана выводилась табличка..?!
|
Как вывести grid по центру? .. layout: 'ux.center', не поддается че то (мож есть у него какие секреты?)
|
Не пойму плохо или хорошо - решилось такой строчкой
style: 'margin-top: 20px; margin-left: 44%', :yes: |
grid.center(); |
nekto_O,
Интересно! Как применить? |
Продолжаю работу...
===== app.js =====
Ext.onReady(function() {
var gc = [
{ dataIndex: 'id', header: 'ID' },
{ dataIndex: 'first_name', header: 'Name' },
{ dataIndex: 'last_name', header: 'Sursame' },
{ dataIndex: 'date', header: 'Date' },
],
sf = [];
for(var i=0; i<gc.length; i++) {
sf.push(gc[i].dataIndex);
}
Ext.define('User', {
extend: 'Ext.data.Model',
fields: sf
});
var store = Ext.create('Ext.data.JsonStore', {
model: 'User',
proxy: {
type: 'ajax',
url: 'get.php',
reader:
{
type: 'json'
}
}
});
Ext.create('Ext.panel.Panel', {
//title: '____Show patients by date:____',
//width: 180,
style: 'margin-top: 20px; margin-left: 44%',
renderTo: Ext.getBody(),
border: false,
items: [{
xtype: 'datepicker',
maxDate: new Date(),
handler: function(picker, date) {
// do something with the selected date
}
}]
});
store.load();
Ext.create('Ext.grid.Panel', {
width: 310,
style: 'margin-top: 20px; margin-left: 40%',
layout: {
type:'hbox',
pack:'center'
},
columns:
[
{ dataIndex: 'id', header: 'ID', hidden: true },
{ dataIndex: 'first_name', header: 'Name' },
{ dataIndex: 'last_name', header: 'Surname' },
{
//header: 'layout',
xtype:'actioncolumn',
width:20,
items: [
{
icon: 'extjs/resources/themes/images/default/shared/right-btn.gif',
handler: function showWindow(){
if(!win){
var win = new Ext.Window({
width:500,
height:300,
title: 'TEST',
html:'<h1>My first lightBOX </h2>',
layout:'fit',
bodyStyle:{'background-color': '#FFFFFF'},
modal: true
})
}
win.show();
}
}]
},
{
//header: 'layout',
xtype:'actioncolumn',
width:20,
items: [
{
icon: 'extjs/resources/themes/images/default/shared/right-btn.gif',
handler: function showWindow(){
if(!win){
var win = new Ext.Window({
width:500,
height:300,
title: 'TEST',
html:'<h1>My first lightBOX </h2>',
layout:'fit',
bodyStyle:{'background-color': '#FFFFFF'},
modal: true
})
}
win.show();
}
}]
},
{ dataIndex: 'date', header: 'Date' }
],
renderTo: Ext.getBody(),
store: store
});
});
ХОЧУ ОСУЩЕСТВИТЬ: Чтобы пока не выбрана дата ничего не выводилось, а при нажатии на определенною дату - производилась выборка с базы данных по date... Работаю в этом направление... Кто может что подсказать, чему поучить, показать - милости прошу! За ранее благодарен! |
Пока вот что есть..
|
С чего начать... вот здесь
items: [{
xtype: 'datepicker',
maxDate: new Date(),
handler: function(picker, date) {
// do something with the selected date
}
}]
... надо написать чтоб при выборе даты производился вывод из бд данных с этой датой, да?! ***** app.js * *****
Ext.onReady(function() {
var store = Ext.create('Ext.data.JsonStore', {
proxy: {
type: 'ajax',
url: 'get.php',
reader:
{
type: 'json'
}
},
fields:['id','first_name','last_name','date']
});
Ext.create('Ext.panel.Panel', {
//title: '____Show patients by date:____',
//width: 180,
style: 'margin-top: 20px; margin-left: 44%',
renderTo: Ext.getBody(),
border: false,
items: [{
xtype: 'datepicker',
maxDate: new Date(),
handler: function(picker, date) {
// do something with the selected date
}
}]
});
store.load();
Ext.create('Ext.grid.Panel', {
width: 310,
style: 'margin-top: 20px; margin-left: 40%',
layout: {
type:'hbox',
pack:'center'},
columns:
[
{ dataIndex: 'id', header: 'ID', hidden: true },
{ dataIndex: 'first_name', header: 'Name' },
{ dataIndex: 'last_name', header: 'Surname' },
{
//header: 'layout',
xtype:'actioncolumn',
width:20,
items: [
{icon: 'extjs/resources/themes/images/default/shared/right-btn.gif',
handler: function showWindow(){
if(!win){
var win = new Ext.Window({
width:500,
height:300,
title: 'TEST',
html:'<h1>My first lightBOX </h2>',
layout:'fit',
bodyStyle:{'background-color': '#FFFFFF'},
modal: true
})
}
win.show();
}
}]
},
{ dataIndex: 'date', header: 'Date' }
],
renderTo: Ext.getBody(),
store: store
});
});
|
Вот я получаю выбранную дату
var date = Ext.Date.format(date, 'Y-m-d'); в формате гггг-мм-дд... Теперь как дальше? Передать в php скрипт который выполнит sql запрос? |
Получил дату на которую кликнул
handler: function(picker, date) {
var date = Ext.Date.format(date, 'Y-m-d');
Ext.Ajax.request({
url: 'dget.php',
//jsonData: { date: date }
params: { date: date }
});
}
Пишу в dget.php echo $_POST['date'] - ее не видно... Что не так? |
Цитата:
|
nekto_O,
Спасибо за ответ. А не видно в php-скрипте в котором я хочу по этой дате, которую выбрал кликом на календарике, сделать выборку и вывести обратно в мой грид. После
Ext.Ajax.request({
url: 'dget.php',
jsonData: { date: date }
и firebug показывает что отправляет date: "2012-06-12" к примеру... Я упорно ищу эту date в dget.php... |
params: { date: Ext.Date.format(date, 'Y-m-d') }
в php скрипте var_dump($_POST); пустой массив принтует? |
nekto_O,
Я б Вас расцеловал :dance: Ответ пришел...  var_dump($_POST); показал
array(1) {
["date"]=>
string(10) "2012-06-18"
}
Спасибо огромное, очередной раз!!! |
... как то странно, мой код тоже заработал... наверное влияние солнечной радиации)
|
handler: function(picker, date) {
var date = Ext.Date.format(date, 'Y-m-d');
Ext.Ajax.request({
url: 'dget.php',
//jsonData: { jdate: jdate },
//params: { date: Ext.Date.format(date, 'Y-m-d') }
params: { date: date }
});
}
это первоначальный вариант - и работает... не пойму, что не нравилось коду 5 часов назад?.. |
=====
app.js =====
Ext.onReady(function() {
var store = Ext.create('Ext.data.JsonStore', {
proxy: {
type: 'ajax',
url: 'get.php',
reader: {
type: 'json'
}
},
fields:[ 'id', 'first_name', 'last_name', 'date' ]
});
store.load();
Ext.create('Ext.panel.Panel', {
style: 'margin-top: 20px; margin-left: 44%',
renderTo: Ext.getBody(),
border: false,
items: [{
xtype: 'datepicker',
maxDate: new Date(),
handler: function(picker, date) {
var date = Ext.Date.format(date, 'Y-m-d');
var flag = true;
Ext.Ajax.request({
url: 'dget.php',
params: {date: date}
});
}
}]
});
Ext.create('Ext.grid.Panel', {
width: 310,
style: 'margin-top: 20px; margin-left: 40%',
layout: {
type:'hbox',
pack:'center'},
columns:[
{dataIndex: 'id', header: 'ID', hidden: true},
{dataIndex: 'first_name', header: 'Name'},
{dataIndex: 'last_name', header: 'Surname'},
{xtype:'actioncolumn',
width:20,
items: [{
icon: 'extjs/resources/themes/images/default/shared/right-btn.gif',
handler: function showWindow(){
if(!win){
var win = new Ext.Window({
width:500,
height:300,
title: 'TEST',
html:'<h1>My first lightBOX </h2>',
layout:'fit',
bodyStyle:{'background-color': '#FFFFFF'},
modal: true
})
} win.show();
}
}]
},
{ dataIndex: 'date', header: 'Date' }],
renderTo: Ext.getBody(),
store: store
});
});
Не могу реализовать такой алгоритм: 1)Выводиться панелька с календариком, и ждем пока я не выберу дату... 2) Если выбрал то делаем выборку по дате и вырисовуем грид с выбраными датами... Что то запутался( |
XMLHttpRequest'ом?
|
Тоесть, я то получаю данные с пхп скрипта, но стор и грид то уже отработали свое... Получается при нажатии пустой грид - что весьма логично)
|
Цитата:
store.load({
params: { ... }
});
|
Вроде этого?
Ext.create('Ext.panel.Panel', {
style: 'margin-top: 20px; margin-left: 44%',
renderTo: Ext.getBody(),
border: false,
items: [{
xtype: 'datepicker',
maxDate: new Date(),
handler: function(picker, date) {
var date = Ext.Date.format(date, 'Y-m-d');
Ext.Ajax.request({
url: 'put.php',
params: {date: date}
});
store.load({ // так параметры указывать?
params: { id: 'id', first_name: 'first_name', last_name: 'last_name', date: 'date' }
});
}
}]
});
|
Вот скрипт
====== put.php ======
<?php
include 'conf.php';
$date = $_POST['date'];
$query = "select * from patient where date='$date'";
$res = mysql_query($query);
if (mysql_num_rows($res) == 0) {
echo "On this day, the patients did not come!";
exit;
}
while ($row = mysql_fetch_assoc($res)) {
$rows[] = $row;
}
echo json_encode($rows);
mysql_close($db);
?>
Он дает в ответ на обращению к нему вот такое например по дате 06-18 Код:
[{"id":"1","first_name":"Vasiliy","last_name":"Pupkin","date":"2012-06-18"},{"id":"2","first_name":"Ivan","last_name":"Ivankin","date":"2012-06-18"}] |
| Часовой пояс GMT +3, время: 10:48. |