数据的方法如何通过Ext Grid获取所有数据库数据 (ext grid获取所有数据库)

如何使用Ext Grid获取数据库中的所有数据

Ext Grid是一个非常有用的Web应用程序框架,它可以轻松地将数据库中的数据呈现在UI界面上。在本文中,我们将教您如何使用Ext Grid获取数据库中的所有数据。只需要按照以下步骤进行操作,您便可以轻松地完成。

1.准备工作

在开始之前,首先需要有一个可用的数据库。您可以自己设置或使用已有的数据库。在本教程中,我们将使用MySQL数据库。

2.编写数据库连接代码

您需要编写一段连接数据库的代码。以下是一个简单的示例,您可以根据您的需要进行修改。

“`

Ext.Loader.setConfig({ enabled: true });

Ext.require([

‘Ext.data.*’,

‘Ext.grid.*’,

‘Ext.tree.*’,

‘Ext.panel.*’,

‘Ext.layout.contner.Border’

]);

Ext.onReady(function() {

// 初始化 Ext.data.Store 组件

Ext.create(‘Ext.data.Store’, {

storeId:’sampleStore’,

// 设置加载数据的 url

proxy: {

type: ‘ajax’,

url: ‘getData.php’,

reader: {

type: ‘json’,

rootProperty: ‘data’

}

},

// 设置数据模型,您需要根据自己的数据库进行修改

fields:[

{name: ‘id’, type: ‘int’},

{name: ‘name’, type: ‘string’}

],

// 自动加载数据

autoLoad: true

});

// 创建 Ext.grid.Panel 组件

Ext.create(‘Ext.grid.Panel’, {

renderTo: Ext.getBody(),

store: Ext.data.StoreManager.lookup(‘sampleStore’),

width: 400,

height: 400,

title: ‘Sample Grid’,

columns: [

{ text: ‘ID’, dataIndex: ‘id’ },

{ text: ‘Name’, dataIndex: ‘name’, flex: 1 }

]

});

});

“`

在这段代码中,我们使用了一个名为“sampleStore”的组件来读取数据库数据。我们还指定了用于加载数据的url(getData.php)以及数据模型(id和name)。

3.创建数据表格

在接下来的步骤中,我们将创建一个数据表格,该表格将显示我们从数据库中获取的数据。

“`

// 创建 Ext.grid.Panel 组件

Ext.create(‘Ext.grid.Panel’, {

renderTo: Ext.getBody(),

store: Ext.data.StoreManager.lookup(‘sampleStore’),

width: 400,

height: 400,

title: ‘Sample Grid’,

columns: [

{ text: ‘ID’, dataIndex: ‘id’ },

{ text: ‘Name’, dataIndex: ‘name’, flex: 1 }

]

});

“`

在这个示例中,我们创建了一个名为“Sample Grid”的数据表格,它将显示ID和名称这两个字段。我们还将宽度和高度设置为400px。

4.运行界面

现在,您可以打开网页并查看您的数据表格了!您将看到从数据库中获取的所有数据。

在本篇文章中,我们介绍了如何使用Ext Grid来获取数据库中的所有数据。使用这种方法,您可以轻松地将数据呈现在您的UI界面上,以便用户快速了解您的数据。

相关问题拓展阅读:

Ext3 Grid 怎样获取列的隐藏、显示 并存入数据库 在下次加载的时候按上次的设置显示

可以使用这个属性,可以隐藏列;

Grid.getColumnModel().setHidden(1, true);

true为显示,false为隐藏,

以C#.net 为后台连接数据库并将所获得数据用EXT 的GRID显示出来。要求代码。RMG:50元

没啥时间,而且很久没搞.net了,

软件都没装,所以帮不上忙了,应该会有人来帮你的.

是不是extjs

如果是这个,那么有个示例给你看看,由于不知道你的数据表,所以只能是通用的。

net后台返回的数据格式如下:

{totalProperty:100,root:}

extjs代码如下:

Ext.onReady(function(){

var = new Ext.grid.CheckboxSelectionModel();

var cm = new Ext.grid.ColumnModel(

new Ext.grid.RowNumberer(),

,

{header:’编号’,dataIndex:’id’},

{header:’性别’,dataIndex:’sex’},

{header:’名称’,dataIndex:’name’},

{header:’描述’,dataIndex:’descn’}

>);

cm.defaultSortable = true;

var ds = new Ext.data.Store({

proxy: new Ext.data.HttpProxy({url:’data.aspx’}),

reader: new Ext.data.JsonReader({

totalProperty: ‘totalProperty’,

root: ‘root’

//这里的totalProperty与root与上面的返回数据中的要一样。

},

{name: ‘id’},

{name: ‘name’},

{name: ‘descn’}

>)

});

ds.load({params:{start:0,limit:10}});

var grid = new Ext.grid.GridPanel({

el: ‘grid3’,

ds: ds,

cm: cm,

: ,

title: ‘NET->ON’,

bbar: new Ext.PagingToolbar({

pageSize: 10,

store: ds,

displayInfo: true,

displayMsg: ‘显示第 {0} 条到 {1} 条记录,一共 {2} 条’,

emptyMsg: “没有记录”

}),

tbar: new Ext.PagingToolbar({

pageSize: 10,

store: ds,

displayInfo: true,

displayMsg: ‘显示第 {0} 条到 {1} 条记录,一共 {2} 条’,

emptyMsg: “没有记录”

})

});

grid.render();

})

{rows:}

我把数据库里的数据格式化成这种形式了

Ext.onReady(function(){

var = new Ext.grid.CheckboxSelectionModel();

var cm = new Ext.grid.ColumnModel(

new Ext.grid.RowNumberer(),

,

{header:’学号’,dataIndex:’id’},

{header:’姓名’,dataIndex:’name’}

>);

cm.defaultSortable = true;

var ds = new Ext.data.Store({

proxy: new Ext.data.HttpProxy({url:’database.aspx’}),

reader: new Ext.data.JsonReader({

//totalProperty: ‘totalProperty’,

root: ‘rows’

//这里的totalProperty与root与上面的返回数据中的要一样告渣档。

},

{name: ‘id’},

{name:’name’}

>)

});

ds.load({params:{start:0,limit:10}});

var grid = new Ext.grid.GridPanel({

contentEl:”data”,

el: ‘grid3’,

Store: ds,

cm: cm,

: ,

title: ‘NET->ON’,

bbar: new Ext.PagingToolbar({

pageSize: 10,

store: ds,

displayInfo: true,

displayMsg: ‘显示第 {0} 条到 {1} 条记录,一共 {2} 条’,

emptyMsg: “没有记录”

}),

tbar: new Ext.PagingToolbar({

pageSize: 10,

store: ds,

displayInfo: true,

displayMsg: ‘梁前显示第 {0} 条到 {1} 条记录,一共 {2} 条’,

emptyMsg: “没有记录”

})

});

grid.render();

})

我这段代码哪袜乱里出问题了

C#.NET用普散携橡通冲旁数据格式生成一个ON文件,然后使用Ext载入这个隐尘ON设置好列及对应的值,绑定显示就可以了。

Ext.grid.GridPanel中columns中的值怎么取得

grid.on(‘cellclick’,function(grid, rowIndex, columnIndex, e) {

var record = grid.getStore().getAt(rowIndex);

// 返回Record对象 Get the Record

var fieldName = grid.getColumnModel().getDataIndex(columnIndex);

// 返回字段名称 Get field name

var data = record.get(fieldName);

});

grid是自己定义的Ext.GridPanel的一个变量。用着个cellclick基本可以获得所有的,其中有好多的函数,你可以看看extapi都能得到解决。

GridPanel.getSelectionModel().on(‘rowselect’,function(,rowIndex,r){//给你的GRIDPANEL添加选中事件。

alert(r.get(‘你columns对应的dexindex’));

从store中获取的 store的数据可以来自数组 还有url

数据可以是xml的形式 也可以是ON可以通过不同的解析方式 赋值给columns

你想怎么取

是选中某几条取,还是grid循环遍历取

如果这都满足不了你我也没办法了

关于ext grid获取所有数据库的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。


数据运维技术 » 数据的方法如何通过Ext Grid获取所有数据库数据 (ext grid获取所有数据库)