如何使用Django模型在ExtJS网格中获取外键值而不是键？

在Django中，当你有一个模型包含外键关系时，默认情况下，序列化器会将外键字段序列化为该外键对应的数据库主键值。然而，在ExtJS网格中，通常更希望显示外键关联对象的描述性字段（如名称），而不是它的主键值。以下是如何实现这一点的步骤：

基础概念

Django模型：Django的ORM（对象关系映射）允许开发者通过Python类定义数据库结构。

外键：外键是一个数据库约束，用于确保引用完整性。它指向另一个表的主键。

ExtJS网格：ExtJS是一个JavaScript框架，用于构建富客户端Web应用程序。网格组件用于显示数据表格。

类型与应用场景

一对一关系：适用于需要详细信息的单一关联对象。
多对一关系：适用于多个记录共享同一关联对象的场景。

解决方案

自定义序列化器：在Django中创建一个自定义序列化器，该序列化器将外键字段替换为关联对象的描述性字段。

from rest_framework import serializers
from .models import YourModel, RelatedModel

class YourModelSerializer(serializers.ModelSerializer):
    related_field_name = serializers.CharField(source='related_model.name', read_only=True)

    class Meta:
        model = YourModel
        fields = ['id', 'related_field_name', ...]  # 其他字段

重写序列化方法：如果你不使用Django REST framework，可以在模型管理器中重写序列化方法。

class YourModel(models.Model):
    related_model = models.ForeignKey(RelatedModel, on_delete=models.CASCADE)

    def to_dict(self):
        return {
            'id': self.id,
            'related_field_name': self.related_model.name,
            # 其他字段
        }

ExtJS网格配置：在ExtJS中，确保网格的列配置使用正确的字段名。

columns: [
    { text: 'ID', dataIndex: 'id' },
    { text: 'Related Field Name', dataIndex: 'related_field_name' },
    // 其他列
]

遇到问题的原因及解决方法

问题：为什么显示的是键值而不是外键关联对象的描述性字段？

原因：默认情况下，Django序列化器会将外键字段序列化为数据库主键值。

解决方法：使用自定义序列化器或重写序列化方法来指定显示关联对象的描述性字段。

示例代码

假设我们有两个模型Author和Book，其中Book有一个指向Author的外键。

# models.py
from django.db import models

class Author(models.Model):
    name = models.CharField(max_length=100)

class Book(models.Model):
    title = models.CharField(max_length=100)
    author = models.ForeignKey(Author, on_delete=models.CASCADE)

# serializers.py
from rest_framework import serializers
from .models import Book, Author

class BookSerializer(serializers.ModelSerializer):
    author_name = serializers.CharField(source='author.name', read_only=True)

    class Meta:
        model = Book
        fields = ['id', 'title', 'author_name']

在ExtJS中，你可以这样配置网格：

Ext.create('Ext.grid.Panel', {
    title: 'Books',
    store: Ext.create('Ext.data.Store', {
        model: 'Book',
        proxy: {
            type: 'ajax',
            url: '/api/books/',  // 假设这是你的API端点
            reader: {
                type: 'json',
                rootProperty: 'results'
            }
        }
    }),
    columns: [
        { text: 'ID', dataIndex: 'id' },
        { text: 'Title', dataIndex: 'title' },
        { text: 'Author Name', dataIndex: 'author_name' }
    ],
    renderTo: Ext.getBody()
});

通过这种方式，你的ExtJS网格将显示作者的名字而不是他们的数据库主键值。