Error on first column

[jimmyphp]

This is my first test with Air.

I tried to make a simple grid from sqlite table, all ok but only the first column header cause error on mouseover.

introspector: typeError: Undefined value.

I tried to change the order of columns, make a new grid with other data, but always the first header column on mouseover give me error.

sms.data.smsStore = Ext.extend(Ext.data.Store, {
    constructor: function(){
        sms.data.smsStore.superclass.constructor.call(this, {
            sortInfo: {
                field: 'sendDate',
                direction: "DESC"
            },
            reader: new Ext.data.JsonReader({
                id: 'smsId',
                fields: sms.data.smsRecord
            })
        });
        
       this.conn = sms.data.conn;
        //SQlite nome tabella, nome ID
        this.proxy = new Ext.sql.Proxy(sms.data.conn, 'sms', 'smsId', this);
    },
    
    addSms: function(phone, message, result){
        var id = Ext.uniqueId();
        var date = new Date();
        l = new sms.data.smsRecord({
            smsId: id,
            sendDate: date,
            phone: phone,
            message: message,
            result: result
        }, id);
        this.add(l);
        return l;
    },
    init: function(){
        this.load();
    }
}); 

Ext.uniqueId = function(){
    var t = String(new Date().getTime()).substr(4);
    var s = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    for (var i = 0; i < 4; i++) {
        t += s.charAt(Math.floor(Math.random() * 26));
    }
    return t;
}
sms.data.smsRecord = Ext.data.Record.create([
    {name: 'smsId', type:'string'},
    {name: 'sendDate', type:'date', dateFormat: Ext.sql.Proxy.DATE_FORMAT, defaultValue: ''},
    {name: 'phone', type:'string'},
    {name: 'message', type:'string'},    
    {name: 'result', type:'string'}
]);
sms.data.conn = Ext.sql.Connection.getInstance();
sms.data.sms = new sms.data.smsStore(); 

var smsGrid = new Ext.grid.GridPanel({
    title: 'Registro Sms',
    id: 'smsG',
       viewConfig: {
        forceFit: true
    },
    store: sms.data.sms,
    cm: new Ext.grid.ColumnModel([{
        header: 'Codice',
        dataIndex: 'smsId',
        hidden: true
    }, {
        header: 'Data',
        dataIndex: 'sendDate',
        renderer: Ext.util.Format.dateRenderer('m/d/Y H:i'),
        sortable: true
    }, {
        header: 'Cellulare',
        dataIndex: 'phone',
        sortable: true
    }, {
        header: 'Messaggio',
        dataIndex: 'message',
        sortable: true
    }, {
        header: 'Esito',
        dataIndex: 'result',
        sortable: true
    }]),
    sm: new Ext.grid.RowSelectionModel({
        singleSelect: true
    })
}); 

Sorry for English.

Thank's in advance.

[RobSmith]

Sure that you insert

<script type="text/javascript" src="air/ext-air.js"></script>

to your html page?

I had a similar error with TreePanel. For some reasons you need the air package in order to use the Ext classes.

[jimmyphp]

thnx for reply

ext-air.js is load & grid work fine.
I have a error only on fist header column mouseover.

I tried with no error basic array grid.

[sven]

Yes i can confirm this.

The error is thrown by the "isMenuDisabled" function of the Ext.grid.ColumnModel.

[sven]

I tracked this down to the "renderHeaders" function of Ext.grid.GridView.

p.id is set to 0 (if no id is defined) but when p is applied to the "ts.hcell" template, the 0 is missing

<td class="x-grid3-hd x-grid3-cell x-grid3-td-" style="width:317px;"><div   class="x-grid3-hd-inner x-grid3-hd-" unselectable="on" style=""><a class="x-grid3-hd-btn" href="#"></a>Name<img class="x-grid3-sort-icon" src="http://extjs.com/s.gif" /></div></td>

Giving the column an id != 0 and evertyhing is working fine. This problem only occurs with an id of 0 or undefined, but thn it gets id 0.

So seems to be something with the Ext.Template class.

[sven]

Ext.override(Ext.grid.GridView,{
renderHeaders : function(){
        var cm = this.cm, ts = this.templates;
        var ct = ts.hcell;

        var cb = [], sb = [], p = {};
var test= new Ext.Template(
                    '<td class="x-grid3-hd x-grid3-cell x-grid3-td-{id}" style="{style}"><div {tooltip} {attr} class="x-grid3-hd-inner x-grid3-hd-{id}" unselectable="on" style="{istyle}">', this.grid.enableHdMenu ? '<a class="x-grid3-hd-btn" href="#"></a>' : '',
                    '{value}<img class="x-grid3-sort-icon" src="', Ext.BLANK_IMAGE_URL, '" />',
                    "</div></td>"
                    );
        for(var i = 0, len = cm.getColumnCount(); i < len; i++){
            p.id = cm.getColumnId(i);
            p.value = cm.getColumnHeader(i) || "";
            p.style = this.getColumnStyle(i, true);
            p.tooltip = this.getColumnTooltip(i);
            if(cm.config[i].align == 'right'){
                p.istyle = 'padding-right:16px';
            } else {
                delete p.istyle;
            }
			
			
				air.trace(test.apply(p));
				air.trace(ct.apply(p));
            cb[cb.length] = ct.apply(p);
        }
        return ts.header.apply({cells: cb.join(""), tstyle:'width:'+this.getTotalWidth()+';'});
    },
								   });

the "test" Ext.Template is working fine, but, well, they are the same

Changing

            cb[cb.length] = ct.apply(p);

to

            cb[cb.length] = test.apply(p);

and everything is working fine. I just copied the template direct into this function.

[sven]

                                   Ext.override(Ext.grid.GridView,{
initTemplates : function(){
        var ts = this.templates || {};
        if(!ts.master){
            ts.master = new Ext.Template(
                    '<div class="x-grid3" hidefocus="true">',
                        '<div class="x-grid3-viewport">',
                            '<div class="x-grid3-header"><div class="x-grid3-header-inner"><div class="x-grid3-header-offset">{header}</div></div><div class="x-clear"></div></div>',
                            '<div class="x-grid3-scroller"><div class="x-grid3-body">{body}</div><a href="#" class="x-grid3-focus" tabIndex="-1"></a></div>',
                        "</div>",
                        '<div class="x-grid3-resize-marker"> </div>',
                        '<div class="x-grid3-resize-proxy"> </div>',
                    "</div>"
                    );
        }

        if(!ts.header){
            ts.header = new Ext.Template(
                    '<table border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',
                    '<thead><tr class="x-grid3-hd-row">{cells}</tr></thead>',
                    "</table>"
                    );
        }

        if(!ts.hcell){
            ts.hcell = new Ext.Template(
                    '<td class="x-grid3-hd x-grid3-cell x-grid3-td-{id}" style="{style}"><div {tooltip} {attr} class="x-grid3-hd-inner x-grid3-hd-{id}" unselectable="on" style="{istyle}">', this.grid.enableHdMenu ? '<a class="x-grid3-hd-btn" href="#"></a>' : '',
                    '{value}<img class="x-grid3-sort-icon" src="', Ext.BLANK_IMAGE_URL, '" />',
                    "</div></td>"
                    );
        }

        if(!ts.body){
            ts.body = new Ext.Template('{rows}');
        }

        if(!ts.row){
            ts.row = new Ext.Template(
                    '<div class="x-grid3-row {alt}" style="{tstyle}"><table class="x-grid3-row-table" border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',
                    '<tbody><tr>{cells}</tr>',
                    (this.enableRowBody ? '<tr class="x-grid3-row-body-tr" style="{bodyStyle}"><td colspan="{cols}" class="x-grid3-body-cell" tabIndex="0" hidefocus="on"><div class="x-grid3-row-body">{body}</div></td></tr>' : ''),
                    '</tbody></table></div>'
                    );
        }

        if(!ts.cell){
            ts.cell = new Ext.Template(
                    '<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} {css}" style="{style}" tabIndex="0" {cellAttr}>',
                    '<div class="x-grid3-cell-inner x-grid3-col-{id}" unselectable="on" {attr}>{value}</div>',
                    "</td>"
                    );
        }

        for(var k in ts){
            var t = ts[k];
            if(t && typeof t.compile == 'function' && !t.compiled){
                t.disableFormats = true;
               // t.compile();
            }
        }

        this.templates = ts;

        this.tdClass = 'x-grid3-cell';
        this.cellSelector = 'td.x-grid3-cell';
        this.hdCls = 'x-grid3-hd';
        this.rowSelector = 'div.x-grid3-row';
        this.colRe = new RegExp("x-grid3-td-([^\\s]+)", "");
    }
								   });

This override fixes the bug too. So some bug in the new compile function for air?!

Calling compile on my "test template" and the error is back too. So, maybe someone from the Ext team can help out.

[sven]

Also removing the Template overrides of the ext-air file solves the problem and everything is working fine. Why this override is there?

And if it is really needed, it should be fixed

[jimmyphp]

many thank's.

first column with id & no error.

[sven]

after some sleep i found a fix for the template override:

Ext.Template.prototype.compile = function() {
	var fm = Ext.util.Format;
	var useF = this.disableFormats !== true;
	//
	var prevOffset = 0;
	var arr = [];
	var tpl = this;
	var fn = function(m, name, format, args, offset, s){
		if (prevOffset != offset) {
			var action = {type: 1, value: s.substr(prevOffset, offset - prevOffset)};
			arr.push(action);
		}
		prevOffset = offset + m.length;
		if(format && useF){
				if (args) {
					var re = /^\s*['"](.*)["']\s*$/;
					args = args.split(/,(?=(?:[^"]*"[^"]*")*(?![^"]*"))/);
					for(var i = 0, len = args.length; i < len; i++){
						args[i] = args[i].replace(re, "$1");
					}
					args = [''].concat(args);
				} else {
						args = [''];
				}
			if(format.substr(0, 5) != "this."){
				var action = {type: 3, value:name, format: fm[format], args: args, scope: fm};
				arr.push(action);					
			}else{
				var action = {type: 3, value:name, format:tpl[format.substr(5)], args:args, scope: tpl};
				arr.push(action);					
			}
		}else{
			var action  = {type: 2, value: name};
			arr.push(action);				
		}
		return m;
	};
	
	var s = this.html.replace(this.re, fn);
	if (prevOffset != (s.length - 1)) {
		var action = {type: 1, value: s.substr(prevOffset, s.length - prevOffset)};
		arr.push(action);
	}

	this.compiled = function(values) {
		function applyValues(el) {
			switch (el.type) {
					case 1:
							return el.value;
					case 2:
							return (values[el.value] !== undefined ? values[el.value] : '');
					default:
							el.args[0] = values[el.value];
							return el.format.apply(el.scope, el.args);
			}
		}	
		return arr.map(applyValues).join('');
	}
	return this;
};

This code is in the ext-air adapter.