Ext那点事

本文介绍了ExtJS中GridPanel的高级使用技巧,包括获取选中记录、单元格选择模式的实现、为表格添加链接的方法及表格属性的详细解析。

转自http://www.lzgame.com/bbs/dispbbs.asp?boardid=5&Id=736

 

Js代码
var rowcount = grid.getSelectionNode().getSelections();

var rowcount = grid.getSelectionNode().getSelections();
可以获取全部选中的记录,得到的rowcount将是一个Array,比如想获取sex列的数据,语句如下

Js代码
var strsex = rowcount[i].get(‘sex’);

var strsex = rowcount[i].get(‘sex’);
单元格选择模式


如果在GridPanel的配置属性增加sm属性如下

Js代码
sm:new Ext.grid.CellSelectionModel();

sm:new Ext.grid.CellSelectionModel();
则表格的选择模式为单元格选择模式。当单击时将选中对应的某一个单元格,而不是默认的选择某一行。选择方式如下

Js代码
var cell = grid.getSelectionNode().getSelectedCell();

var cell = grid.getSelectionNode().getSelectedCell();
得到的cell记录了当前选择的行(cell[0])以及列(cell[1]).可以通过一下语句得到该单元格数据

Js代码
var colname = grid.getColumnModel().getDataIndex(cell[1]); //获取列名
var celldata = grid.getStore().getAt(cell[0]).get(colname); //获取数据

var colname = grid.getColumnModel().getDataIndex(cell[1]); //获取列名
var celldata = grid.getStore().getAt(cell[0]).get(colname); //获取数据
getStore():获取表格的数据集
getAt():获取该数据集cell[0]行
get():获取该行colname的数据


2) 为表格增加链接



有时我们需要为表格中的某一列添加一个链接。可以利用renderer配置属性为该列添加html
如下:{id:'3',header:'名称',dataIndex:'name',renderer:DomUrl},
定义DomUrl方法



Js代码
function DomUrl(value){
return "<a href=>"+value+"</a>";
}

function DomUrl(value){
return "<a href=>"+value+"</a>";
}
如果表格内的数据是一个链接如:www.sina.com这样写法自然没有问题,但是大多数时候我们在表格中不会直接写一个链接,如果又需要根据单元格内容动态为链接添加几个参数。那这种写法就几乎没有什么用了。因为这个属性是在表格初始化的时候定义好的,而且表格初始化之后这个属性无法改变,也就是只读属性。


处理方法如下:
定义一个全局变量,初始值为0;DomUrl函数如下

Js代码
function DomUrl(value){
var row = grid.getSelectionModel().selectRow(startrow);//选中当前行
var rownum = grid.getSelectionModel().getSelected();//获取当前行
startrow ++;
var strurl = "abc.jsp?id=" + rownum.get('id');//获取当前选中行的值,并组织链接字符串
return "<a href='"+strurl+"'>"+value+"</a>";
}

function DomUrl(value){
var row = grid.getSelectionModel().selectRow(startrow);//选中当前行
var rownum = grid.getSelectionModel().getSelected();//获取当前行
startrow ++;
var strurl = "abc.jsp?id=" + rownum.get('id');//获取当前选中行的值,并组织链接字符串
return "<a href='"+strurl+"'>"+value+"</a>";
}
不过不要忘记在下次提交的时候将startrow赋值为0。


3) 表格的属性


表格的属性分为配置属性(在操作表格时无法修改),以及其他可读写属性,方法,以及事件。如下:


配置属性



a) activeItem:渲染布局时激活的子元素。
b) applyTo:指定渲染对象。
c) autoDestroy:当容器的子元素从容器中移除时是否自动销毁。
d) autoExpandColumn:指定自动填充表格剩余区域的列id
e) autoExpandMax:可自动扩张的最大宽度。
f) autoExpandMin:可自动扩张的最小宽度
g) autoHeight:自动扩充高度
h) autoShow:是否自动显示
i) autoWidth:自动扩充宽度
j) bbar/tbar:底部/顶部状态栏
k) bufferResize:容器再布局的缓冲频率
l) colModel/cm:列模式
m) cls:组件的额外css格式。
n) collapsible:是否显示快捷隐藏按钮
o) defaults:指定默认配置。
p) disableSelection:是否禁止选择表格行或列
q) enableDragDrop:是否允许表格列的拖放操作。
r) enableHdMenu:是否显示表格列的菜单。
s) frame:边框是否显示
t) loadMask: 是否显示加载动画
u) selModel/sm:表格选择模式
v) store:表格数据集
w) stripeRows:是否显示分隔线。
x) title:表格标题


方法


a) getColumnModel():得到表格列模型
b) getGridEl():得到表格下的元素
c) getPosition():得到组件的当前位置,返回一个数组
d) getSelectionModel():得到选中模型
e) getSize():得到组件大小
f) getStore():得到组件的数据集
g) getView():得到表格的GridView对象。
h) hide():隐藏当前组件
i) isVisible():判断当前组件是否显示
j) setDisabled( Boolean):设置组件的可用性
k) un():解除组件的监听
l) on():为组件添加监听
on ( String eventName, Function handler, [Object scope] )
eventName:添加监听的名称
handler:事件处理函数
scope:事件响应的作用域,包括scope,delay,single,buffer。

### 基本概念与架构 Ext JS 是一个专业的JavaScript框架,用于构建富客户端Web应用程序。它具有丰富的组件库,从基本的按钮到复杂的网格和树形视图等,提供了完整的用户界面组件,采用数据驱动的架构,使用数据绑定技术来同步视图和模型,使数据操作变得简单,还拥有强大的主题引擎,便于自定义应用程序外观[^1]。 ### 组件创建与使用 在 Ext JS 中,可以使用 `Ext.create` 方法来创建组件。例如创建一个面板组件: ```javascript Ext.onReady(function() { Ext.create('Ext.Panel', { renderTo: 'helloWorldPanel', height: 100, width: 200, title: 'Hello world', html: 'First Ext JS Hello World Program' }); }); ``` 这里的 `Ext.Panel` 是组件名,`renderTo` 对应 HTML 中 `div` 的 `id` 号,通过设置 `height`、`width`、`title` 和 `html` 等属性来定制面板的外观和内容[^2]。 ### 数据交互 - **使用 `Ext.Ajax`**:可用于发送异步 HTTP 请求,如发送 POST 请求: ```javascript Ext.Ajax.request({ url: 'your_backend_url', method: 'POST', params: { key1: 'value1', key2: 'value2' }, success: function(response) { var text = response.responseText; console.log(text); }, failure: function(response) { console.log('请求失败'); } }); ``` - **使用 `Ext.data.Store`**:用于管理数据,能与后端数据源进行交互,自动处理数据的加载、分页、排序等操作。示例如下: ```javascript Ext.define('MyModel', { extend: 'Ext.data.Model', fields: ['id', 'name', 'age'] }); var store = Ext.create('Ext.data.Store', { model: 'MyModel', proxy: { type: 'ajax', url: 'your_backend_url', reader: { type: 'json', rootProperty: 'data' } }, autoLoad: true }); store.on('load', function() { console.log(store.getRange()); }); ``` - **使用 `Ext.data.Connection`**:是底层的 HTTP 连接类,可发送各种类型的 HTTP 请求: ```javascript var conn = new Ext.data.Connection(); conn.request({ url: 'your_backend_url', method: 'GET', success: function(response) { var data = Ext.decode(response.responseText); console.log(data); }, failure: function(response) { console.log('请求失败'); } }); ``` ### 件处理 在 Ext JS 中,组件可以监听各种件。例如,为按钮添加件监听器: ```javascript Ext.create('Ext.Button', { text: 'Click me', renderTo: Ext.getBody(), handler: function() { console.log('Button clicked'); } }); ``` ### 布局管理 Ext JS 提供了多种布局管理器,如 `BorderLayout`、`CardLayout`、`VBoxLayout` 和 `HBoxLayout` 等,用于管理组件的布局。例如使用 `VBoxLayout` 垂直排列组件: ```javascript Ext.create('Ext.Panel', { layout: 'vbox', renderTo: Ext.getBody(), items: [ { xtype: 'button', text: 'Button 1' }, { xtype: 'button', text: 'Button 2' } ] }); ``` ### 主题与样式 Ext JS 拥有强大的主题引擎,可以通过选择不同的主题或自定义主题来改变应用程序的外观。可以在页面中引入相应的主题 CSS 文件来应用主题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值