-/*!
- * Ext JS Library 3.3.1
- * Copyright(c) 2006-2010 Sencha Inc.
- * licensing@sencha.com
- * http://www.sencha.com/license
- */
+Ext.require(['*']);
+
Ext.onReady(function() {
var patients = [{
telephone: 'N/A'
}];
- var PatientRecord = Ext.data.Record.create([{
- name: 'name'
- }, {
- name: 'address'
- }, {
- name: 'telephone'
- }]);
+ Ext.define('Patient', {
+ extend: 'Ext.data.Model',
+ idProperty: 'insuranceCode',
+ fields: [{
+ name: 'name'
+ }, {
+ name: 'address'
+ }, {
+ name: 'telephone'
+ }]
+ });
- var patientStore = new Ext.data.Store({
- data: patients,
- reader: new Ext.data.JsonReader({
- id: 'insuranceCode'
- }, PatientRecord)
+ var patientStore = Ext.create('Ext.data.Store', {
+ model: 'Patient',
+ data: patients
});
var hospitals = [{
address: 'Whitechapel, E1 1BB',
telephone: '020 7377 7000'
}];
-
- var HospitalRecord = Ext.data.Record.create([{
- name: 'name'
- }, {
- name: 'address'
- }, {
- name: 'telephone'
- }]);
- var hospitalStore = new Ext.data.Store({
- data: hospitals,
- reader: new Ext.data.JsonReader({
- id: 'code'
- }, HospitalRecord)
+ Ext.define('Hospital', {
+ extend: 'Ext.data.Model',
+ idProperty: 'code',
+ fields: [{
+ name: 'name'
+ }, {
+ name: 'address'
+ }, {
+ name: 'telephone'
+ }]
+ });
+
+ var hospitalStore = Ext.create('Ext.data.Store', {
+ model: 'Hospital',
+ data: hospitals
});
-
- var patientView = new Ext.DataView({
+
+ var patientView = Ext.create('Ext.view.View', {
cls: 'patient-view',
tpl: '<tpl for=".">' +
'<div class="patient-source"><table><tbody>' +
'</tbody></table></div>' +
'</tpl>',
itemSelector: 'div.patient-source',
- overClass: 'patient-over',
- selectedClass: 'patient-selected',
+ overItemCls: 'patient-over',
+ selectedItemClass: 'patient-selected',
singleSelect: true,
store: patientStore,
listeners: {
}
});
- var helpWindow = new Ext.Window({
+ var helpWindow = Ext.create('Ext.Window', {
title: 'Source code',
width: 920,
height: 500,
closeAction: 'hide',
- bodyCfg: {tag: 'textarea', readonly: true},
- bodyStyle: {
- backgroundColor: 'white',
- margin: '0px',
- border: '0px none'
- },
+ renderTpl: [
+ '<textarea readonly class="{baseCls}-body<tpl if="bodyCls"> {bodyCls}</tpl><tpl if="frame"> {baseCls}-body-framed</tpl><tpl if="ui"> {baseCls}-body-{ui}</tpl>"<tpl if="bodyStyle"> style="{bodyStyle}"</tpl>></div>'
+ ],
listeners: {
render: function(w) {
Ext.Ajax.request({
}
});
- var hospitalGrid = new Ext.grid.GridPanel({
+ var hospitalGrid = Ext.create('Ext.grid.Panel', {
title: 'Hospitals',
region: 'center',
margins: '0 5 5 0',
helpWindow.show();
}
}],
+ sortableColumns: false,
columns: [{
dataIndex: 'name',
header: 'Name',
header: 'Telephone',
width: 100
}],
+ features: [{
+ ftype:'rowbody',
+ rowBodyDivCls: 'hospital-target',
+ getAdditionalData: function() {
+ return Ext.apply(Ext.grid.feature.RowBody.prototype.getAdditionalData.apply(this, arguments), {
+ rowBody: 'Drop Patient Here'
+ });
+ }
+ }],
viewConfig: {
- tpl: new Ext.XTemplate('<div class="hospital-target">Drop Patient Here</div>'),
- enableRowBody: true,
- getRowClass: function(rec, idx, p, store) {
- p.body = this.tpl.apply(rec.data);
+ listeners: {
+ render: initializeHospitalDropZone
}
},
- store: hospitalStore,
- listeners: {
- render: initializeHospitalDropZone
- }
+ store: hospitalStore
});
- new Ext.Viewport({
+ Ext.create('Ext.Viewport', {
layout: 'border',
items: [{
cls: 'app-header',
* to perform the drop operation.
*/
function initializePatientDragZone(v) {
- v.dragZone = new Ext.dd.DragZone(v.getEl(), {
+ v.dragZone = Ext.create('Ext.dd.DragZone', v.getEl(), {
// On receipt of a mousedown event, see if it is within a draggable element.
// Return a drag data object if so. The data object can contain arbitrary application
// data, but it should also contain a DOM element in the ddel property to provide
// a proxy to drag.
getDragData: function(e) {
- var sourceEl = e.getTarget(v.itemSelector, 10);
+ var sourceEl = e.getTarget(v.itemSelector, 10), d;
if (sourceEl) {
d = sourceEl.cloneNode(true);
d.id = Ext.id();
repairXY: Ext.fly(sourceEl).getXY(),
ddel: d,
patientData: v.getRecord(sourceEl).data
- }
+ };
}
},
*
* We provide implementations of each of these to provide behaviour for these events.
*/
-function initializeHospitalDropZone(g) {
- g.dropZone = new Ext.dd.DropZone(g.getView().scroller, {
+function initializeHospitalDropZone(v) {
+ var gridView = v,
+ grid = gridView.up('gridpanel');
+
+ grid.dropZone = Ext.create('Ext.dd.DropZone', v.el, {
// If the mouse is over a target node, return that node. This is
// provided as the "target" parameter in all "onNodeXXXX" node event handling functions
},
// On entry into a target node, highlight that node.
- onNodeEnter : function(target, dd, e, data){
- Ext.fly(target).addClass('hospital-target-hover');
+ onNodeEnter : function(target, dd, e, data){
+ Ext.fly(target).addCls('hospital-target-hover');
},
// On exit from a target node, unhighlight that node.
- onNodeOut : function(target, dd, e, data){
- Ext.fly(target).removeClass('hospital-target-hover');
+ onNodeOut : function(target, dd, e, data){
+ Ext.fly(target).removeCls('hospital-target-hover');
},
// While over a target node, return the default drop allowed class which
// places a "tick" icon into the drag proxy.
- onNodeOver : function(target, dd, e, data){
+ onNodeOver : function(target, dd, e, data){
return Ext.dd.DropZone.prototype.dropAllowed;
},
// We can use the data set up by the DragZone's getDragData method to read
// any data we decided to attach.
onNodeDrop : function(target, dd, e, data){
- var rowIndex = g.getView().findRowIndex(target);
- var h = g.getStore().getAt(rowIndex);
- var targetEl = Ext.get(target);
- targetEl.update(data.patientData.name+', '+targetEl.dom.innerHTML);
+ var rowBody = Ext.fly(target).findParent('.x-grid-rowbody-tr', null, false),
+ mainRow = rowBody.previousSibling,
+ h = gridView.getRecord(mainRow),
+ targetEl = Ext.get(target);
+
+ targetEl.update(data.patientData.name + ', ' + targetEl.dom.innerHTML);
Ext.Msg.alert('Drop gesture', 'Dropped patient ' + data.patientData.name +
' on hospital ' + h.data.name);
return true;
}
});
-}
\ No newline at end of file
+}
git.ithinksw.org / extjs.git / blobdiff