Thay HTML Table bằng Ext Grid

Nghịch cảnh:
Có sẳn một trang PHP/HTML sinh ra table danh sách các customer. Làm sao thay HTML table này bằng ExtJS Grid.

Vấn đề:
Truyền thống thì vẽ HTML Table đặt trong view lấy model từ controller cung cấp. Và khi về đến browser, browser chỉ việc vẽ html đó nữa mà thui. Tuy nhiên, Ext Grid/Store thì quá trình xử lý model dữ liệu lại nằm ở browser. Vậy vấn đề là lấy đâu ra dữ liệu?

Cách đã làm:
Ở server/controller: echo một object định dạng Json


<script language="JavaScript" type="text/javascript">
eval('var companiesData = <?php echo "{total: $total, results: " . json_encode($rows) . "}"?>');
</script>


Dòng eval ở trên là để khi về đến browser, sẽ tạo ra được một object companiesData. Và object này sẽ được dùng ở

ds.loadData(companiesData); //o day ds = new Ext.data.Store({ ...});


Vậy là chạy. Tuy nhiên vì đây là table đơn giản không yêu cầu nhiều về tìm kiếm, sort cho nên thay ngay thế này. Nếu có các yêu cầu khác thì nên dùng ajax call lên server/controller để lấy json data.