Extjs Mask Tab

by elganz

HTML

<link rel="stylesheet" href="http://docs.sencha.com/extjs/4.1.3/extjs-build/resources/css/ext-all.css">

JavaScript

Ext.define('Office', {
    extend: 'Ext.data.Model',
    fields: ['city', 'totalEmployees', 'manager']
});

Ext.define('Employee', {
    extend: 'Ext.data.Model',
    fields: ['firstName', 'lastName', 'employeeNo', 'department']
});

Ext.require(['Ext.data.Store', 'Ext.grid.Panel']);

function generateName() {
    var lasts = ['Jones', 'Smith', 'Lee', 'Wilson', 'Black', 'Williams', 'Lewis', 'Johnson', 'Foot', 'Little', 'Vee', 'Train', 'Hot', 'Mutt'],
        firsts = ['Fred', 'Julie', 'Bill', 'Ted', 'Jack', 'John', 'Mark', 'Mike', 'Chris', 'Bob', 'Travis', 'Kelly', 'Sara'],
        lastLen = lasts.length,
        firstLen = firsts.length,
        getRandomInt = Ext.Number.randomInt,
        first = firsts[getRandomInt(0, firstLen - 1)],
        last = lasts[getRandomInt(0, lastLen - 1)];
        
    return [first, last];
}

function getUniqueName(used) {
    var name = generateName(),
        key = name[0] + name[1];
        
    if (used[key]) {
        return getUniqueName(used);
    }
    
    used[key] = true;
    return name;
}

function getCity() {
    var cities = ['New York', 'Los Angeles', 'Chicago', 'Houston', 'Philadelphia', 'Phoenix', 'San Antonio', 'San Diego', 'Dallas', 'San Jose'],
        len = cities.length;
        
    return cities[Ext.Number.randomInt(0, len - 1)];
}

function getUniqueCity(used) {
    var city = getCity();
    if (used[city]) {
        return getUniqueCity(used);
    }
    
    used[city] = true;
    return city;
}

function getEmployeeNo() {
    var out = '',
        i = 0;
    for (; i < 6; ++i) {
        out += Ext.Number.randomInt(0, 7);
    }
    return out;
}

function getDepartment() {
    var departments = ['Development', 'QA', 'Marketing', 'Accounting', 'Sales'],
        len = departments.length;
        
    return departments[Ext.Number.randomInt(0, len - 1)];
}

var info = {
    office: {
        columns: [{
            flex: 1,
            text: 'City',
            dataIndex: 'city'
        }, {
           ...