AIR runtime security AND grid

[matevans]

Hi,

Having a little problem with the grid in an AIR app - the grid is displaying and all the editors work apart from the combo box (i'm using the xml demo grid).

This is the code i'm using..

 var cm = new Ext.grid.ColumnModel([{
           id:'common',
           header: "Common Name",
           dataIndex: 'common',
           width: 500,
           editor: new fm.TextField({
               allowBlank: false
           })
        },{
           header: "Light",
           dataIndex: 'light',
           width: 130,
           editor: new Ext.form.ComboBox({
               typeAhead: true,
               triggerAction: 'all',
               transform:'lightdd',
               lazyRender:true,
               listClass: 'x-combo-list-small'
            })
        },{
           header: "Price",
           dataIndex: 'price',
           width: 70,
           align: 'right',
           renderer: 'usMoney',
           editor: new fm.NumberField({
               allowBlank: false,
               allowNegative: false,
               maxValue: 100000
           })
        },{
           header: "Available",
           dataIndex: 'availDate',
           width: 95,
           renderer: formatDate,
           editor: new fm.DateField({
                format: 'm/d/y',
                minValue: '01/01/06',
                disabledDays: [0, 6],
                disabledDaysText: 'Plants are not available on the weekends'
            })
        },
        checkColumn
    ]);

And this is the main html code..

<select name="light" id="lightdd" style="display: none;">
	<option value="Shade">Shade</option>
	<option value="Mostly Shady">Mostly Shady</option>
	<option value="Sun or Shade">Sun or Shade</option>
	<option value="Mostly Sunny">Mostly Sunny</option>
	<option value="Sunny">Sunny</option>
</select>
<div id="editor-grid"></div>

I read in another post something about not having templates in the onReady function? not quite sure what this means.
Any help much appreciated.

Mat

[RobSmith]

I guess there are some properties missing defining the combobox. That might be the problem.

Try something like this:

Ext.form.ComboBox({
    id:            'idNumber',
    name:        'Numbers',
    fieldLabel:    'Numbers',
    store:  new Ext.data.SimpleStore({
        fields: ['numbers'],
        data : [['one'], ['two'],['three']]
    }),
    value : 'Standard',
    displayField:'numbers',
    valueField:    'numbers',
    tpl: new Ext.XTemplate(
        '<tpl for="."><div class="x-combo-list-item">{numbers}</div></tpl>'
    ),
    mode: 'local',
    triggerAction: 'all'
}) 

[devnull]

Due to the way security works in AIR, the combobox's template cannot be created inline (since it uses 'eval') but must be created beforehand. This essentially means create it outside of the onReady block:

var tpl = new Ext.XTemplate(
  '<tpl for="."><div class="x-combo-list-item">{yourDisplayField}</div></tpl>'
);
Ext.onReady(function(){
  //init and layout code...
  var cm = new Ext.grid.ColumnModel([{
           id:'common',
           header: "Common Name",
           dataIndex: 'common',
           width: 500,
           editor: new fm.TextField({
               allowBlank: false
           })
        },{
           header: "Light",
           dataIndex: 'light',
           width: 130,
           editor: new Ext.form.ComboBox({
               typeAhead: true,
               triggerAction: 'all',
               transform:'lightdd',
               lazyRender:true,
               listClass: 'x-combo-list-small',
               tpl: tpl
            })
        },{
           header: "Price",
           dataIndex: 'price',
           width: 70,
           align: 'right',
           renderer: 'usMoney',
           editor: new fm.NumberField({
               allowBlank: false,
               allowNegative: false,
               maxValue: 100000
           })
        },{
           header: "Available",
           dataIndex: 'availDate',
           width: 95,
           renderer: formatDate,
           editor: new fm.DateField({
                format: 'm/d/y',
                minValue: '01/01/06',
                disabledDays: [0, 6],
                disabledDaysText: 'Plants are not available on the weekends'
            })
        },
        checkColumn
    ]);
});

[Frank]

Yes. It's the problem in Ext.XTemplate when working with AIR, eval () is prohibited.
But its superclass, Ext.Template is okay with AIR.

[Frank]

Yes. It's the problem in Ext.XTemplate when working with AIR, eval () is prohibited.
But its superclass, Ext.Template is okay with AIR.

In AIR, XTemplates must be created at load time

[MuratCorlu]

I think problem is growing on "eval(body)" line of Ext.XTemplate's "compileTpl" method:

ext-all-debug.js line 7100
........

    compileTpl : function(tpl){
        var fm = Ext.util.Format;
        var useF = this.disableFormats !== true;
        var sep = Ext.isGecko ? "+" : ",";
        var fn = function(m, name, format, args, math){
            if(name.substr(0, 4) == 'xtpl'){
                return "'"+ sep +'this.applySubTemplate('+name.substr(4)+', values, parent, xindex, xcount)'+sep+"'";
            }
            var v;
            if(name === '.'){
                v = 'values';
            }else if(name === '#'){
                v = 'xindex';
            }else if(name.indexOf('.') != -1){
                v = name;
            }else{
                v = "values['" + name + "']";
            }
            if(math){
                v = '(' + v + math + ')';
            }
            if(format && useF){
                args = args ? ',' + args : "";
                if(format.substr(0, 5) != "this."){
                    format = "fm." + format + '(';
                }else{
                    format = 'this.call("'+ format.substr(5) + '", ';
                    args = ", values";
                }
            }else{
                args= ''; format = "("+v+" === undefined ? '' : ";
            }
            return "'"+ sep + format + v + args + ")"+sep+"'";
        };
        var codeFn = function(m, code){
            return "'"+ sep +'('+code+')'+sep+"'";
        };

        var body;
        if(Ext.isGecko){
            body = "tpl.compiled = function(values, parent, xindex, xcount){ return '" +
                   tpl.body.replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn).replace(this.codeRe, codeFn) +
                    "';};";
        }else{
            body = ["tpl.compiled = function(values, parent, xindex, xcount){ return ['"];
            body.push(tpl.body.replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn).replace(this.codeRe, codeFn));
            body.push("'].join('');};");
            body = body.join('');
        }
        eval(body);
        return this;
    },

.......

Can we override this method without using "eval" like overriding Ext.Template.compile method on ext-air.js file? And if we can, will this solve the problem?