Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

  1. #1
    Ext JS Premium Member
    Join Date
    Feb 2008
    Posts
    148
    Vote Rating
    0
    simon is on a distinguished road

      0  

    Default Change form config option

    Change form config option


    I would like to dynamically change config option of my form in fact HTML option.
    How can I do that. Is there some funcion like Ext.FormPanel.SetConfig or something similar?

    Thank you,
    Simon

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    82
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    What kind of options would you like to change?

  3. #3
    Ext JS Premium Member
    Join Date
    Feb 2008
    Posts
    148
    Vote Rating
    0
    simon is on a distinguished road

      0  

    Thumbs up


    HTML option.
    Every time when use clicks on some row in grid, I generate a new html of the form.
    If I change it like this: frm.html = html.join('');
    there is no error, just always is shown the old one. It's obviously cached.

    Than I try to remove form from my window and create a new one each time user clicks on row:
    Code:
    myWindow.removeAll(true);
    var frm = new Ext.FormPanel({
       id: 'formUpload',
       fileUpload: true,
       height: 300
    });
    //create new html and apply it to my form:
    frm.html = html.join('');
    myWindow.add(frm);
    
    if (!myWindow.isVisible())
    myWindow.show();
    This works only first time. The second time form is removed from the window, but the new one is not appended. Window is blank, why?

    But the best way should be just to change html of the form each time user clicks on new row. Any suggestion?

    Thanks,
    Simon

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    82
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Don't create a new FormPanel every time! Simply update the content, e.g.
    Code:
    frm.body.update(new_html);
    ps. Why are you using a FormPanel for this? Wouldn't a normal panel work just as well?

  5. #5
    Ext JS Premium Member
    Join Date
    Feb 2008
    Posts
    148
    Vote Rating
    0
    simon is on a distinguished road

      0  

    Default


    I'll use form instead of the formPanel. What is the main difference between them?

    After I set html of my form, I replace some html components(div) with Ext components.
    And it works first time:

    Code:
                cTypeCb.render(Ext.getDom("divCType"));
                txComment.render(Ext.getDom("divComment"));
                if (rezultat.document != "") {
                    txtUpload.render(Ext.getDom("divDoc"));
                    btnReset.render(Ext.getDom("btnReset"));
                }
                btnSave.render(Ext.getDom("btnSave"));
                btnClose.render(Ext.getDom("btnClose"));
    I have buttons and comboboxes shown and all working on my form as I wanted.

    When I click second time on row, and replace html of my form as you suggested:
    frm.body.update(new_html);

    I get the new data on my form, but my div's are not replaced with ext components any more.(buttons and comboboxes are not visible any more, they are gone).

    What now? How can I achive that?
    Should I use some apply or something similar instead of render?

    Thank you,
    Simon

  6. #6
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    82
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    You should not mix plain HTML with Ext components. The Ext container mechanism doesn't know how to handle that and replacing HTML will cause memory leaks.

    Maybe you should consider putting all different forms inside a card layout so you can switch between them.

  7. #7
    Ext JS Premium Member
    Join Date
    Feb 2008
    Posts
    148
    Vote Rating
    0
    simon is on a distinguished road

      0  

    Default


    Every row of data grid has it's own data. When user clicks on one row, I must show window with form and form shows the data of each row. So, I must update data on form on each user click. If row has status=1 then I show comboboxes in that form, if status=2 then I show form without comboboxes ant text instead of them. Do you have any example how to do that - I think it's very common example.
    I use html also because of positioning text on that form - it's much easier than using form layout.

    Thank you,
    Simon

  8. #8
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    82
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Just reuse the same form every time and load it with new values.

    Just hide the fields you don't want to show in the form (you'll need this patch).

  9. #9
    Ext JS Premium Member
    Join Date
    Feb 2008
    Posts
    148
    Vote Rating
    0
    simon is on a distinguished road

      0  

    Default


    This is my code:

    First I create window and all Ext components, which I'll need on the form:

    Code:
    var wConf = new Ext.Window(
    {
    	id: 'wConf'
    	, layout: 'form'
    	, height: 300
    	, width: 815
    	, title: 'Complaint prewiev'
    , items: [
    	{
    		xtype: 'form',
    		id: 'formUpload',
    		fileUpload: true,
    		height: 300
    	}
    ],
    	listeners: {
    		'beforedestroy': function(wConf) {
    			wConf.hide();
    			return false;
    		}
    	}
    });
    }
                
    var btnSave = new Ext.Button(
    {
    	text: 'Save'
    	, handler: saveComplaint
    });
    
    var btnClose = new Ext.Button(
    {
    	text: 'Close'
    	, handler: function() {
    		Ext.getCmp('wConf').hide();
    	}
    });
    
    var btnReset = new Ext.Button(
    {
    	text: 'Reset'
    	, handler: function() {
    		Ext.getCmp('formFile').reset();
    	}
    });
    
    
    var cTypeCb1 = new Ext.ux.TwinCombo({
    	onTrigger2Click: function() {
    		this.clearValue();
    	},
    	trigger2Class: 'x-form-clear-trigger',
    	id: 'cTypeCb',
    	name: 'cTypeCb',
    	mode: 'local',
    	fieldLabel: '',
    	emptyText: 'select type',
    	store: storeCType,
    	typeAhead: false,
    	triggerAction: 'all',
    	selectOnFocus: true,
    	forceSelection: true,
    	displayField: 'name',
    	listClass: 'levi',
    	valueField: 'typeID'
    , width: 110
    });
    
    var cTypeCb = new Ext.form.ComboBox({
    	id: 'cTypeCb',
    	name: 'cTypeCb',
    	mode: 'local',
    	fieldLabel: '',
    	//emptyText: 'select type',
    	value: '1',
    	store: storeCType,
    	typeAhead: false,
    	triggerAction: 'all',
    	selectOnFocus: true,
    	forceSelection: true,
    	displayField: 'name',
    	listClass: 'levi',
    	valueField: 'typeID'
    , width: 110
    });
    
    var txComment = new Ext.form.TextArea({
    	id: 'txComment',
    	name: 'txComment',
    	mode: 'local',
    	width: '100%'
    });
    
    var txtUpload = new Ext.ux.form.FileUploadField({
    	id: 'formFile',
    	emptyText: 'Select document',
    	width: 300
    });

    Then when user clicks on row in grid, I read some data from the record and go on server to get some other data related to this record and then I create my html.
    At the end I replace some html elements with ext controls if needed.

    Code:
    rs.on('rowselect', function(sm, rowNumber, record) {
        var complaintID = record.get('complaintID')
        var status = record.get('status')
    
        var conn = new Ext.data.Connection();
        conn.request({
            url: 'transportData.asp?vrsta=12',
            params: {
                complaintID: complaintID
            },
            success: function(resp, opt) {
    			//I get some data from the server:
    			var rezultat = Ext.util.JSON.decode(resp.responseText);
    			
    			//i create my html:
    			var html = ['<table width="100%"><tr><td>Product ID:<b>' + record.get('prodId') + '</b></td>',
                '<td>Product name:<b><font color="' + record.get('color') + '">' + record.get('pname') + '</font></b></td><td>Local warehouse:',
                '<b>' + record.get('lw') + '</b></td></tr><tr><td>Invoice ID:<b>' + record.get('invoiceID') + '</b></td>',
                '<td>Company:<b>' + record.get('company') + '</b></td>',
                '<td>Q in Delivery:<b>' + rezultat.qInDel + '</b>&nbsp; Q Delivered:<b>' + rezultat.qDel + '</b>',
                '&nbsp;Difference:<b>' + record.get('qDif') + '</b></td></tr><tr><td colspan=2>Date of shipment:<b>' + rezultat.sDate + '</b></td>',
                '<td>Date of Delivery:<b>' + Ext.util.Format.dateRenderer('j.n.Y')(record.get('dDate')) + '</b></td></tr>',
                '<tr valign="top"><td>Type of Compliant:'];
    
                if (1 == 1) {
                    html.push('<div id="divCType"></div></td><td colspan="2">Country Comment:<div id="divComment"></div>');
                } else {
                    html.push(record.get('cType') + '</td><td colspan="2">Country Comment:<b>' + rezultat.comment);
                }
                html.push('</b></td></tr></table><table width="100%"><tr><td>Complaint Status:<b>' + record.get('status') + '</td>');
                html.push('<td>Type of Complaint Solving:<b>' + record.get('sType') + '</td></tr>');
                html.push('<tr><td colspan="2">Description of Solving:<b>' + rezultat.solvingDesc + '</td></tr></table><table><tr><td>Document:</td><td>');
    
                if (rezultat.document != "") {
                    html.push('<div id="divDoc"></div></td><td><div id="btnReset"></div></td></tr></table><table width="100%">');
                } else {
                    html.push('test</td></tr></table><table width="100%">');
                }
    
                html.push('<tr><td align="right"><div id="btnSave"></div></td><td><div id="btnClose"></div></td>');
                html.push('</tr></table>');
    
                Ext.getCmp('formUpload').html = html.join('');
    
                if (!wConf.isVisible())
                    wConf.show();
    
                cTypeCb.render(Ext.getDom("divCType"));
                txComment.render(Ext.getDom("divComment"));
                if (rezultat.document != "") {
                    txtUpload.render(Ext.getDom("divDoc"));
                    btnReset.render(Ext.getDom("btnReset"));
                }
                btnSave.render(Ext.getDom("btnSave"));
                btnClose.render(Ext.getDom("btnClose"));
    
            }
        });
    });
    This works only first time as we already know. Now how would you change this code to works on every click?
    Do you have any similar example? It could have only one control, all I need is to see how this can be done

    Thank you for all your help, I think ext is good just I'm very beginner to it
    Simon

  10. #10
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    82
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    This code is really, really wrong (it will leak memory every time you update the form)!

    Instead of building HTML I would suggest using a table layout with items and only update the content of the items.

Thread Participants: 1