采用的是Extjs4.2版本

http://localhost:49999/GridPanel/Index

该链接是本地连接,只是方便自己访问,读者无法正常访问。

前端

<!--导入相应Extjs库-->
<script src="~/Scripts/Extjs4.2/ext-all.js"></script>
<link href="~/Scripts/Extjs4.2/resources/ext-theme-neptune/ext-theme-neptune-all.css" rel="stylesheet" />
<script src="~/Scripts/Extjs4.2/ext-theme-neptune.js"></script>
<script src="~/Scripts/jquery-3.3.1.min.js"></script> <script>
Ext.onReady(function () {
var btnSubmit = Ext.create('Ext.Button', {
text: '查询',
//handler是用于设置按按键的时候使用的数据
handler: function () {
ExtData.load();
}
}); var form = Ext.create('Ext.form.Panel', {
title: '信息填写',
layout: 'column',
height:80,
width: 350,
bodyPadding: 10, items: [{
xtype: 'textfield',
name: 'username',
fieldLabel: 'Name',
allowBlank: false //判断是否允许空值
}, btnSubmit
]
}); var ExtData = Ext.create('Ext.data.Store', {
storeId: 'employeeStore',
fields: ['Name', 'Age', 'Address'],//表示在图标上展示的信息
proxy: {
type: 'ajax',
actionMethods: 'post',
url: '/GridPanel/MessageBack',
reader: {
type: 'json',
root: 'data',//注意點
totalProperty: 'total'//注意點
}
}, autoLoad: true,
listeners: {
beforeload: function (store, operation, eOpts) {
//將查詢條件傳遞到後台
var postData = {
username: $("input[name='username']").val()
};
Ext.apply(store.proxy.extraParams, postData);
}
} });
//ExtData.load(); var grid = Ext.create('Ext.grid.Panel', {
title: '详细信息',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [
{ text: '姓名', dataIndex: 'Name' },
{ text: '年龄', dataIndex: 'Age' },
{ text: '居住地', dataIndex: 'Address' }
],
width: 350,
forceFit: true
}); //创建一个窗体,用来放置form和grid框
var win = new Ext.Window({
title: '数据查询',
width: 350,
height: 374,
resizeable: true,
modal: true,
closable: true,
maximizable: true,//最大化
minimizable: true,//最小化
items: [form,grid]
});
win.show();
})
</script>

后端

        public ActionResult MessageBack(string username)
{ List<DataLink> resultData = new List<DataLink>();
resultData.Add(new DataLink() { Name = "tetse", Age = 19, Address = "ly" }); string rs = Newtonsoft.Json.JsonConvert.SerializeObject(new { data = resultData, total = 1 });
return Content(rs);
}

var data = @Html.Raw(Model.ToDTOJson());

@Html.Raw()

注释:将带有Html标签的字符串,转换成Html标签输出

Extjs简单的form+grid组合的更多相关文章

  1. ExtJs如何判断form表单是否被修改过详解

    1.Extjs表单提交主要有三种方式: 1, EXT的form表单ajax提交(默认提交方式)      相对单独的ajax提交来说优点在于能省略写参数数组 ,form.getForm().submi ...

  2. ExtJs之Ext.form.field.TimePicker DatePicker组合框

    <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...

  3. ExtJs之Ext.form.field.ComboBox组合框

    <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...

  4. Extjs——简单的Grid panel小实例

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  5. ExtJS扩展:扩展grid

    ExtJs的grid功能很强大,但是有时候觉得总是少那么一点点功能,我们就来扩展它,让它用起来更方便. 今天我们要扩展的是:根据记录的选择数量来禁用或启用grid toolbar上的某些按钮. 本文所 ...

  6. extjs 简单入门

    中文网站:http://extjs.org.cn/ 英文网站:http://www.sencha.com/products/extjs/ 1.简介 extJS是一种主要用于创建前端用户界面,是一个基本 ...

  7. extjs学习(关于grid)

    1.想要调整某一列在表格中的顺序,可以使用mapping(索引是从0开始的) var store = new Ext.data.ArrayStore({ data:data, fields:[ {na ...

  8. extjs动态树 动态grid 动态列

    由于项目需要做一个动态的extjs树.列等等,简而言之,就是一个都是动态的加载功能, 自己琢磨了半天,查各种资料,弄了将近两个星期,终于做出来了 首先,想看表结构,我的这个功能需要主从两张表来支持 代 ...

  9. Extjs选中多行Grid提交

    要实现的效果如图:可以选择多行grid然后提交给后台 1,Extjs中grid如何可以选择多行? 定义一个grid,将色了Type设置为多选即可 selType: 'checkboxmodel', 2 ...

随机推荐

  1. angualrjs 总结 随记(二)

    表单控制变量form 控制变量 //字段是否未更改 fromName.inputFieldName.$pristine //字段是否更改 fromName.inputFieldName.$dirty ...

  2. 【深度学习】Neural networks(神经网络)(一)

    神经网络的图解 感知机,是人工设置权重.让它的输出值符合预期. 而神经网络的一个重要性质是它可以自动地从数据中学习到合适的权重参数. 如果用图来表示神经网络,最左边的一列称为输入层,最右边的一列称为输 ...

  3. linux service 例子

    在 /etc/init.d/ 中创建新文件 #/bin/sh # 检查第一个参数是什么来执行对应动作 case $1 in start) /usr/local/php/bin/php-cgi -b 1 ...

  4. Windows 7系统记录

    http://www.winwin7.com/ win7带USB3.0和NVME驱动 http://www.mohuishou.com/ 其中的青苹果家园 支持UEFI+GPT机器 http://ww ...

  5. TCP漫谈之keepalive和time_wait

    TCP是一个有状态通讯协议,所谓的有状态是指通信过程中通信的双方各自维护连接的状态. 一.TCP keepalive 先简单回顾一下TCP连接建立和断开的整个过程.(这里主要考虑主流程,关于丢包.拥塞 ...

  6. B. Food Buying Round #617(递归 + 模拟)

    B. Food Buying time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  7. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! test_vue_0613@1.0.0 dev: 错误的解决方法

    错误原因在于由于文件 node_modules 太大,在项目上传时有些人会删掉 导致我们下载的项目中缺少这个文件 在尝试把自己项目的 node_modules文件夹直接复制过去之后发现问题还没有得到解 ...

  8. 1038 Recover the Smallest Number (30分)(贪心)

    Given a collection of number segments, you are supposed to recover the smallest number from them. Fo ...

  9. Spring Taco Cloud——design视图的创建(含thymeleaf模板遇到的一些小问题)

    先来看下综合前两篇内容加上本次视图的成果   可能不是很美观,因为并没有加css样式,我想等整个项目有个差不多的功能实现后再进行页面优化,请谅解 下面我贴上自己定义修改过的Taco的design视图代 ...

  10. var、let和const的区别详解

      let 和 const 是 ECMAScript6 新推出的特性,其中 let 是能够替代 var 的"标准",所以我们探讨 var.let 和 const 的区别,首先应该知 ...