1. #41
    Sencha User
    Join Date
    Mar 2012
    Posts
    1
    Vote Rating
    0
    JaiveekShah is on a distinguished road

      0  

    Default


    m using Ext 4.1 and stuck in form submitting using model api: create

    can anyone show a small example how to get the data out of form and after passing it to a model, save it in database(Mysql)

  2. #42
    Sencha User
    Join Date
    May 2009
    Location
    Germany
    Posts
    46
    Vote Rating
    2
    quixit is on a distinguished road

      0  

    Default Another Solution to make a form fields use the model validators

    Another Solution to make a form fields use the model validators


    Another Solution see in:
    http://www.sencha.com/forum/showthre...233#post778233

  3. #43
    Sencha User
    Join Date
    Jun 2012
    Posts
    8
    Vote Rating
    0
    similian is an unknown quantity at this point

      0  

    Default Great Thread but wen't off topic

    Great Thread but wen't off topic


    Hey Mitch,

    this is a really great thread about bidirectional model binding.
    The central question htammen asked was about:

    How to bind complex objects (like the model) to a form.
    The load record function is not sufficient

    It does not work for complex data 1:1 and 1:n associations.
    Well if there is a solution I would really look forward to see it solved.

    So bringing back the Thread on track;

    My question here is:

    How can I load my complex data to the from? In a simple manner?

    If I have a form containing fields like this:
    Code:
    username
    address.zip
    address.phone.mobile
    How would i load it from my store (beloning to a model having the same structure) into the form ?

    Kind Regards
    Sim

  4. #44
    Sencha User
    Join Date
    Sep 2012
    Posts
    83
    Vote Rating
    5
    mpost is on a distinguished road

      0  

    Default


    Sorry for the necro, but I felt it was important to point out that we still don't have automatic bidirectional model binding. This is one of the things I miss from Silverlight and XAML programming: it was very easy to bind a UI (any control really -- not just a form) to a model and have it all just work automatically. Put another way: this code is something that your customers write all the time so it's an ideal job that the framework could handle. KnockoutJS does this very nicely as well.

  5. #45
    Sencha User
    Join Date
    Jan 2009
    Posts
    8
    Vote Rating
    0
    Charles Fator is on a distinguished road

      0  

    Default


    Agreed mpost. I'm astounded that proper form to model binding is not provided. Bidirectional form to model binding seems like it would be at the top of expectations for such a framework. I'm actually a bit disappointed.

  6. #46
    Ext JS Premium Member skullbooks's Avatar
    Join Date
    Nov 2010
    Location
    Dillenburg, Hessen, Germany
    Posts
    35
    Vote Rating
    1
    skullbooks is on a distinguished road

      0  

    Default


    well we don't use sencha command and the mvc (because in the time we started our application that didn't exist), so we had to build our own application structure with front- and backend and database connection.
    for backend communication we use propel and generate php model classes for easy use.
    and by porting our software to ext js 4... we came to the point that we enhanced our database schema xml with some more flag like (generate frontend model, generate frontend model relations, user visible names for columns,...) and we wrote a php script that generates us the ext js models.

    the clou: we generate a UserBase and a User model the user model extends the UserBase, the base class will be overwritten every time we generate models, and on the script where we generate the models we don't just generate a fields list we also generate a getFormItems method on our models that returns a config object for a form to this model (depending on our schema enhancements)

    with such generated models you can generate your own methods for things you have to do often (like writing a form config, grid column definitions maybe if you want, ...)

    maybe this gives you an idea for your application to generate code you often need.

  7. #47
    Sencha User
    Join Date
    Sep 2012
    Posts
    83
    Vote Rating
    5
    mpost is on a distinguished road

      0  

    Default


    Quote Originally Posted by skullbooks View Post
    maybe this gives you an idea for your application to generate code you often need.
    But that's just my point: the whole point of using a framework like ExtJS is for exactly this sort of functionality. If I wanted to roll my own, I'd use jquery instead of giving money to Sencha.

  8. #48
    Ext JS Premium Member skullbooks's Avatar
    Join Date
    Nov 2010
    Location
    Dillenburg, Hessen, Germany
    Posts
    35
    Vote Rating
    1
    skullbooks is on a distinguished road

      0  

    Default


    well yes and no...
    1. i don't know exactly what is possible with sencha complete etc...
    2. well extjs is just a frontend and not a backend with database access... so you have to write/generate your models u use as you need them... js can't make models by it self depending on a database
    3. if you compare extjs with jquery you should better compare it with jqueryUI but even then ext brings you a lot more standards and components for doing a web-app
    but hey, both are js libs - sure u can also use jquery(UI) but in my opinion extjs code looks more clean and readable and the framework brings you a lot more help by building an nativ-app like web-app.

    well sure i would be nice to have more things here and there, but i think for big applications it's a lot better then jquery.

    if you just need it to build a simple online adress book that also should not look like a desktop app, then maybe jquery is the better option.

    it all depends on the requirements for me.

  9. #49
    Sencha User xava's Avatar
    Join Date
    Mar 2009
    Location
    Argentina
    Posts
    36
    Vote Rating
    0
    xava is on a distinguished road

      0  

    Default


    Quote Originally Posted by ruslan.talpa View Post
    The examples above, in order to validate based on model rules, had to update the model.
    if that model is from a store and to that store you also have other bound views (or grids) then whenever you make a modification in the form, that change is instantly reflected in other components that "display" this particular model.
    I modified the code so that you can call .updateRecord only when you need to (for example a save button) but still have the validation work based on the model.
    In addition, i monitor the the bound model so whenever it changes i call again loadRecord to reset the field values.

    Whant do you think?
    Code:
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Form <-> Model bind</title>
        <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-4.0.2a/resources/css/ext-all.css"/>
        <script type="text/javascript" src="http://extjs.cachefly.net/ext-4.0.2a/ext-all-debug.js"></script>
        <script>
        
        Ext.override(Ext.form.Basic, {
            loadRecord: function(record) {
                var me = this;
                me._validationRecord = record.copy();
                me.callOverridden(arguments);
                me.mon( record, 'changed', me.onRecordChanged, me );
            },
            onRecordChanged: function(){
                this.loadRecord( this.getRecord() );
            }
        });
        Ext.override(Ext.form.field.Base, {
            getErrors: function() {
                var me = this,
                    errors = me.callOverridden(arguments),
                    record = me.up('form').getForm()._validationRecord,                        
                    modelValidations, 
                    fieldValidations;    
                
                  if (!me.bindToModel || !record) return errors;
                  
                  modelValidations = record.validate();
                  if (modelValidations.isValid()) {
                      return errors;
                  }
                  
                  fieldValidations = modelValidations.getByField(me.name);
                  fieldValidationsLength = fieldValidations.length;
                  
                  if (fieldValidationsLength > 0) {
                      for (var j = 0; j < fieldValidationsLength; j++) {
                          errors.push(fieldValidations[j].message);
                      }                      
                  }
                  
                  return errors;
            },
            
            onChange: function() {
                var me = this,
                form = me.up('form').getForm(),
                record = form._validationRecord;
    
    
                if (me.bindToModel && record && (me.name in record.data)) {
                    record.beginEdit();
                    record.set(me.name, me.getValue());
                    record.endEdit();
                }
    
    
                this.callOverridden(arguments);
            }
            
        });
                    
        Ext.define('Workgroup', {
            extend: 'Ext.data.Model',
            fields: [
                'name',
                {name: 'startDate', type: 'date'},
                {name: 'endDate', type: 'date'}
            ],
            validations: [
                {type: 'presence', name: 'name', message: 'Name is required.'},
                {type: 'length', name: 'name', min: 3, message: 'Names must be at least 3 characters in length.'},
                {type: 'presence', name: 'startDate', message: 'Start Date is required.'}                    
            ],
            afterEdit: function() {
                
                var me = this;
                if(me.dirty){
                    me.fireEvent('changed', me);
                }
                this.callParent(arguments);
            } 
        });            
    
    
        Ext.onReady(function() {
            var formPanel = Ext.create('Ext.form.Panel', {
                frame: true,
                title: 'Work Group',
                width: 340,
                bodyPadding: 5,
                renderTo: Ext.getBody(),
                
                fieldDefaults: {
                    anchor: '100%',               
                    bindToModel: true
                },
                
    
    
                items: [
                    {
                        xtype: 'textfield',
                        name: 'name',
                        fieldLabel: 'Name'
                    },
                    {
                        xtype: 'datefield',
                        name: 'startDate',
                        fieldLabel: 'Start Date'
                    }
                ],
                
                buttons: [
                    {
                        text: 'Check',
                           handler: function() {    
                                console.log('Record data: ', workgroup.data);
                                console.log('Form record data: ', formPanel.getRecord().data);
                                console.log('Form validation record data: ', formPanel.getForm()._validationRecord.data);
                                console.log('Valid: ', formPanel.getForm().isValid());
                        }
                    }
                ]
            });
    
    
            var workgroup = Ext.create('Workgroup', {
                name: 'R12345'
            });
    
    
            formPanel.loadRecord(workgroup);
            workgroup.set('name', 'New Name');
        });
    
    
    </script>
    </head>
    <body></body>
    </html>
    this code work perfect, i have only some problems trying to locale my ExtJS app, here i write one solution for this and move this code to MVC style

    http://brainoverflow.co.nf/?p=25

    T
    hanks you

Similar Threads

  1. Replies: 5
    Last Post: 15 May 2012, 8:06 PM
  2. Form Binding to BeanModel
    By zathril in forum Ext GWT: Discussion
    Replies: 0
    Last Post: 28 Mar 2010, 1:08 PM
  3. Form binding / update model
    By tsegismont in forum Ext GWT: Help & Discussion (1.x)
    Replies: 0
    Last Post: 2 Apr 2009, 1:22 AM
  4. Form binding
    By exo in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 16 Apr 2007, 4:20 AM

Thread Participants: 19

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi