chat screen code on Extjs.

Ext.application({
    name: 'ChatApp',
    launch: function() {
        // create a panel to hold the chat messages
        var chatPanel = Ext.create('Ext.panel.Panel', {
            title: 'Chat Messages',
            layout: 'fit',
            region: 'center',
            items: [{
                xtype: 'panel',
                id: 'chatBox',
                autoScroll: true
            }]
        });

        // create a form panel to send messages
        var formPanel = Ext.create('Ext.form.Panel', {
            title: 'Send Message',
            region: 'south',
            collapsible: true,
            layout: 'anchor',
            defaults: {
                anchor: '100%'
            },
            items: [{
                xtype: 'textfield',
                fieldLabel: 'Name',
                name: 'name'
            }, {
                xtype: 'textareafield',
                fieldLabel: 'Message',
                name: 'message'
            }],
            buttons: [{
                text: 'Send',
                handler: function() {
                    var form = this.up('form').getForm();
                    if (form.isValid()) {
                        var values = form.getValues();
                        var message = values.message;
                        var name = values.name || 'Anonymous';
                        var timestamp = Ext.Date.format(new Date(), 'Y-m-d H:i:s');
                        var chatMessage = '[' + timestamp + '] ' + name + ': ' + message;
                        Ext.getCmp('chatBox').add({
                            xtype: 'panel',
                            html: chatMessage
                        });
                        form.reset();
                    }
                }
            }]
        });

        // create the main view
        var viewport = Ext.create('Ext.container.Viewport', {
            layout: 'border',
            items: [chatPanel, formPanel]
        });
    }
});

 

This code creates a basic chat screen with a panel to display chat messages and a form panel to send messages. When the user sends a message, it is added to the chat panel with a timestamp and the user's name (if provided). The chat panel is set to auto-scroll to the latest message.

 

이 코드는 대화 메시지를 표시하는 패널과 메시지를 보내는 양식 패널이 있는 기본 대화 화면을 만듭니다. 사용자가 메시지를 발송할 때 메시지는 타임스탬프 및 사용자 이름(제공된 경우)과 함께 대화 패널에 추가됩니다. 대화 패널이 최신 메시지로 자동 스크롤되도록 설정되어 있습니다.