


How to interact data (record) between form and grid in extjs_javascript skills
First define the edit button in the tbar of the grid:
Js code
id:'editDataButton',
text:'edit',
tooltip:'edit',
iconCls:'edit',
handler: function(){ showeditPanel( );}
Redefine form:
Js code
var xjjlEditForm = new Ext.FormPanel ({.......omit the definition content in the form...});
Then define the function showeditPanel to be called by the edit button (and define a loading form at the same time window):
Js code
//--Function called by the edit button (pop-up edit form)
function showeditPanel()
{ //Get the record corresponding to the selected row directly
var record = grid.getSelectionModel().getSelected()
if(!record){
Ext.Msg.alert('Message','Please select the data to edit');
return;
}
//--Define the editing window
if(!xjjlEditWindow)
{
xjjlEditWindow = new Ext.Window({
el: 'edit_win', //The front end places the current js file The div name in the page is
title: 'Edit Record',
width: 650,
height: 360,
closable: false,
closeAction: 'hide',
resizable : false,
items: xjjlEditForm //Load the edited form in the window
});
}
xjjlEditWindow.show(Ext.get('editDataButton'));//Show the edit window
//[Note] First xjjlEditWindow.show(); and then xjjlEditForm.getForm().loadRecord(currrecordRecord); can solve the problem that after the previous page loading is completed, the data cannot be loaded when the [Edit] button is clicked for the first time. It’s a question of form.
xjjlEditForm.getForm().loadRecord(record);
//The key is to fill the form with the record in the currently selected grid
}
This way, it can be used in the new The selected data is edited in the window;

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics



In front-end interviews, we are often asked how to implement dice/mahjong layout using CSS. The following article will introduce to you how to use CSS to create a 3D dice (Flex and Grid layout implement 3D dice). I hope it will be helpful to you!

With the continuous development and popularity of Web applications, more and more companies and individuals are beginning to use PHP and ExtJS to build powerful Web applications. As a popular server-side scripting language, PHP is cross-platform and easy to learn, while ExtJS is a popular front-end framework that can help developers quickly build interactive web application interfaces. This article will introduce how to use PHP and ExtJS to implement powerful web application functions. Establish PHP and MySQL database connections for use

BinaryX's token name change: from BNX to FOUR, and then to FORM, the deep meaning behind strategic adjustments BinaryX recently changed the token symbol from $FOUR to $FORM, which has attracted widespread attention from the industry. This is not the first time BinaryX has changed its name, and its token symbol has undergone a transition from BNX to FOUR. This article will explore in-depth the strategic intentions behind this series of name change. 1. Token name change process and strategic considerations BinaryX initially launched the $BNX token based on the BNB chain in 2021 to support its Play-to-Earn (P2E) gaming ecosystem. In early 2024, in order to optimize the economic model, BinaryX divided $BNX and gradually expanded to GameF

CSS layout framework: Explore the five commonly used layout frameworks Introduction: In web design, layout is a crucial part. The CSS layout framework can help us quickly build web pages with different layout styles. This article will introduce five commonly used CSS layout frameworks and provide specific code examples to help readers better understand and use these frameworks. 1. Bootstrap: Bootstrap is one of the most popular CSS layout frameworks currently. It has rich components and powerful responsive features that can

CSS panel layout properties: grid and grid-template-columns In modern web page layout, panel layout is a common design method that can arrange web content in a grid. The grid layout attribute in CSS and the grid-template-columns attribute are the keys to realizing panel layout. 1. Introduction to the grid layout attribute The grid layout attribute is an attribute used to create a grid layout in CSS. By converting HTML

Detailed explanation of CSS relative layout properties: position and relative In front-end development, layout is often a problem that developers need to face. In order to better control the position of elements on the page, CSS provides a variety of layout methods. Among them, relative layout is a very common layout method. By using the position and relative attributes, we can flexibly adjust the position and size of elements. The position attribute is used to define the positioning method of the element. Common values

UniApp’s implementation skills for implementing page layout and responsive design Introduction: UniApp is a cross-platform development tool based on the Vue.js framework, which can simultaneously develop applications for multiple platforms such as iOS, Android, and H5. This article will introduce how to use UniApp to implement page layout and responsive design, and provide some practical code examples. 1. Page layout Flex layout Flex layout is a commonly used method in page layout, which can automatically adapt to different screen sizes and devices. In UniApp

HTML Tutorial: How to Use Grid Layout for Grid Average Layout In web design, grid layout (GridLayout) is a commonly used layout method. It can effectively divide web content into multiple columns and perform flexible arrangement and layout. This tutorial will introduce how to use HTML and CSS Grid layout to implement grid average layout, and provide specific code examples. 1. What is grid layout? Grid layout is a layout method that divides the page into columns. These columns can be arranged according to rows and
