Sencha 스크립트 간단하게 확인하기

Test.js: 확인할 스크립트 생성

Case1

Ext.onReady(function () {
    // Sample data
    const data = [
        { name: 'John Doe', email: 'john.doe@example.com', age: 30 },
        { name: 'Jane Smith', email: 'jane.smith@example.com', age: 25 },
        { name: 'Mike Johnson', email: 'mike.johnson@example.com', age: 35 }
    ];

    // Define a data store
    const store = Ext.create('Ext.data.Store', {
        fields: ['name', 'email', 'age'],
        data: data
    });

    // Define the RowEditing plugin
    const rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
        clicksToEdit: 2 // Double-click to edit
    });

    // Define the grid
    const grid = Ext.create('Ext.grid.Panel', {
        title: 'Editable Grid Example',
        store: store,
        plugins: [rowEditing], // Attach RowEditing plugin
        columns: [
            {
                text: 'Name',
                dataIndex: 'name',
                flex: 1,
                editor: {
                    xtype: 'textfield',
                    allowBlank: false
                }
            },
            {
                text: 'Email',
                dataIndex: 'email',
                flex: 1,
                editor: {
                    xtype: 'textfield',
                    vtype: 'email' // Validate as an email
                }
            },
            {
                text: 'Age',
                dataIndex: 'age',
                flex: 1,
                editor: {
                    xtype: 'numberfield',
                    minValue: 0, // Minimum value
                    maxValue: 120 // Maximum value
                }
            }
        ],
        selModel: {
            type: 'rowmodel' // Enable row selection
        },
        listeners: {
            // Automatically start editing when a row is selected
            selectionchange: function (selModel, selected) {
                if (selected.length > 0) {
                    const selectedRecord = selected[0];
                    const rowIndex = store.indexOf(selectedRecord);
                    rowEditing.startEdit(rowIndex, 0); // Start editing the first column
                }
            }
        },
        height: 300,
        width: 600,
        renderTo: Ext.getBody()
    });
});

Case2

Ext.application({
    name: 'ImageApp',

    launch: function () {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [
                {
                    xtype: 'panel',
                    title: 'Image Display',
                    html: '<img src="path/to/your/image.jpg" style="width:100%;height:auto;" alt="Example Image"/>'
                }
            ]
        });
    }
});

ext-all.js: Ext JS 스크립트 실행을 위한 스크립트 가져오기
{Ext JS 설치위치}/build 아래에 있음

EXT JS CSS 파일 가져오기
{Ext JS 설치위치}/build/classic/{테마}/resources 아래에 있음
테마중 하나 원하는 것 선택

// theme-aria 선택
theme-classic-all.css
theme-classic-all_1.css
theme-classic-all_2.css

index.html: 실행할 html 파일 생성

<link rel="stylesheet" type="text/css" href="ext-all.css">
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="your-script.js"></script>

브라우져에서 실행