pphetra/gist:5890468

## gistfile1.js
<html>
<head>
    <title>Template</title>
    <link rel="stylesheet" href="extjs/resources/css/ext-all.css">
    <script src="extjs/ext-all-debug.js"></script>
    <script>
// รอให้ page load เสร้จแล้วค่อยทำงาน
Ext.onReady(function() {
    Ext.define('Car', {
        extend: 'Ext.data.Model',
        fields: [
            'id',
            'chassieNo',
            'engineNo',
            'licenseNo',
            'brand',
            {name: 'price', type: 'float'}
        ]
    });

    carStore = Ext.create('Ext.data.Store', {
        model: 'Car',
        groupField: 'brand',
        proxy: {
            type: 'memory'
        }
    });

    var c1 = Ext.create('Car', {
        id: 1,
        chassieNo: '2434343',
        engineNo: 'xx0dfdfd9000',
        licenseNo: '1234',
        brand: 'toyota',
        price: 200000
    });

    var c2 = Ext.create('Car', {
        id: 2,
        chassieNo: '99909090',
        engineNo: 'd00d9090',
        licenseNo: '1120',
        brand: 'toyota',
        price: 200000
    });

    var c3 = Ext.create('Car', {
        id: 2,
        chassieNo: '99909090',
        engineNo: '9909090',
        licenseNo: '7789',
        brand: 'isuzu',
        price: 600000
    });

    carStore.add(c1);
    carStore.add(c2);
    carStore.add(c3);

    var grid = Ext.create('Ext.grid.Panel', {
        region: 'center',
        store: carStore,
        features: [{ftype: 'grouping'}],
        selType: 'cellmodel',
        plugins: [
            Ext.create('Ext.grid.plugin.CellEditing', { clicksToEdit: 1 })
        ],
        columns: [
            {
                header: 'Chassie',
                dataIndex: 'chassieNo',
                width: 150,
                field: {
                    xtype: 'textfield'
                }
            },
            {
                header: 'Engine',
                dataIndex: 'engineNo',
                flex: 1,
                renderer: function(value) {
                    return "--" + value;
                },
                field: {
                    xtype: 'textfield'
                }
            },
            {
                header: 'mixed',
                xtype: 'templatecolumn',
                tpl: '{brand} {price}'
            },
            {
                header: 'Brand',
                dataIndex: 'brand',
                field: {
                    xtype: 'textfield'
                }
            },
            {
                header: 'Price',
                dataIndex: 'price',
                renderer: Ext.util.Format.numberRenderer('0,000.00'),
                field: {
                    xtype: 'numberfield'
                }
            }
        ]
    });

    form = Ext.create('Ext.form.Panel', {
        region: 'east',
        width: 300,
        items: [
            {
                xtype: 'textfield',
                name: 'brand',
                fieldLabel: 'Brand'
            },
            {
                xtype: 'textfield',
                name: 'chassieNo',
                fieldLabel: 'Chassie Number.'
            },
            {
                xtype: 'textfield',
                name: 'engineNo',
                fieldLabel: 'Engine Number.'
            },
            {
                xtype: 'textfield',
                name: 'licenseNo',
                fieldLabel: 'License Number'
            },
            {
                xtype: 'numberfield',
                name: 'price',
                fieldLabel: 'Price'
            }
        ],
        buttons: [
            {
                text: 'Add',
                handler: function() {
                    // extract data from form
                    var data = form.getValues();

                    // create model instance
                    var c1 = Ext.create('Car', data);

                    // add model instance to store
                    carStore.add(c1);

                }
            }
        ]
    });

    var viewport = Ext.create('Ext.container.Viewport', {
        layout: 'border',
        items: [
            grid,
            form
        ]
    });

});


    </script>

</head>
<body>
</body>
</html>
	<html>
	<head>
	<title>Template</title>
	<link rel="stylesheet" href="extjs/resources/css/ext-all.css">
	<script src="extjs/ext-all-debug.js"></script>
	<script>
	// รอให้ page load เสร้จแล้วค่อยทำงาน
	Ext.onReady(function() {
	Ext.define('Car', {
	extend: 'Ext.data.Model',
	fields: [
	'id',
	'chassieNo',
	'engineNo',
	'licenseNo',
	'brand',
	{name: 'price', type: 'float'}
	]
	});

	carStore = Ext.create('Ext.data.Store', {
	model: 'Car',
	groupField: 'brand',
	proxy: {
	type: 'memory'
	}
	});

	var c1 = Ext.create('Car', {
	id: 1,
	chassieNo: '2434343',
	engineNo: 'xx0dfdfd9000',
	licenseNo: '1234',
	brand: 'toyota',
	price: 200000
	});

	var c2 = Ext.create('Car', {
	id: 2,
	chassieNo: '99909090',
	engineNo: 'd00d9090',
	licenseNo: '1120',
	brand: 'toyota',
	price: 200000
	});

	var c3 = Ext.create('Car', {
	id: 2,
	chassieNo: '99909090',
	engineNo: '9909090',
	licenseNo: '7789',
	brand: 'isuzu',
	price: 600000
	});

	carStore.add(c1);
	carStore.add(c2);
	carStore.add(c3);

	var grid = Ext.create('Ext.grid.Panel', {
	region: 'center',
	store: carStore,
	features: [{ftype: 'grouping'}],
	selType: 'cellmodel',
	plugins: [
	Ext.create('Ext.grid.plugin.CellEditing', { clicksToEdit: 1 })
	],
	columns: [
	{
	header: 'Chassie',
	dataIndex: 'chassieNo',
	width: 150,
	field: {
	xtype: 'textfield'
	}
	},
	{
	header: 'Engine',
	dataIndex: 'engineNo',
	flex: 1,
	renderer: function(value) {
	return "--" + value;
	},
	field: {
	xtype: 'textfield'
	}
	},
	{
	header: 'mixed',
	xtype: 'templatecolumn',
	tpl: '{brand} {price}'
	},
	{
	header: 'Brand',
	dataIndex: 'brand',
	field: {
	xtype: 'textfield'
	}
	},
	{
	header: 'Price',
	dataIndex: 'price',
	renderer: Ext.util.Format.numberRenderer('0,000.00'),
	field: {
	xtype: 'numberfield'
	}
	}
	]
	});

	form = Ext.create('Ext.form.Panel', {
	region: 'east',
	width: 300,
	items: [
	{
	xtype: 'textfield',
	name: 'brand',
	fieldLabel: 'Brand'
	},
	{
	xtype: 'textfield',
	name: 'chassieNo',
	fieldLabel: 'Chassie Number.'
	},
	{
	xtype: 'textfield',
	name: 'engineNo',
	fieldLabel: 'Engine Number.'
	},
	{
	xtype: 'textfield',
	name: 'licenseNo',
	fieldLabel: 'License Number'
	},
	{
	xtype: 'numberfield',
	name: 'price',
	fieldLabel: 'Price'
	}
	],
	buttons: [
	{
	text: 'Add',
	handler: function() {
	// extract data from form
	var data = form.getValues();

	// create model instance
	var c1 = Ext.create('Car', data);

	// add model instance to store
	carStore.add(c1);

	}
	}
	]
	});

	var viewport = Ext.create('Ext.container.Viewport', {
	layout: 'border',
	items: [
	grid,
	form
	]
	});

	});


	</script>

	</head>
	<body>
	</body>
	</html>
No results found