creating a fresh window using AJAX in Ext JS

Question

creating a fresh window using AJAX in Ext JS

While I know there may be similar questions out there, the details of my situation are unique. I'm facing an issue with building a new window using ExtJS, starting from a pre-existing grid. The goal is to populate this new window with references to elements selected in the previous grid.

Here's what I've tried: I included an ajax call within the first grid and created a column containing an image that users can click to access the second grid. However, when clicking on the image, nothing happens. Have I made a mistake with the ajax call? Or perhaps with passing JSON data to the page for the grid's store in the new window?

 var grid = Ext.create('Ext.grid.Panel', {
    // Grid configurations here
});

javascript ajax extjs extjs4

Answer 1

Answer №1

When running the code below, a new window will open and retrieve data for an ajax call. However, the "store" functionality is not functioning properly, so I will create a separate question to address this issue.

{
            xtype : 'actioncolumn',
            width : '5%',
            sortable : false,
            items : [{
                icon : '../static/accept.gif',
                tooltip : 'See Admants',
                handler : function(grid, rowIndex, colIndex){
                    var row = grid.getStore().getAt(rowIndex);
                     var buyer_member_id = row.data.buyer_member_id;
                    Ext.Ajax.defaultHeaders = {
                        "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
                    };
                    Ext.Ajax.request({
                        method : "GET",     
                        url: '/admants/?buyer_member_id='+ buyer_member_id,
                        success : function(response) {
                            var obj = response;
                            try {
                                obj = Ext.decode(response.responseText);
                            } catch (error) {}
                            if (obj) {
                                Ext.create('Ext.window.Window', {
                                title: 'Hello',
                                height: 200,
                                width: 400,
                                layout: 'fit',
                                items: {  
                                xtype: 'grid',
                                border: false,
                                columns: [
                                        {
                                            text     : 'id',
                                            flex     : 1,
                                            sortable : true,
                                            dataIndex: 'id'
                                        },
                                        {
                                            text     : 'name',
                                            width    : 300,
                                            sortable : true,
                                            dataIndex: 'name'
                                        }],
                                store: new Ext.data.JsonStore({
                                    storeId: 'myStore',
                                    proxy: {
                                        type: 'ajax',
                                        url: '/admants/',
                                        reader: {
                                            type: 'json',
                                        }
                                    },})

                                }}).show();
                            } else {
                            alert("Invalid response")
                            }
                        },
                        failure : function(response) {
                            alert("Data request failed");
                        }
                    }); 
                }
            }]
        }
    ],

Answer 2

When running the code below, a new window will open and retrieve data for an ajax call. However, the "store" functionality is not functioning properly, so I will create a separate question to address this issue.

{
            xtype : 'actioncolumn',
            width : '5%',
            sortable : false,
            items : [{
                icon : '../static/accept.gif',
                tooltip : 'See Admants',
                handler : function(grid, rowIndex, colIndex){
                    var row = grid.getStore().getAt(rowIndex);
                     var buyer_member_id = row.data.buyer_member_id;
                    Ext.Ajax.defaultHeaders = {
                        "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
                    };
                    Ext.Ajax.request({
                        method : "GET",     
                        url: '/admants/?buyer_member_id='+ buyer_member_id,
                        success : function(response) {
                            var obj = response;
                            try {
                                obj = Ext.decode(response.responseText);
                            } catch (error) {}
                            if (obj) {
                                Ext.create('Ext.window.Window', {
                                title: 'Hello',
                                height: 200,
                                width: 400,
                                layout: 'fit',
                                items: {  
                                xtype: 'grid',
                                border: false,
                                columns: [
                                        {
                                            text     : 'id',
                                            flex     : 1,
                                            sortable : true,
                                            dataIndex: 'id'
                                        },
                                        {
                                            text     : 'name',
                                            width    : 300,
                                            sortable : true,
                                            dataIndex: 'name'
                                        }],
                                store: new Ext.data.JsonStore({
                                    storeId: 'myStore',
                                    proxy: {
                                        type: 'ajax',
                                        url: '/admants/',
                                        reader: {
                                            type: 'json',
                                        }
                                    },})

                                }}).show();
                            } else {
                            alert("Invalid response")
                            }
                        },
                        failure : function(response) {
                            alert("Data request failed");
                        }
                    }); 
                }
            }]
        }
    ],

creating a fresh window using AJAX in Ext JS

Answer №1

Similar questions

Obtain data using a jQuery AJAX request

Display a dropdown menu when hovering over with a delay

What is the best way to activate an event listener only after a button has been clicked?

Ways to display output on a single line using javascript

Should one prioritize learning TypeScript over diving into Angular2?

Transfer files using Ajax and FormData technique

Three.js Pin Placement for Clothing

NodeJS and DiscordJS: The art of modifying JSON files

Why is the model so tiny after converting my FBX file to a .gltf format?

In JavaScript, a "switch statement" retrieves a test value from a "input type text" by accessing the value using getElementByName.value

The play button on the iOS video player will be deactivated automatically after watching 15 videos

Avoid having the last action repeat when the page is refreshed

Issue with h2 tag within JQuery's read more feature

Error encountered when executing the npm run dev script

Error message: "PHP encounters an issue with jQuery due to absence of 'Access-Control-Allow-Origin' header"

How can parameters be included in ng-href when using ng-click?

Inquirer doesn't waste time lingering for user input following a prompt

Exploring the Implementation of Conditional Logic Using Variables in ReactJS

Can the App be initiated manually using AngularJS and AJAX injection?

Obtain Page Parameters within a Nested Next.js Layout using App Router