`
leon1509
  • 浏览: 533307 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

在Grid上添加两行工具栏(搜索用)、根据数据确定某行使用的CSS

阅读更多

var lineColor = function(record,rowIndex,rowParams,store){
            //锁定用户显示红色
    var _flag = record.data['flag'];
    var _css;
    if(_flag == "0") _css = 'x-grid-record-red';
    else if(_flag == "1") _css = 'x-grid-record-blue';
    else _css = 'x-grid-record-gray';
            return _css;
};

[color=red]var searchBar = [
        ' ', '姓名:', ' ', { xtype : 'textfield', width : '70', id : 'q_name' },
        ' ', '学/工号:', ' ', { xtype : 'textfield', width : '85', id : 'q_sno' },
        ' ', '部门:', ' ', { xtype : 'textfield', width : '120', id : 'q_dept' },
        '->', { xtype : 'button', text: '搜索', iconCls : 'page_find', handler : doQuery }
        ];[/color]

var yourGrid = new Ext.grid.GridPanel({
      bodyStyle : 'width:100%',
      viewConfig : { forceFit : true, getRowClass : lineColor },
      columns : cm,
      store : ds,
      loadMask : { msg : '操作中......' },
      stripeRows : true,
      border : false,
      autoExpandColumn : 'memo',
      [color=red]tbar : searchBar[/color]
});

[color=red]yourGrid.on("render", function(){
        tbar2 = new Ext.Toolbar({
     renderTo : yourGrid.tbar,
     items : ['two', '-', {
      text : 'search',
      iconCls : 'search'
     }, '-']
    });
})[/color]
分享到:
评论

相关推荐

    前端开发工具之CSS工具库

    在前端开发领域,CSS工具库扮演着至关重要的角色,它们为开发者提供了丰富的样式组件、预处理器、自动化工具和布局解决方案,极大地提升了开发效率和代码质量。以下是对“前端开发工具之CSS工具库”这一主题的详细...

    拥抱未来的CSS布局方式flex与grid布局

    在现代Web开发中,CSS布局方式的演进为我们提供了更强大、更灵活的工具来构建复杂的网页和应用程序。"拥抱未来的CSS布局方式flex与grid布局"这个主题将深入探讨两种主流的布局技术:Flexbox(弹性盒布局)和Grid ...

    css-grid-vs-flexbox

    在网页布局设计中,CSS Grid和Flexbox是两种强大的布局工具,它们的出现极大地提高了开发者构建响应式和灵活页面的能力。下面将详细讲解这两种技术及其差异。 **CSS Grid(网格布局)** CSS Grid布局系统是一种二维...

    jquery grid插件 -- 编辑表格

    此外,`jQuery Grid`还支持自定义事件处理,例如在数据编辑前后执行的函数,以及自定义验证规则。 `testGrid2.html`可能是一个示例网页,展示了如何在实际项目中应用上述配置。`images`目录可能包含用于美化`jQuery...

    38个CSS布局网站模板

    在网页设计领域,CSS(Cascading Style Sheets)布局是构建网页结构的关键技术。这个“38个CSS布局网站模板”资源包包含了多种基于CSS的网页布局设计,可以帮助开发者快速搭建美观、响应式的网站。这些模板通常由...

    用HTML+CSS做一个漂亮简单的旅游网站——旅游网页设计与实现(6页)HTML+CSS+JavaScript

    - **导航栏**: 使用`<nav>`标签创建,结合CSS实现下拉菜单或侧边栏等功能。 - **轮播图**: 利用JavaScript控制图片的自动切换或手动切换。 - **详情页**: 展示景点详细介绍、地图位置、开放时间等内容。 - **地图...

    DIV+CSS案列源代码04

    1. **图片展示**:使用CSS调整图片大小、位置,添加阴影效果,甚至实现响应式布局,确保在不同设备上都能良好显示。 2. **导航菜单**:创建一个清晰易用的导航栏,可能包括下拉菜单,利用CSS实现鼠标悬停效果和过渡...

    CSS定位

    在网页设计中,CSS(Cascading Style Sheets)定位是至关重要的一个环节,它决定了元素在页面上的位置和布局。本篇文章将深入探讨CSS定位模型,包括static、relative、absolute、fixed以及flexbox和grid等定位方式,...

    CSS设计指南 第三版 源码

    网格布局(如CSS Grid)为二维布局提供了强大的工具。 4. **定位机制**:`position`属性(如`static`、`relative`、`absolute`、`fixed`)控制元素相对于其正常流位置的定位。理解这些定位方式的差异和相互影响是...

    自己用html+css仿写的淘宝,可以用来交作业,应付期末考试用

    在仿写淘宝的过程中,需要创建各种元素来模拟页面上的导航栏、商品列表、搜索框、用户登录模块等组件。例如,`<div>`用于创建分区,`<a>`定义超链接,`<img>`插入图片,`<ul>`和`<li>`用于列表,`<form>`和`<input>`...

    css&html学习project之六

    在“CSS&HTML学习project之六”中,我们聚焦于使用这两种关键技术来构建网页布局的基础与进阶技巧。HTML(HyperText Markup Language)是网页内容的结构化语言,而CSS(Cascading Style Sheets)则负责定义这些内容...

    CSS学习笔记(手写版)

    通过本篇手写版CSS学习笔记,我们深入了解了CSS的基础知识、核心布局技术(如Flexbox和Grid)、响应式设计、动画效果以及常用的CSS框架和工具。无论你是初学者还是有一定经验的开发者,都能从中获得宝贵的知识和技巧...

    CSS+div 布局

    4. 网格布局(Grid Layout):CSS3的另一项重要布局模式,适合二维布局,能够精确控制网格的行和列,以及元素在网格中的位置。 四、CSS+div布局实践 1. 固定布局:常用于简单的两栏布局,左右栏宽度固定,中间内容...

    css商业网站布局之道源码

    《CSS商业网站布局之道》是一本深入探讨CSS在构建现代商业网站布局中的核心技术与实践方法的资源集合。这个压缩包文件"css商业网站布局之道源码.rar"包含了一系列的示例代码,旨在帮助读者更好地理解和应用CSS布局...

    CSS网站布局与开发技巧

    不同的浏览器可能对某些CSS属性支持程度不同,因此在编写CSS时需要考虑兼容性问题,可以使用前缀(如-webkit-、-moz-等)或者借助工具如Autoprefixer自动添加前缀。 十、调试工具 熟练使用开发者工具,如Chrome ...

    檀木家居css网站模板

    CSS3的媒体查询(Media Queries)是实现响应式设计的关键工具,通过设定不同屏幕尺寸下的样式规则,确保网站在手机、平板电脑和桌面电脑上都有良好的观感。在檀木家居模板中,可能会有针对小屏幕设备的优化,比如...

    音乐网站 ,css+div 设计

    例如,在音乐网站的头部区域,我们可以定义一个全局的导航栏样式,而在特定页面上,可以通过增加选择器的特异性来覆盖这个全局样式,使特定页面的导航栏有所区别。 在设计音乐网站时,我们需要考虑用户体验,特别是...

    关于flex 的css样式表

    - Flexbox在现代浏览器中广泛支持,但在较旧版本的IE浏览器中可能需要使用其他方法(如CSS Grid)或使用polyfill库来实现兼容。 5. **实际应用** - 导航栏:通过`justify-content`实现水平居中或两端对齐。 - ...

    Div+CSS.rar_DIV_css_div css 教程

    在网页设计中,Div主要用于定义页面上的区块,而CSS则负责控制这些区块的样式、位置以及布局。本教程将深入探讨Div+CSS布局的基础知识和应用技巧。 ### Div标签 Div是HTML中的一个块级元素,其本质是一个容器,...

    两个div+css整站的例子

    本文将深入探讨“两个div+css整站的例子”,帮助你全面理解如何利用这两个工具创建美观且功能完善的网站。 首先,Div是HTML中的一个块级元素,它允许我们将网页内容划分为多个独立的区域或“分区”。通过设置不同的...

Global site tag (gtag.js) - Google Analytics