Я вот не могу никак понять, для чего ExtJS нужен ?
Какие цели он преследует ?
Как я смог заметить, ExtJS это фреймворк для создания оконных приложений (только на уровне клиента) внутри браузера ?
_____________
Гнусный социопат с комплексом Бога.
Цитата (sharki @ 8.05.2012 - 19:22) |
RCuPeR для ускорения разработки приложения. |
// делаем глобальными наш store and grid
var grid
,store;
// При клике на кнопке, вызываем данную функцию, которая аяксом посылает запрос,
//получает новые данные, и обновляет грид
function ajax(){
Ext.Ajax.request({
url: 'ajax_1.php',
params: {
id: 1
},
success: function(response){
var text = response.responseText;
// кодируем в нормальный вид, JSON
var data = Ext.JSON.decode(text);
store.loadData(data);
}
});
}
Ext.onReady(function(){
// sample static data for the store
// имеем уже какие то данные, загруженные до этого, в данном случае простой массив
var myData = [
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am']
];
// Создаем некую модель данных, для структуирования и представления
Ext.define('Company', {
extend: 'Ext.data.Model',
fields: [
{name: 'company'},
{name: 'change'}
],
idProperty: 'company'
});
// Наше хранилище, которое использует грид, его и надо дергать для обновления грида
store = Ext.create('Ext.data.ArrayStore', {
model: 'Company',
data: myData
});
// create the Grid
grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{
text : 'Company',
flex : 1,
sortable : false,
dataIndex: 'company'
},
{
text : 'change',
width : 75,
sortable : true,
dataIndex: 'change'
}
],
height: 350,
width: 600,
title: 'Grid',
renderTo: 'grid'
});
});
<?php
$arr = array();
for($i=0; $i<30; $i++){
$arr[] = array("Item ".$i, $i*3);
}
echo json_encode($arr);
?>
<link rel="stylesheet" type="text/css" href="/assets/js/extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="/assets/js/extjs/ext-all.js"></script>
<script src="/assets/js/test.js"></script>
<button onclick="ajax();">Отправить</button>
<div id="grid"></div>