【技能】Ext.Viewport 实现左三右一排列方式。 - Draco
- 博客频道 - CSDN.NET
1、Extjs 布局很是灵活，但是吐槽下CSS，太难重写，想自己重构一套都难哎...&
var viewport = new Ext.Viewport({
layout:'border',
//中间部分
region:'center',
id: 'centerPanel',
iconCls:'',
title:'${centerTitle}',
autoScroll:false,
header:false,
layout: 'fit',
items:[mainTabs]},
//布局左边west部分
region : 'west',
width:220,
collapsible: true,
split:true,
header:false,
border:false,
frame:false,
xtype:'panel',
layout:'anchor',
collapseMode:'mini',
layoutConfig:{columns:1},
split:true,
region:'west',
header:false,
autoScroll:false,
border:false,
anchor:'100% 10%',
xtype: 'panel',
html:'&table border=&0& cellpadding=&0& cellspacing=&0& width=&100%&
height=&60& background=&./resource/image/banner_background/${theme}.png&& &tr &
&td style=&padding-left:15padding-top:10px&&&img class=&IEPNG& src=&${banner}& /&
&/td& &/tr&&/table&',
collapsible: true
},{region:'west',
width: 220,
anchor:'100% 84%',
collapsible: true,
minSize: 200,
border:false,
maxSize: 350,
split: true,
collapseMode:'mini',
iconCls:'book_previousIcon',
title: '${westTitle}',
layout:'accordion',
layoutConfig:{
animate:true,
activeOnTop : ${activeOnTop}
#foreach($card in $cardList)
autoScroll:true,
border:false,
contentEl: 'div.card.${card.menuid}',
#if(${card.iconcls}&&${card.iconcls}!=&&)
iconCls:'${card.iconcls}',
title:'${card.menuname}'
#if(${card.isNotLast})
split:true,
region:'west',
collapsible: true,
header:false,
autoScroll:false,
//border:false,
anchor:'100% 6%',
region:'center',
type:'hbox',
padding:'3 3 3 3',
pack:'start',
align:'top'
defaults:{margins:'0 5 0 0'},
xtype: 'panel',
items:[configButton,closeButton]
1.Viewport一个panel 来固定region:'center', 也就是center部分
2.再使用一个panel，使用layout:'anchor',布局方式，anchor布局将使组件固定于父容器的某一个位置，使用anchor布局的子组件尺寸相对于容器的尺寸，即父容器容器的大小发生变化时，使用anchor布局的组件会根据规定的规则重新渲染位置和大小。
3.新增第二部的panel，添加3个子panel布局，并且配置它们的anchor，来填充父容器，保证改变3个中得一个，其他2个能自动填充空间，进行自动适应。
4.这里提示一点：由于是使用4个panel 组装成的区域，可以使用collapseMode:'mini'，来控制关闭右侧的面板。
实现效果：
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：539883次
积分：8492
积分：8492
排名：第879名
原创：301篇
转载：58篇
评论：103条
Email : .cn weibo:
(1)(3)(2)(2)(1)(1)(3)(4)(3)(26)(20)(11)(9)(4)(11)(5)(6)(10)(4)(14)(19)(15)(14)(4)(19)(18)(9)(18)(34)(48)(17)(3)(2)Ext动态改变Viewport(border布局)center 区域的组件(3个grid一个window换着出现)除了一个grid之外其他的grid只显示一条数据
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = "side";
//////////////////////////////////////////////////////////////////////////
var rtn = new Ext.tree.TreeNode({
text: "功能列表",
expanded: true
var tn1 = new Ext.tree.TreeNode({
text: "查看库存",
listeners: {
'click': function() {
var items=Ext.getCmp("vp").findById("center").
for(var i=0;i&items.i++){
Ext.getCmp("vp").findById("center").remove(items[i]);
Ext.getCmp("vp").findById("center").add(grid).doLayout();
Ext.getCmp("vp").findById("center").findById('gp2').hide();
Ext.getCmp("vp").findById("center").findById('w').hide();
Ext.getCmp("vp").findById("center").findById('gp1').hide();
Ext.getCmp("vp").findById("center").findById('gp').show();
//Ext.getCmp("vp").findById("center").removeAll();
//Ext.MessageBox.alert('',Ext.getCmp("vp").findById("center").getXType());
//Ext.getCmp("vp").findById("center").add(grid);
//Ext.getCmp("vp").findById("center").doLayout();
//alert(store.getCount());
//Ext.MessageBox.alert('',Ext.getCmp("vp").findById("center").xtype) ;
//Ext.MessageBox.alert(position);
var tn2 = new Ext.tree.TreeNode({
text: "申请办公用品",
listeners: {
'click': function() {
var items=Ext.getCmp("vp").findById("center").
for(var i=0;i&items.i++){
Ext.getCmp("vp").findById("center").remove(items[i]);
Ext.getCmp("vp").findById("center").add(win).doLayout();
Ext.getCmp("vp").findById("center").findById('gp2').hide();
Ext.getCmp("vp").findById("center").findById('gp').hide();
Ext.getCmp("vp").findById("center").findById('gp1').hide();
Ext.getCmp("vp").findById("center").findById('w').show();
//Ext.getCmp("vp").findById("center").add(form);
//xt.getCmp("vp").findById("center").doLayout();
//alert(store.getCount());
//Ext.MessageBox.alert('',Ext.getCmp("vp").findById("center").xtype) ;
//Ext.MessageBox.alert(position);
var tn3 = new Ext.tree.TreeNode({
text: "领导审批",
listeners: {
'click': function() {
var items=Ext.getCmp("vp").findById("center").
for(var i=0;i&items.i++){
Ext.getCmp("vp").findById("center").remove(items[i]);
Ext.getCmp("vp").findById("center").add(grid1).doLayout();
Ext.getCmp("vp").findById("center").findById('gp2').hide();
Ext.getCmp("vp").findById("center").findById('gp').hide();
Ext.getCmp("vp").findById("center").findById('w').hide();
Ext.getCmp("vp").findById("center").findById('gp1').show();
//Ext.getCmp("vp").findById("center").removeAll();
//Ext.getCmp("vp").findById("center").add(form);
//xt.getCmp("vp").findById("center").doLayout();
//alert(store.getCount());
//Ext.MessageBox.alert('',Ext.getCmp("vp").findById("center").xtype) ;
//Ext.MessageBox.alert(position);
var tn4 = new Ext.tree.TreeNode({
text: "库存审批",
listeners: {
'click': function() {
var items=Ext.getCmp("vp").findById("center").
for(var i=0;i&items.i++){
Ext.getCmp("vp").findById("center").remove(items[i]);
Ext.getCmp("vp").findById("center").add(grid1).doLayout();
Ext.getCmp("vp").findById("center").findById('gp1').hide();
Ext.getCmp("vp").findById("center").findById('gp').hide();
Ext.getCmp("vp").findById("center").findById('w').hide();
Ext.getCmp("vp").findById("center").findById('gp2').show();
//Ext.getCmp("vp").findById("center").removeAll();
//Ext.getCmp("vp").findById("center").add(form);
//xt.getCmp("vp").findById("center").doLayout();
//alert(store.getCount());
//Ext.MessageBox.alert('',Ext.getCmp("vp").findById("center").xtype) ;
//Ext.MessageBox.alert(position);
rtn.appendChild(tn1);
rtn.appendChild(tn2);
rtn.appendChild(tn3);
rtn.appendChild(tn4);
//////////////////////////////////////////////////////////////////////////
Ext.Ajax.request({
url: 'login!session.action',
success: function(response, options){
//eid = Ext.decode(response.responseText).
//realname = Ext.decode(response.responseText).
position = Ext.decode(response.responseText).
if(position=='员工'){
tn3.disable();
//////////////////////////////////////////////////////////////////////////
// Ext.Ajax.request({
url: 'inventory.action',
success: function(response, options){
myData = Ext.decode(response.responseText).myD
alert(myData);
Ext.Ajax.request({
url: 'login!getSession.action',
success: function(response, options){
position = Ext.decode(response.responseText).
if(position=='员工'){
tn3.disable();
alert(response.responseText);
// create the data store
var store = new Ext.data.ArrayStore({
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
var store = new Ext.data.Store({
autoLoad : true,
proxy: new Ext.data.HttpProxy({url: 'inventory.action'}),
reader : new Ext.data.JsonReader({
root: 'list'
{name: 'id',mapping: 'id'},
{name: 'name',mapping: 'name'},
{name: 'inventory',mapping: 'inventory'}])
store.load();
// manually load local data
//store.loadData(ay);
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'办公用品ID',header: '办公用品ID',
sortable: true, dataIndex: 'id'},
{header: '办公用品名称',
sortable: true, dataIndex: 'name'},
{header: '办公用品库存',
sortable: true, dataIndex: 'inventory'}
stripeRows: true,
autoExpandColumn: '办公用品ID',
title: '库存信息',
loadMask: true
// config options for stateful behavior
//记忆组件状态
//stateful: true
//////////////////////////////////////////////////////////////////////////
var store1 = new Ext.data.Store({
autoLoad : true,
proxy: new Ext.data.HttpProxy({url: 'leaderresult.action'}),
reader : new Ext.data.JsonReader({
root: 'listleader'
{name: 'id',mapping: 'id'},
{name: 'eid',mapping: 'eid'},
{name: 'realname',mapping: 'realname'},
{name: 'department',mapping: 'department'},
{name: 'chair',mapping: 'chair'},
{name: 'desk',mapping: 'desk'},
{name: 'computer',mapping: 'computer'},
{name: 'leaderresult',mapping: 'leaderresult'},
{name: 'inventoryresult',mapping: 'inventoryresult'},
{name: 'applyresult',mapping: 'applyresult'}])
store1.load();
// manually load local data
//store.loadData(ay);
var grid1 = new Ext.grid.GridPanel({
id: 'gp1',
store: store1,
columns: [
{id:'申请ID',header: '申请ID',
sortable: true, dataIndex: 'id'},
{header: '申请人ID',
sortable: true, dataIndex: 'eid'},
{header: '申请人姓名',
sortable: true, dataIndex: 'realname'},
{header: '申请人部门',
sortable: true, dataIndex: 'department'},
{header: '申请椅子数量',
sortable: true, dataIndex: 'chair'},
{header: '申请办公桌数量',
sortable: true, dataIndex: 'desk'},
{header: '申请办公电脑数量',
sortable: true, dataIndex: 'computer'},
{header: '部门领导确认',
sortable: true, dataIndex: 'leaderresult'},
{header: '库房确认采购入库',
sortable: true, dataIndex: 'inventoryresult'},
{header: '申请人确认领取',
sortable: true, dataIndex: 'applyresult'}
stripeRows: true,
autoExpandColumn: '申请ID',
title: '领导确认',
loadMask: true
// config options for stateful behavior
//记忆组件状态
//stateful: true
//////////////////////////////////////////////////////////////////////////
var store2 = new Ext.data.Store({
autoLoad : true,
proxy: new Ext.data.HttpProxy({url: 'leaderresult.action'}),
reader : new Ext.data.JsonReader({
root: 'listleader'
{name: 'id',mapping: 'id'},
{name: 'eid',mapping: 'eid'},
{name: 'realname',mapping: 'realname'},
{name: 'department',mapping: 'department'},
{name: 'chair',mapping: 'chair'},
{name: 'desk',mapping: 'desk'},
{name: 'computer',mapping: 'computer'},
{name: 'leaderresult',mapping: 'leaderresult'},
{name: 'inventoryresult',mapping: 'inventoryresult'},
{name: 'applyresult',mapping: 'applyresult'}])
store2.load();
// manually load local data
//store.loadData(ay);
var grid2 = new Ext.grid.GridPanel({
id: 'gp2',
store: store1,
columns: [
{id:'申请ID',header: '申请ID',
sortable: true, dataIndex: 'id'},
{header: '申请人ID',
sortable: true, dataIndex: 'eid'},
{header: '申请人姓名',
sortable: true, dataIndex: 'realname'},
{header: '申请人部门',
sortable: true, dataIndex: 'department'},
{header: '申请椅子数量',
sortable: true, dataIndex: 'chair'},
{header: '申请办公桌数量',
sortable: true, dataIndex: 'desk'},
{header: '申请办公电脑数量',
sortable: true, dataIndex: 'computer'},
{header: '部门领导确认',
sortable: true, dataIndex: 'leaderresult'},
{header: '库房确认采购入库',
sortable: true, dataIndex: 'inventoryresult'},
{header: '申请人确认领取',
sortable: true, dataIndex: 'applyresult'}
stripeRows: true,
autoExpandColumn: '申请ID',
title: '领导确认',
loadMask: true
// config options for stateful behavior
//记忆组件状态
//stateful: true
//////////////////////////////////////////////////////////////////////////
var simple = new Ext.FormPanel({
labelWidth:30,
baseCls:"x-plain",
defaultType:"textfield",
defaults:{width:215},
labelAlign : 'top',
buttonAlign: 'left',
region: "center",
style: 'padding:10px 20',
labelWidth:115,
baseCls:"x-plain",
defaultType:"textfield",
defaults:{width:150},
buttonAlign:"center",
id:"chair",
fieldLabel:"申请椅子的数量",
name:"chair",
regex : /^[0-9]*[1-9][0-9]*$/,
regexText:"只能输入正整数",
allowBlank:false,
blankText:"数量不能为空"
id:"desk",
fieldLabel:"申请办公桌的数量",
name:"desk",
regex : /^[0-9]*[1-9][0-9]*$/,
regexText:"只能输入正整数",
allowBlank:false,
blankText:"数量不能为空"
id:"computer",
fieldLabel:"申请办公电脑的数量",
name:"computer",
regex : /^[0-9]*[1-9][0-9]*$/,
regexText:"只能输入正整数",
allowBlank:false,
blankText:"数量不能为空"
text:"提交给部门领导审批",
type:"submit",
handler:function(){
if(simple.form.isValid()){
Ext.MessageBox.show({
title:"请稍等",
msg:"正在加载......",
progressText:"",
width:300,
progress:true,
closable:false,
animEl:"loding"
//waitConfig:{interval:100}
var f = function(v) {
return function(){
var i = v / 100;
Ext.MessageBox.updateProgress(i,Math.round(100*i)+"%",'');
for(var i = 1; i & 101; i++) {
setTimeout(f(i), i * 10);
//提交到服务器操作
simple.form.doAction("submit",{
url:'apply.action',
method:"post",
params:"",
success:function(form, action){
Ext.Msg.alert('申请成功',action.result.message,f);
function f(){
simple.form.reset();
ponentMgr.get("chair").focus();
failure:function(form, action){
Ext.Msg.alert('申请失败',action.result.message,f);
function f(){
simple.form.reset();
ponentMgr.get("chair").focus();
text:"重置",
handler:function(){
//重置表单
simple.form.reset();
//定义窗体
var win = new Ext.Window({
title:"办公物品申请窗口",
layout:"fit",
width:325,
height:200,
resizable:false,
plain:true,
bodyStyle:"padding:10px",
maximizable:false,
closeAction:"close",
closable:false,
collapsible:true,
plain:true,
buttonAlign:"center",
items:simple
//////////////////////////////////////////////////////////////////////////
var viewport = new Ext.Viewport({
layout: 'border',
region: 'north',
html: '&h1 class="x-panel-header"&Page Title&/h1&',
autoHeight: true,
border: false,
margins: '0 0 5 0'
id: 'west',
region: 'west',
collapsible: true,
title: 'Navigation',
xtype: 'treepanel',
width: 200,
autoScroll: true,
split: true,
loader: new Ext.tree.TreeLoader(),
root: rtn,
rootVisible: true
id: 'center',
region: 'center',
xtype: 'container',
layout:'fit',
region: 'south',
title: 'Information',
collapsible: true,
html: 'Information goes here',
split: true,
height: 100,
minHeight: 100
//doLayout() 在hide()后会少一条数据
// Ext.getCmp("vp").findById("center").findById("center1").add(grid1);
// Ext.getCmp("vp").findById("center").findById("center2").add(grid);
// Ext.getCmp("vp").findById("center").findById("center3").add(win);
// Ext.getCmp("vp").findById("center").findById("center1").doLayout();
// Ext.getCmp("vp").findById("center").findById("center2").doLayout();
// Ext.getCmp("vp").findById("center").findById("center3").doLayout();
Ext.getCmp("vp").findById("center").findById("gp").hide();
Ext.getCmp("vp").findById("center").findById("w").hide();
Ext.getCmp("vp").findById("center").findById("gp1").hide();
Ext.getCmp("vp").findById("center").findById("gp2").hide();
图片1:正常的grid
图片2:只有一条数据的grid
求解 感激不尽!!!
看了一下你的代码，和你的问题描述，你把简单问题复杂化了。
我知道你是想点击左边的树来控制右边显示不同的面板。其实你右边采用card布局就可以了
你看下官网这个布局示例，他本身就是采用的card布局，单击左边树，右边显示不同内容。
还有你的代码，是一个整体的组件就不要分开来写。除非其他地方要调用（其他地方调用其实也可以写在一个整体）
已解决问题
未解决问题随笔 - 13&
评论 - 13&
&&&&&&&&&&&
先看上代码&body&&&&&&ext:ResourceManager&ID="ResourceManager1"&runat="server"&DirectMethodNamespace="X"&&&&&&&&IDMode="Explicit"&InitScriptMode="Linked"&/&&&&&&form&id="form1"&runat="server"&&&&&&ext:Viewport&runat="server"&ID="vwpLayout"&Layout="fit"&&&&&&&&&&Items&&&&&&&&&&&&&&ext:GridPanel&runat="server"&ID="grdMain"&Layout="fit"&Border="false"&AutoScroll="true"&AutoHeight="false"&&&&&&&&&&&&&&&&&&TopBar&&&&&&&&&&&&&&&&&&&&&&ext:Toolbar&runat="server"&&&&&&&&&&&&&&&&&&&&&&&&&&Items&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&ext:Button&runat="server"&ID="btnAdd"&IconCls="add-css"&Text="新&增"&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&/ext:Button&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&ext:Button&runat="server"&ID="btnSearch"&IconCls="search-css"&Text="查&询"&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&/ext:Button&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&ext:Button&runat="server"&ID="btnBatchDelete"&IconCls="remove-css"&Text="批量删除"&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&/ext:Button&&&&&&&&&&&&&&&&&&&&&&&&&&/Items&&&&&&&&&&&&&&&&&&&&&&/ext:Toolbar&&&&&&&&&&&&&&&&&&/TopBar&&&&&&&&&&&&&&&&&&SelectionModel&&&&&&&&&&&&&&&&&&&&&&ext:CheckboxSelectionModel&runat="server"&SingleSelect="false"&Sortable="false"&&&&&&&&&&&&&&&&&&&&&&/ext:CheckboxSelectionModel&&&&&&&&&&&&&&&&&&/SelectionModel&&&&&&&&&&&&&&&&&&LoadMask&Msg="正在载入……"&ShowMask="true"&/&&&&&&&&&&&&&&&&&&ColumnModel&DefaultSortable="true"&runat="server"&ID="colmMain"&&&&&&&&&&&&&&&&&&&&&&Columns&&&&&&&&&&&&&&&&&&&&&&&&&&ext:RowNumbererColumn&Align="Right"&Resizable="false"&&&&&&&&&&&&&&&&&&&&&&&&&&/ext:RowNumbererColumn&&&&&&&&&&&&&&&&&&&&&&&&&&ext:NumberColumn&Align="Left"&DataIndex="FDegreeCode"&Editable="false"&Header="编&码"&&&&&&&&&&&&&&&&&&&&&&&&&&&&Format="0"&&&&&&&&&&&&&&&&&&&&&&&&&&/ext:NumberColumn&&&&&&&&&&&&&&&&&&&&&&&&&&ext:Column&Align="Left"&DataIndex="FDegreeName"&Editable="false"&Header="名&称"&&&&&&&&&&&&&&&&&&&&&&&&&&/ext:Column&&&&&&&&&&&&&&&&&&&&&&/Columns&&&&&&&&&&&&&&&&&&/ColumnModel&&&&&&&&&&&&&&&&&&Store&&&&&&&&&&&&&&&&&&&&&&ext:Store&runat="server"&ID="storeMain"&&&&&&&&&&&&&&&&&&&&&&&&&&Reader&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&ext:JsonReader&IDProperty="FDegreeCode"&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&Fields&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&ext:RecordField&Name="FDegreeCode"&Type="Int"&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&/ext:RecordField&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&ext:RecordField&Name="FDegreeName"&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&/ext:RecordField&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&/Fields&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&/ext:JsonReader&&&&&&&&&&&&&&&&&&&&&&&&&&/Reader&&&&&&&&&&&&&&&&&&&&&&/ext:Store&&&&&&&&&&&&&&&&&&/Store&&&&&&&&&&&&&&/ext:GridPanel&&&&&&&&&&/Items&&&&&&&&& &Listeners&
&AfterLayout Handler="#{grdMain}.setHeight(#{vwpLayout}.getHeight());" /&
&/Listeners&&/ext:Viewport&&/form&&/body&请注意文中红色加粗部分&主要原理为在GridPanel 对象的父容器中添加AfterLayout监听事件，并在监听事件中重新设置GridPanel高度；&GridPanel 的AutoHeight属性不能为true，否则代码将无效。
阅读(...) 评论()Ext&JS&深入学习
是一款javascript的页面展现框架，以其丰富的DOM界面元素、美丽的渲染界面、强大的功能而深受用户的欢迎。ExtJS编码较多且复杂，不如
JQuery小巧灵活，但是熟悉之后也就感觉也挺简单的。ExtJS原本是美国雅虎公司写出来的用于公司自己页面展现的javascript框架，但开源
后深受人们喜爱。雅虎公司是一个受人尊敬的公司。
首先，在学习ExtJS之前介绍一下调试html、jsp、asp、js等页面元素的工具。用IE浏览器的可以到微软官网上下载IE
Debugger等或到“工具”下找“开发人员工具”，用firefox可以到firefox官网上找firebug插件。firebug是一个功能强大
比较好用的调试工具，在此要强调一下IE Debugger使用中的注意点：
1、按“F12“
打开开发人员工具，在缓存菜单下勾选“始终从服务器更新”，这样当刷新页面时浏览器就会自动从服务器更新页面源代码。不选中的话IE只使用缓存的源码这样就无法用更新的代码就无法调试了。
2、使用eclipse 启动tomcat 服务器后部署服务时，tomcat 会热部署更新过的内容。
学习Ext的方法和工具：Ext的API文档、源码文档、系统讲解书籍、还有从网上搜集过来的知识点。
一、EditorGridPanel
Ext.Window{EditorGridPanel{ColumnModel{header,dataIndex,sortable,editor,..},Record{name,mapping,type,..},DataReader{..},JsonReader{id,root,totalProperty,..},store{autoLoad,data,baseparams,listener,proxy,reader,..}JsonStore{autoLoad,baseParams,data,listener,fields,..},numberfield{..},TextField{..},datefield{..},combobox{store,displayfield,mode,..},Toolbar{..},pagingbar{store,pageSize,..}..}}
&二、常见技术难点
页面的javascript初始化问题：&body
onLoad='initMyApp();'&，这种方式在不同的浏览器会有不同的表现方式且是在页面中的图片还没有加载的时候。
Ext.onReady();是extJS对不同浏览器的javascript初始化的封装，她会在正确的页面加载完成后执行，然后去操作文档对象模型的
元素。（DOM Document Object Model)
1、extjs中CheckboxSelectionModel的全选框
当翻页后新的页面内全选框仍然保持全选状态，这是extJs不好的一个地方。可以用以下方式去掉(gridpanel的监听事件)：
listeners:{
render:function(){
&& var hd_checker =
this.getEl().select('div.x-grid3-hd-checker');
(hd_checker.hasClass('x-grid3-hd-checker'))
&&&&&&&&&&&
hd_checker.removeClass('x-grid3-hd-checker'); // 去掉全选框
网上还有对全选框的一些问题的其他处理(参考）：
function autoCheckGridHead(){
&&var hd_checker =
grid_taskQueryPop.getEl().select('div.x-grid3-hd-checker');&&
hd = hd_checker.first();&
&&&&&if(hd
!= null){&
&if(grid_taskQueryPop.getSelectionModel().getSelections().length
&&&&&&&&&&&&
grid_taskQueryPop.getStore().getCount()){&
&&&&&&&&&&&&&&&
//清空表格头的checkBox&&
&&&&&&&&&&&&&&&
if(hd.hasClass('x-grid3-hd-checker-on')){
&&&&&&&&&&&&&&&&
hd.removeClass('x-grid3-hd-checker-on');&&&&
//x-grid3-hd-checker-on
&&&&&&&&&&&&&&&
&//grid_taskQueryPop.getSelectionModel().clearSelections();
&&&&&&&&&&&&
&&&&&&&&&&&
&&&&&&&&&&&
&if(grid_taskQueryPop.getStore().getCount()
== 0){&//没有记录的话清空;
&&&&&&&&&&&
&&&&&&&&&&&
&&&&&&&&&&&
&hd.addClass('x-grid3-hd-checker-on');
&&&&&&&&&&&&&&&
grid_taskQueryPop.getSelectionModel().selectAll();
&&&&&&&&&&&
2、界面是这样,点击主界面上表格的一条记录,会弹出显示一个window,window上有一个表格,选择模式为CheckboxSelectionModel,需要在window出现后自动勾选其上面表格的一些记录的checkbox
给window的show时间添加函数
定义一个records数组，存放需要勾选的记录
然后对grid的store加载到的数据进行循环对比
将需要勾选的列加入到records中，
然后调用CheckboxSelectionModel的selectRecords方法即可，希望能解决你的问题，如果大家有其他的好办法，希望能共同学习
var records = new Array();
ds.each(function(record) {
for (var i = 0; i & operationArry. i++)
if (record.data.resourceId == operationArry[i]) {
records.push(record);
sm.selectRecords(records, true);或者：
listeners&:&{&&&&&
&&&&&&&&&&&&&&&&&&&load&:&function()&{&&&&&
&&&&&&&&&&&&&&&&&&&&&&&var&records&=&new&Array();&&&&&
&&&&&&&&&&&&&&&&&&&&&&&store.each(function(record)&{&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&if&(recordIds.contains(record.data.id))//这句换成你相应的&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&records.push(record);&&&&&
&&&&&&&&&&&&&&&&&&&&&&&});&&&&&
&&&&&&&&&&&&&&&&&&&&&&&selMod.selectRecords(records,&true);//&以后每次load数据时，都会默认选中&&&&&
&&&&&&&&&&&&&&&&&&&}&&&&&
&&&&&&&&&&&&&&&}
&3、datastore的一些取值方法
store.getAt(i)
初始化的事件：
var selModel = new Ext.grid.CheckboxSelectionModel();
//你的 Checkbox 选择器定义
var dataStore = new Ext.data.JsonStore({
//这儿是你的 dataStore 的具体定义
listeners: {
load: function(store) {
var index = 0;
store.each(function(record) {
if(record.data.column_name == '1') {
//column_name 替换成你的列名， '1' 替换成你的值
selModel.selectRow(index);
store 排序：添加sortInfo 属性
sortInfo : {field: "fieldName", direction: "ASC|DESC"}
监听异常事件：
new&Ext.data.Store({&&
&&&&proxy&:&new&Ext.data.HttpProxy({&&
&&&&&&&&url&:&basePath&+&'/fundAuditAction.do'&&
&&&&reader&:&new&Ext.data.JsonReader({&&
&&&&&&&&totalProperty&:&'total',&&
&&&&&&&&root&:&'root',&&
&&&&&&&&successProperty&:&'succeed',&&
&&&&&&&&fields&:&[...]&&
&&&&,successProperty:&'success'&//&后台传输的标识。必须&&
&&&&,listeners:{&&
&&&&&&&&exception:function(dataProxy,&type,&action,&options,&response,&arg)&{&&&
&&&&&&&&&&&&var&o&=&Ext.util.JSON.decode(response.responseText);&&
&&&&&&&&&&&&if(!o.success){&&
&&&&&&&&&&&&&&&&Ext.Msg.alert('错误提示',o.message);&&
&&&&&&&&&&&&}&&
&&&&&&&&}&&
后端产生异常时，发送json串
"{success:&false,&message:'"+msg+"'}"&
4、ExtJS的一些布局.cn/s/blog_5fe080e60100dyya.html
5、修改extJS gridPanel的行高及其他
//增加CSS样式即可达到效果& .x-grid3-row td,.x-grid3-summary-row td{&
line-height:18//控制GRID单元格高度&
vertical-align://单元格垂直居中&
& border-right: 1px solid #eceff6
!//控制表格列线&
& border-top: 1px solid #eceff6
!//控制表格行线&
.x-grid3-row-checker, .x-grid3-hd-checker {
width:100%;
background-position:2px 2
background-repeat:no-
background-color:
就是去ext-all.css里边修改相应的设置将GridPanel放入到Viewport中，解决自适应宽度和高度问题。 代码如下：
= new Ext.grid.GridPanel({
margins: '2 2 2 2',
//为了不要与容器的边框重叠，设定2px的间距。
region: 'center',
title: '测试'
new Ext.Viewport({
layout: 'border',
items: [grid]
6、在初使化GRID时怎么让CheckboxSelectionModel这一列中的某几行变成灰色不可用，发现CheckboxSelectionModel并
没有disabled这个属性.
var&row&=&grid.getView().getRow(0);//得到第一行的div&&
Ext.get(row).mask();//给这行增加遮罩&&
Ext.get(row).unmask();//给这行取消遮罩&
7、combobox 添加数据仓库问题
如果用远程的方式，那么性能有影响但是在事件触发刷新操作时不会出现一些“缺少对象”，“length为空”等错误。
var comboEditor = {
&&& xtype :
triggerAction : 'all',
&&& displayField
: 'state',
&&& valueField :
&&& store :
&&& xtype :
'jsonstore',
&&& root :
'records',
&&& fields :
['state'],
&&& proxy : new
Ext.data.HttpProxy({
rootPath +
'/business/com.ai.cu.group.action.GiftCardApplyAuditAction?action=getAuditOperInfo'
用页面上定义的本地&select/&选项，性能好；但是在事件触发刷新操作时会出现一些“缺少对象”，“length为空”等错误,导致刷新页面失败。
&select id="stateList" style="display:
&option&审批通过&/option&
&option&审批不通过&/option&
8 、extjs 本地汉化
需要注意的是编码方式要正确，在这里，需要将编码方式改为utf-8，否则汉化不成功，对话框按钮显示的是ok，可以用另存为的方法，然后选择编码。
type="text/javascript"
src="ext-3.2.0/src/locale/ext-lang-zh_CN.js"&&/script&&&&&&&&&
//汉化这里要说明的是DOCTYPE不能设置错误，否则IE6.0会显示不出表头的列名。还有就是要汉化提示信息，注意导入ext-lang-zh_CN.js&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"&
9、日期控件{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
name : "birthday",
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
type : "date",
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
dateFormat : "Y-n-j"
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
header : '出生日期',
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
dataIndex : 'birthday',
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
renderer : Ext.util.Format.dateRenderer('Y年m月d日')
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
// 格式化日期
&&&&&&&&&&&&&&&&&&&&&&&&&&&
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。}