extjs/build/examples/classic/data/associations.js

   1 Ext.require([
   2     'Ext.data.*',
   3     'Ext.panel.Panel',
   4     'Ext.layout.container.Card',
   5     'Ext.tip.QuickTipManager'
   6 ]);
   7
   8 Ext.define('Customer', {
   9     extend: 'Ext.data.Model',
  10     fields: [{
  11         name: 'id',
  12         type: 'int'
  13     }, 'name', 'phone'],
  14     associations: [{
  15         model: 'Order',
  16         type: 'hasMany',
  17         autoLoad: true
  18     }],
  19     proxy: {
  20         type: 'ajax',
  21         url: 'customer.php'
  22     }
  23 });
  24
  25 Ext.define('Order', {
  26     extend: 'Ext.data.Model',
  27     fields: [{
  28         name: 'id',
  29         type: 'int'
  30     },{
  31         name: 'customer_id',
  32         type: 'int'
  33     },{
  34         name: 'date',
  35         type: 'date',
  36         dateFormat: 'Y-m-d'
  37     }],
  38     belongsTo: 'Customer',
  39     associations: [{
  40         model: 'OrderItem',
  41         type: 'hasMany',
  42         autoLoad: true
  43     }],
  44     proxy: {
  45         type: 'ajax',
  46         url: 'order.php'
  47     }
  48 });
  49
  50 Ext.define('OrderItem', {
  51     extend: 'Ext.data.Model',
  52     fields: [{
  53         name: 'id',
  54         type: 'int'
  55     }, {
  56         name: 'order_id',
  57         type: 'int'
  58     },'product', {
  59         name: 'quantity',
  60         type: 'int'
  61     }, {
  62         name: 'price',
  63         type: 'float'
  64     }],
  65     belongsTo: 'Order',
  66     proxy: {
  67         type: 'ajax',
  68         url: 'orderitem.php'
  69     }
  70 });
  71
  72 Ext.define('CustomerGrid', {
  73     extend: 'Ext.grid.Panel',
  74     alias: 'widget.customergrid',
  75
  76     title: 'Customers',
  77
  78     initComponent: function(){
  79         Ext.apply(this, {
  80             store: {
  81                 autoLoad: true,
  82                 model: 'Customer',
  83                 listeners: {
  84                     load: function() {
  85                         Logger.log('Customer store loaded', false);
  86                     }
  87                 }
  88             },
  89             columns: [{
  90                 text: 'Id',
  91                 dataIndex: 'id'
  92             },{
  93                 text: 'Name',
  94                 dataIndex: 'name',
  95                 flex: 1
  96             }, {
  97                 width: 140,
  98                 text: 'Phone',
  99                 dataIndex: 'phone'
 100             }],
 101             dockedItems: [{
 102                 xtype: 'toolbar',
 103                 items: {
 104                     itemId: 'load',
 105                     text: 'Load Orders',
 106                     scope: this,
 107                     handler: this.loadOrders,
 108                     disabled: true
 109                 }
 110             }]
 111         });
 112         this.callParent();
 113         this.getSelectionModel().on('selectionchange', this.onSelectChange, this);
 114     },
 115
 116     onSelectChange: function(selModel, selections) {
 117         this.active = selections[0];
 118         this.down('#load').setDisabled(!this.active);
 119     },
 120
 121     loadOrders: function(){
 122         var rec = this.active,
 123             name = rec.get('name'),
 124             owner = this.ownerCt,
 125             orders;
 126
 127
 128         orders = rec.orders();
 129         if (orders.isLoading()) {
 130             Logger.log('Begin loading orders: ' + rec.getId(), true);
 131         }
 132         orders.on('load', function(){
 133             Logger.log('Order store loaded - ' + rec.getId(), false);
 134         });
 135         owner.add({
 136             title: 'Orders - ' + rec.getId(),
 137             customer: rec,
 138             xtype: 'ordergrid',
 139             store: orders
 140         });
 141         owner.getLayout().next();
 142     }
 143 });
 144
 145 Ext.define('OrderGrid', {
 146     extend: 'Ext.grid.Panel',
 147     alias: 'widget.ordergrid',
 148
 149     initComponent: function(){
 150         Ext.apply(this, {
 151             columns: [{
 152                 text: 'Id',
 153                 dataIndex: 'id'
 154             },{
 155                 flex: 1,
 156                 text: 'Date',
 157                 dataIndex: 'date',
 158                 renderer: Ext.util.Format.dateRenderer('Y-m-d')
 159             }],
 160             dockedItems: [{
 161                 xtype: 'toolbar',
 162                 items: [{
 163                     text: 'Back',
 164                     scope: this,
 165                     handler: this.onBackClick
 166                 },{
 167                     itemId: 'load',
 168                     text: 'Load Order Items',
 169                     scope: this,
 170                     handler: this.loadItems,
 171                     disabled: true
 172                 }]
 173             }]
 174         });
 175         this.callParent();
 176         this.getSelectionModel().on('selectionchange', this.onSelectChange, this);
 177     },
 178
 179     onBackClick: function(){
 180         this.ownerCt.getLayout().prev();
 181         this.destroy();
 182     },
 183
 184     onSelectChange: function(selModel, selections) {
 185         this.active = selections[0];
 186         this.down('#load').setDisabled(!this.active);
 187     },
 188
 189     loadItems: function(){
 190         var rec = this.active,
 191             owner = this.ownerCt,
 192             orderitems;
 193
 194         orderitems = rec.orderItems();
 195         if (orderitems.isLoading()) {
 196             Logger.log('Begin loading order items - ' + rec.getId(), true);
 197         }
 198         orderitems.on('load', function(){
 199             Logger.log('Order items loaded - ' + rec.getId(), false);
 200         });
 201         owner.add({
 202             title: 'Order Items - ' + rec.getId(),
 203             xtype: 'orderitemgrid',
 204             store: orderitems
 205         });
 206         owner.getLayout().next();
 207     }
 208 });
 209
 210 Ext.define('OrderItemGrid', {
 211     extend: 'Ext.grid.Panel',
 212     alias: 'widget.orderitemgrid',
 213
 214     initComponent: function(){
 215         Ext.apply(this, {
 216             columns: [{
 217                 text: 'Id',
 218                 dataIndex: 'id'
 219             },{
 220                 flex: 1,
 221                 text: 'Product',
 222                 dataIndex: 'product'
 223             }, {
 224                 text: 'Quantity',
 225                 dataIndex: 'quantity'
 226             }, {
 227                 text: 'Price',
 228                 dataIndex: 'price',
 229                 renderer: Ext.util.Format.usMoney
 230             }],
 231             dockedItems: [{
 232                 xtype: 'toolbar',
 233                 items: [{
 234                     text: 'Back',
 235                     scope: this,
 236                     handler: this.onBackClick
 237                 }, {
 238                     itemId: 'load',
 239                     text: 'Parent association loader',
 240                     tooltip: 'Demonstrate loading parent relationships - A new record will be created so we ignore any previous associations setup',
 241                     scope: this,
 242                     handler: this.onLoadClick,
 243                     disabled: true
 244                 }]
 245             }]
 246         });
 247         this.callParent();
 248         this.getSelectionModel().on('selectionchange', this.onSelectChange, this);
 249     },
 250
 251     onSelectChange: function(selModel, selections) {
 252         this.active = selections[0];
 253         this.down('#load').setDisabled(!this.active);
 254     },
 255
 256     onBackClick: function(){
 257         this.ownerCt.getLayout().prev();
 258         this.destroy();
 259     },
 260
 261     onLoadClick: function(){
 262         var rec = this.active,
 263             id = rec.getId();
 264
 265         new ItemLoader({
 266             width: 400,
 267             height: 400,
 268             modal: true,
 269             title: this.title.replace('Order Items', 'Order Item ' + id),
 270             orderItemData: rec.data,
 271             orderItemId: id
 272         }).show();
 273     }
 274 });
 275
 276 Ext.define('ItemLoader', {
 277     extend: 'Ext.window.Window',
 278
 279     initComponent: function(){
 280         Ext.apply(this, {
 281             border: false,
 282             scrollable: true,
 283             dockedItems: [{
 284                 xtype: 'toolbar',
 285                 items: [{
 286                     text: 'Print order detail',
 287                     scope: this,
 288                     handler: this.onOrderClick
 289                 }, {
 290                     itemId: 'company',
 291                     text: 'Print company detail',
 292                     disabled: true,
 293                     scope: this,
 294                     handler: this.onCompanyClick
 295                 }]
 296             }],
 297             bodyPadding: 5,
 298             tpl: '<div>{type} {id} - {value}</div>',
 299             tplWriteMode: 'append'
 300         });
 301         this.callParent();
 302         this.orderItem = new OrderItem(this.orderItemData);
 303     },
 304
 305     onOrderClick: function(){
 306         var id = this.orderItem.get('order_id'),
 307             hasOrder = !!this.order;
 308
 309         if (!hasOrder) {
 310             Logger.log('Begin loading order - ' + id, true);
 311         }
 312         this.orderItem.getOrder({
 313             scope: this,
 314             success: function(order){
 315                 this.order = order;
 316                 this.down('#company').enable();
 317                 if (!hasOrder) {
 318                     Logger.log('Order loaded - ' + id, false);
 319                 }
 320                 this.update({
 321                     type: 'Order',
 322                     id: order.getId(),
 323                     value: Ext.Date.format(order.get('date'), 'Y-m-d')
 324                 });
 325             }
 326         });
 327     },
 328
 329     onCompanyClick: function(){
 330         var id = this.order.get('customer_id'),
 331             hasCustomer = !!this.customer;
 332
 333         if (!hasCustomer) {
 334             Logger.log('Begin loading customer - ' + id, true);
 335         }
 336         this.order.getCustomer({
 337             scope: this,
 338             success: function(customer){
 339                 this.customer = customer;
 340                 if (!hasCustomer) {
 341                     Logger.log('Customer loaded - ' + id, false);
 342                 }
 343                 this.update({
 344                     type: 'Customer',
 345                     id: customer.getId(),
 346                     value: customer.get('name')
 347                 });
 348             }
 349         });
 350     }
 351 });
 352
 353 Logger = (function(){
 354     var panel;
 355
 356     return {
 357         init: function(log){
 358             panel = log;
 359         },
 360
 361         log: function(msg, isStart){
 362             panel.update({
 363                 now: new Date(),
 364                 cls: isStart ? 'beforeload' : 'afterload',
 365                 msg: msg
 366             });
 367             panel.body.scroll('b', 100000, true);
 368         }
 369     };
 370 })();
 371
 372 Ext.onReady(function(){
 373
 374     var main = Ext.create('Ext.panel.Panel', {
 375         renderTo: document.body,
 376         width: 750,
 377         height: 400,
 378         border: false,
 379         layout: {
 380             type: 'vbox',
 381             align: 'stretch'
 382         },
 383         items: [{
 384             height: 200,
 385             xtype: 'container',
 386             layout: 'card',
 387             margin: '0 0 5 0'
 388         }, {
 389             flex: 1,
 390             title: 'Loader log',
 391             tplWriteMode: 'append',
 392             tpl: '<div class="{cls}">[{now:date("H:i:s")}] - {msg}</div>',
 393             bodyPadding: 5,
 394             scrollable: true,
 395             listeners: {
 396                 render: Logger.init
 397             }
 398         }]
 399     });
 400     Logger.log('Begin loading customer store', true);
 401     main.items.first().add({
 402         xtype: 'customergrid'
 403     });
 404
 405 });