Results 1 to 3 of 3

Thread: Classes and Panel problem

  1. #1
    Sencha User olivierpons's Avatar
    Join Date
    Dec 2009
    Location
    Aix en Provence,France
    Posts
    125

    Question Classes and Panel problem

    Hi all,

    I've made three classes :
    (1) class Writer.Grid displays a grid
    (2) class Writer.Form displays a form
    (3) class Writer.Panel includes is a Panel with a "border" layout that :
    - has a (1) "Writer.Grid" on the top ("north")
    - has a (2) "Writer.Form" on the bottom ("center").

    Here's the display, and it works:



    Here's the code for the #1 example that works perfectly (i'm sorry it's 200 lines long and I've cut almost all what I could):

    Code:
      1 Ext.define('Writer.Form', {
      2     extend: 'Ext.form.Panel',
      3 
      4     requires: ['Ext.form.field.Text'],
      5 
      6     initComponent: function(){
      7         this.addEvents('create');
      8         Ext.apply(this, {
      9             activeRecord: null,
     10             iconCls: 'icon-user',
     11             frame: true,
     12             defaultType: 'textfield',
     13             bodyPadding: 5,
     14             fieldDefaults: {
     15                 anchor: '100%',
     16                 width: 500,
     17                 labelWidth: 200,
     18                 labelAlign: 'right'
     19             },
     20             items: [{
     21                 xtype:'tabpanel',
     22                 activeTab: 0,
     23                 defaults:{
     24                     bodyStyle:'padding:10px'
     25                 },
     26                 items:[{
     27                     title:'Page \'partenaires\'',
     28                     defaultType: 'textfield',
     29                     items: []
     30                 }]
     31             }]
     32         });
     33         this.callParent();
     34     },
     35 
     36     setActiveRecord: function(record){
     37         this.activeRecord = record;
     38     },
     39 
     40     onSave: function(){
     41     },
     42 
     43     onCreate: function(){
     44     },
     45 
     46     onReset: function(){
     47     }
     48 });
     49 
     50 Ext.define('Writer.Grid', {
     51     extend: 'Ext.grid.Panel',
     52 
     53     requires: [
     54         'Ext.form.field.Text',
     55         'Ext.toolbar.TextItem'
     56     ],
     57 
     58     initComponent: function(){
     59 
     60         Ext.apply(this, {
     61             iconCls: 'icon-grid',
     62             frame: true,
     63             plugins: [],
     64             columns: [{
     65                 header: 'id',
     66                 width: 50,
     67                 sortable: true,
     68                 dataIndex: 'id',
     69                 field: {
     70                     type: 'textfield'
     71                }
     72             }, {
     73                 header: 'Description',
     74                 width: 490,
     75                 sortable: true,
     76                 dataIndex: 'description',
     77                 field: {
     78                     type: 'textfield'
     79                }
     80             }]
     81         });
     82         this.callParent();
     83     }
     84 });
     85 
     86 Ext.define('Writer.Panel', {
     87     extend: 'Ext.panel.Panel',
     88 
     89     initComponent: function(){
     90         this.writerForm = new Writer.Form({
     91             listeners: {
     92                 create: function(form, data){
     93                     this.store.insert(0, data);
     94                 }
     95             }
     96         });
     97         this.writerGrid = new Writer.Grid({
     98             store: this.store
     99         });
    100         Ext.apply(this, {
    101             layout:'border',
    102             items:[{
    103                 region:'north',
    104                 id:'north-panel',
    105                 title:'Partenaires',
    106                 split:true,
    107                 height: '50%',
    108                 minHeight: 50,
    109                 maxHeight: 500,
    110                 collapsible: true,
    111                 margins:'0',
    112                 cmargins:'10 10 10 10',
    113                 layout:'fit',
    114                 items: [this.writerGrid]
    115             },{
    116                 region:'center',
    117                 margins:'0 5 5 5',
    118                 layout:'fit',
    119                 autoScroll:true,
    120                 items: [this.writerForm]
    121             }]
    122         });
    123         this.callParent();
    124     }
    125 });
    126 
    127 Ext.define('Writer.Person', {
    128     extend: 'Ext.data.Model',
    129     fields: [{
    130             name: 'id',
    131             type: 'int',
    132             useNull: true
    133         },
    134         'description'
    135     ]
    136 });
    137 
    138 Ext.require([
    139     'Ext.data.*',
    140     'Ext.tip.QuickTipManager',
    141     'Ext.window.MessageBox'
    142 ]);
    143 
    144 Ext.onReady(function(){
    145     Ext.tip.QuickTipManager.init();
    146     var store = Ext.create('Ext.data.Store', {
    147         model: 'Writer.Person',
    148         autoLoad: true,
    149         autoSync: true,
    150         proxy: {
    151             type: 'ajax',
    152             api: {
    153                 read: 'json/liste_view.php',
    154                 create:  'json/item.php?mode=create',
    155                 update:  'json/item.php?mode=update',
    156                 destroy: 'json/item.php?mode=destroy'
    157             },
    158             reader: {
    159                 type: 'json',
    160                 successProperty: 'success',
    161                 root: 'data',
    162                 messageProperty: 'message'
    163             },
    164             writer: {
    165                 type: 'json',
    166                 writeAllFields: false,
    167                 root: 'data'
    168             },
    169             listeners: {
    170             }
    171         },
    172         listeners: {
    173         }
    174     });
    175 
    176     var viewport = Ext.create('Ext.Viewport', {
    177 //        region:'center',
    178 //        layout:'column',
    179 //        autoScroll:true,
    180 //        items: [{
    181 //            columnWidth: .5,
    182 //            bodyStyle:'padding:5px',
    183 //            layout: 'fit',
    184 //            items:[new Writer.Panel({
    185 //                store: store
    186 //            })]
    187 //        },{
    188 //            columnWidth: .5,
    189 //            bodyStyle:'padding:5px',
    190 //            layout: 'fit',
    191 //            items:[new Writer.Panel({
    192 //                store: store
    193 //            })]
    194 //        }]
    195         layout:'fit',
    196         items:[new Writer.Panel({
    197                 store: store
    198         })]
    199     });
    200 });
    201
    My goal is to use "Writer.Panel" and create two instances of it in the main view like this:




    The problem is at the end: if I try this (it's supposed to create 2 columns, and for each column a Writer.Panel in it), it doesn't work, here's the result then the code follows:



    Code:
    176     var viewport = Ext.create('Ext.Viewport', {
    177         region:'center',
    178         layout:'column',
    179         autoScroll:true,
    180         items: [{
    181             columnWidth: .5,
    182             bodyStyle:'padding:5px',
    183             layout: 'fit',
    184             items:[new Writer.Panel({
    185                 store: store
    186             })]
    187         },{
    188             columnWidth: .5,
    189             bodyStyle:'padding:5px',
    190             layout: 'fit',
    191             items:[new Writer.Panel({
    192                 store: store
    193             })]
    194         }]
    195 //        layout:'fit',
    196 //        items:[new Writer.Panel({
    197 //                store: store
    198 //        })]
    199     });
    200 });
    201
    May I ask you to help me? Where am I wrong? Where should I look?

    Thank you very much indeed

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,448

    Default

    BorderLayout, HBoxLayout, VBoxLayout all do not support auto heighting which is why you are seeing your stuff very small.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3
    Sencha User olivierpons's Avatar
    Join Date
    Dec 2009
    Location
    Aix en Provence,France
    Posts
    125

    Cool

    I've managed to do what I want and to make everything nice and clean in classes.

    extjs.jpg

    Here's the full code, I hope this may help someone someday!

    Code:
      1 Ext.define('Writer.Form', {
      2     extend: 'Ext.form.Panel',
      3     
      4     requires: ['Ext.form.field.Text'],
      5     
      6     initComponent: function(){
      7         this.addEvents('create');
      8         Ext.apply(this, {
      9             activeRecord: null,
     10             iconCls: 'icon-user',
     11             frame: true,
     12             defaultType: 'textfield',
     13             bodyPadding: 5,
     14             fieldDefaults: {
     15                 anchor: '100%',
     16                 width: 500,
     17                 labelWidth: 200,
     18                 labelAlign: 'right'
     19             },  
     20             items: [{
     21                 xtype:'tabpanel',
     22                 activeTab: 0,
     23                 defaults:{ 
     24                     bodyStyle:'padding:10px'
     25                 },  
     26                 items:[{
     27                     title:'Page \'partenaires\'',
     28                     defaultType: 'textfield',
     29                     items: [{
     30                         emptyText: 'Slectionnez une image',
     31                         xtype: 'filefield',
     32                         fieldLabel: 'Photo ',
     33                         name: 'partenaires_photo',
     34                         buttonText: '',
     35                         buttonConfig: {
     36                             iconCls: 'upload-icon'
     37                         }   
     38                     },{ 
     39                         xtype: 'textarea',
     40                         emptyText: 'Description du partenaire',
     41                         fieldLabel: 'Description ',
     42                         name: 'partenaires_description',
     43                         style: 'margin:0', /* Remove default margin */
     44                         flex: 1  /* Take up all *remaining* vertical space */
     45                     }]  
     46                 },{ 
     47                     title:'Produits',
     48                     defaultType: 'textfield',
     49                     items: []
     50                 },{ 
     51                     title:'venements',
     52                     defaultType: 'textfield',
     53                     items: []
     54                 },{ 
     55                     title:'Rfrences',
     56                     defaultType: 'textfield',
     57                     items: []
     58                 },{ 
     59                     title:'Promotions',
     60                     defaultType: 'textfield',
     61                     items: []
     62                 }]  
     63             }], 
     64             dockedItems: [{
     65                 xtype: 'toolbar',
     66                 dock: 'bottom',
     67                 ui: 'footer',
     68                 items: [{
     69                     iconCls: 'icon-save',
     70                     itemId: 'save',
     71                     text: 'Sauver',
     72                     disabled: true,
     73                     scope: this,
     74                     handler: this.onSave
     75                 }, {
     76                     iconCls: 'icon-user-add',
     77                     text: 'Crer',
     78                     scope: this,
     79                     handler: this.onCreate
     80                 }, {
     81                     iconCls: 'icon-reset',
     82                     text: 'Reset',
     83                     scope: this,
     84                     handler: this.onReset
     85                 }]  
     86             }]  
     87         }); 
     88         this.callParent();
     89     },  
     90 
     91     setActiveRecord: function(record){
     92         this.activeRecord = record;
     93         if (record) {
     94             this.down('#save').enable();
     95             this.getForm().loadRecord(record);
     96         } else {
     97             this.down('#save').disable();
     98             this.getForm().reset();
     99         }   
    100     },  
    101 
    102     onSave: function(){
    103         var active = this.activeRecord,
    104             form = this.getForm();
    105             
    106         if (!active) {
    107             return;
    108         }   
    109         if (form.isValid()) {
    110             form.updateRecord(active);
    111             this.onReset();
    112         }   
    113     },  
    114 
    115     onCreate: function(){
    116         var form = this.getForm();
    117         
    
    118         if (form.isValid()) {
    119             this.fireEvent('create', this, form.getValues());
    120             form.reset();
    121         }
    122 
    123     },
    124 
    125     onReset: function(){
    126         this.setActiveRecord(null);
    127         this.getForm().reset();
    128     }
    129 });
    130 
    131 Ext.define('Writer.Grid', {
    132     extend: 'Ext.grid.Panel',
    133 
    134     requires: [
    135         'Ext.form.field.Text',
    136         'Ext.toolbar.TextItem'
    137     ],
    138 
    139     initComponent: function(){
    140 
    141         Ext.apply(this, {
    142             iconCls: 'icon-grid',
    143             frame: true,
    144             plugins: [],
    145             dockedItems: [{
    146                 xtype: 'toolbar',
    147                 dock: 'bottom',
    148                 items: [{
    149                     iconCls: 'icon-add',
    150                     text: 'Nouveau',
    151                     scope: this,
    152                     handler: this.onAddClick
    153                 }, {
    154                     iconCls: 'icon-delete',
    155                     text: 'Supprimer',
    156                     disabled: true,
    157                     itemId: 'delete',
    158                     scope: this,
    159                     handler: this.onDeleteClick
    160                 }, {
    161                     iconCls: 'icon-save',
    162                     text: 'Synchroniser',
    163                     scope: this,
    164                     handler: this.onSync
    165                 },
    166                 /* '->' = Dcaler  droite le reste : */
    167                 '->', {
    168                     xtype: 'tbtext',
    169                     text: '<b>@cfg</b>'
    170                 }, '|', {
    171                     text: 'autoSync',
    172                     enableToggle: true,
    173                     pressed: true,
    174                     tooltip: 'When enabled, Store will execute '+
    175                              'Ajax requests as soon as a Record '+
    176                              'becomes dirty.',
    177                     scope: this,
    178                     toggleHandler: function(btn, pressed){
    179                         this.store.autoSync = pressed;
    180                     }
    181                 }, {
    182                     text: 'batch',
    183                     enableToggle: true,
    184                     pressed: true,
    185                     tooltip: 'When enabled, Store will batch all '+
    186                              'records for each type of CRUD verb '+
    187                              'into a single Ajax request.',
    188                     scope: this,
    189                     toggleHandler: function(btn, pressed){
    190                         this.store.getProxy().batchActions = pressed;
    191                     }
    192                 }, {
    193                     text: 'writeAllFields',
    194                     enableToggle: true,
    195                     pressed: false,
    196                     tooltip: 'When enabled, Writer will write '+
    197                              '*all* fields to the server -- '+
    198                              'not just those that changed.',
    199                     scope: this,
    200                     toggleHandler: function(btn, pressed){
    201                         this.store.getProxy().getWriter().writeAllFields = pressed;
    202                     }
    203                 }]
    204             }],
    205             columns: [{
    206                 header: 'id',
    207                 width: 50,
    208                 sortable: true,
    209                 dataIndex: 'id',
    210                 field: {
    211                     type: 'textfield'
    212                }
    213             }, {
    214                 header: 'Description',
    215                 width: 450,
    216                 sortable: true,
    217                 dataIndex: 'description',
    218                 field: {
    219                     type: 'textfield'
    220                }
    221             }]
    222         });
    223         this.callParent();
    224         this.getSelectionModel().on('selectionchange', this.onSelectChange, this);
    225     },
    226 
    227     onSelectChange: function(selModel, selections){
    228         this.down('#delete').setDisabled(selections.length === 0);
    
    229     },
    230 
    231     onSync: function(){
    232         this.store.sync();
    233     },
    234 
    235     onDeleteClick: function(){
    236         var selection = this.getView().getSelectionModel().getSelection()[0];
    237         if (selection) {
    238             this.store.remove(selection);
    239         }
    240     },
    241 
    242     onAddClick: function(){
    243         var rec = new Writer.Person({
    244             first: '',
    245             last: '',
    246             email: ''
    247         });
    248 
    249         this.store.insert(0, rec);
    250     }
    251 });
    252 
    253 Ext.define('Writer.Panel', {
    254     extend: 'Ext.panel.Panel',
    255     /* Je n'aime pas me servir des alias, mais je laisse
    256      * le code au cas o :
    257      *
    258     alias: 'widget.writerpanel',
    259      */
    260 
    261     /* C'est ici qu'on met tous les 'requires' :
    262      * mais c'est inutile dans notre cas, car
    263      * on ne construit que des composants et on
    264      * n'a besoin de rien de spcial. Je laisse
    265      * le code au cas o :
    266     requires: [
    267         'Ext.form.field.Text',
    268         'Ext.toolbar.TextItem'
    269     ],
    270     */
    271 
    272     initComponent: function(){
    273         this.writerForm = new Writer.Form({
    274             listeners: {
    275                 create: function(form, data){
    276                     this.store.insert(0, data);
    277                 }
    278             }
    279         });
    280         this.writerGrid = new Writer.Grid({
    281             store: this.store,
    282             listeners: {
    283                 /* scope: this => super important pour les
    284                  * fonctions anonymes qui veulent accder
    285                  * aux variables "this" de la classe,
    286                  * p.ex ici c'est this.writerForm :
    287                  */
    288                 scope: this,
    289                 selectionchange: function(selModel, selected) {
    290                     this.writerForm.setActiveRecord(selected[0] || null);
    291                 }
    292             }
    293         });
    294         Ext.apply(this, {
    295             title: this.title,
    296             layout: {
    297                 type: 'vbox',
    298                 align: 'stretch'
    299             },
    300             flex: 1,
    301             bodyPadding: 5,
    302             items: [{
    303                 xtype: 'panel',
    304                 layout: 'fit',
    305                 flex: 1,
    306                 items: [this.writerGrid]
    307             },{
    308                 xtype: 'splitter',
    309                 height: 10
    310             },{
    311                 xtype: 'panel',
    312                 layout: 'fit',
    313                 flex: 2,
    314                 items: [this.writerForm]
    315             }]
    316         });
    317         this.callParent();
    318     }
    319 });
    320 
    321 Ext.define('Writer.Person', {
    322     extend: 'Ext.data.Model',
    323     fields: [{
    324             name: 'id',
    325             type: 'int',
    326             useNull: true
    327         },
    328         'description'
    329     ]
    330     /*,
    331     validations: [{
    332         type: 'length',
    333         field: 'email',
    334         min: 1
    335     }, {
    336         type: 'length',
    337         field: 'first',
    338         min: 1
    339     }, {
    340         type: 'length',
    341         field: 'last',
    342         min: 1
    343     }]
    344     */
    
    345 });
    346 
    347 Ext.require([
    348     'Ext.data.*',
    349     'Ext.tip.QuickTipManager',
    350     'Ext.window.MessageBox'
    351 ]);
    352 
    353 Ext.onReady(function(){
    354     Ext.tip.QuickTipManager.init();
    355     var store = Ext.create('Ext.data.Store', {
    356         model: 'Writer.Person',
    357         autoLoad: true,
    358         autoSync: true,
    359         proxy: {
    360             type: 'ajax',
    361             api: {
    362                 read: 'json/liste_view.php',
    363                 create:  'json/item.php?mode=create',
    364                 update:  'json/item.php?mode=update',
    365                 destroy: 'json/item.php?mode=destroy'
    366             },
    367             reader: {
    368                 type: 'json',
    369                 successProperty: 'success',
    370                 root: 'data',
    371                 messageProperty: 'message'
    372             },
    373             writer: {
    374                 type: 'json',
    375                 writeAllFields: false,
    376                 root: 'data'
    377             },
    378             listeners: {
    379                 exception: function(proxy, response, operation){
    380                     Ext.MessageBox.show({
    381                         title: 'Erreur du serveur',
    382                         msg: operation.getError(),
    383                         icon: Ext.MessageBox.ERROR,
    384                         buttons: Ext.Msg.OK
    385                     });
    386                 }
    387             }
    388         },
    389         listeners: {
    390             write: function(proxy, operation){
    391                 if (operation.action == 'destroy') {
    392                     main.child('#form').setActiveRecord(null);
    393                 }
    394                 Ext.example.msg(
    395                   Ext.String.capitalize(operation.action),
    396                   operation.resultSet.message);
    397             }
    398         }
    399     });
    400 
    401     /* Pour qu'il soit resizable automatiquement,
    402      * crer un Viewport au lieu d'un Container :
    403      * A la place de  'Ext.Viewport'
    404      * il y avait     'Ext.container.Container' :
    405      */
    406     var viewport = Ext.create('Ext.Viewport', {
    407         layout: 'fit',
    408         items: [
    409             new Ext.Panel({
    410                 layout: {
    411                     type: 'hbox',
    412                     align: 'stretch'
    413                 },
    414                 bodyPadding: 5,
    415                 items: [new Writer.Panel({
    416                     title: 'Test 1',
    417                     store: store
    418                 }),{
    419                     xtype: 'splitter',
    420                     width: 10
    421                 },new Writer.Panel({
    422                     title: 'Test 1',
    423                     store: store
    424                 }),{
    425                     xtype: 'splitter',
    426                     width: 10
    427                 }, new Writer.Panel({
    428                     title: 'Test 2',
    429                     store: store
    430                 })]
    431             })
    432         ]
    433     });
    434 });
    435

    Olivier Pons

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •