ExtJs学习笔记(4)_EditorGridPanel(可编辑的网格控件)

简介: 这一节,我们将看到ExtJs功能强大的可编辑网格控件,几乎与VS.Net的GridView功能一样了,但是ExtJs的可是纯JS的UI   一.静态示例(改自ExtJs的官方示例) a.因为我们是采用xml做为数据源的,这里贴出xml的内容 Code      红竹    产自加拿大    4    喜阴    2.

这一节,我们将看到ExtJs功能强大的可编辑网格控件,几乎与VS.Net的GridView功能一样了,但是ExtJs的可是纯JS的UI

 

一.静态示例(改自ExtJs的官方示例)

a.因为我们是采用xml做为数据源的,这里贴出xml的内容

img_1c53668bcee393edac0d7b3b3daff1ae.gif img_405b18b4b6584ae338e0f6ecaf736533.gif Code
<?xml version="1.0" encoding="utf-8"?>
<catalog>
  
<plant>
    
<common>红竹</common>
    
<botanical>产自加拿大</botanical>
    
<zone>4</zone>
    
<light>喜阴</light>
    
<price>2.44</price>
    
<availability>03/15/2006</availability>
    
<indoor>0</indoor>
  
</plant>  
  
<plant>
    
<common>紫罗兰</common>
    
<botanical>Erythronium americanum</botanical>
    
<zone>4</zone>
    
<light>半阴半光</light>
    
<price>9.04</price>
    
<availability>02/01/2006</availability>
    
<indoor>1</indoor>
  
</plant> 
</catalog>


b.ExtJs调用页面

img_1c53668bcee393edac0d7b3b3daff1ae.gif img_405b18b4b6584ae338e0f6ecaf736533.gif Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
     
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
    
<script type="text/javascript" src="../ext-all.js"></script>     
    
<title>可编辑的网格</title>
</head>
<body>

img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif
<script type="text/javascript">  

img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif    Ext.onReady(
function() {
        Ext.QuickTips.init();

img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        
function formatDate(value) {
            
return value ? value.dateFormat('Y年m月d日') : '';
        }
;
        
        
        
var fm = Ext.form;

        
//定义复选框列
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif
        var checkColumn = new Ext.grid.CheckColumn({
            header: 
"室内?",
            dataIndex: 
'indoor',
            width: 
55
        }
);

        
//定义网格的列模板
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif
        var cm = new Ext.grid.ColumnModel([{
            id: 
'common',
            header: 
"名称",
            dataIndex: 
'common',
            width: 
220,
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            editor: 
new fm.TextField({
                allowBlank: 
false
            }
)
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        }
{
            header: 
"光照",
            dataIndex: 
'light',
            width: 
130,
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            editor: 
new Ext.form.ComboBox({
                allowBlank:
false,
                typeAhead: 
true,
                triggerAction: 
'all',
                transform: 
'sellight',
                lazyRender: 
true,
                listClass: 
'x-combo-list-small'
            }
)
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        }
{
            header: 
"售价",
            dataIndex: 
'price',
            width: 
70,
            align: 
'right',
            renderer: 
'usMoney',
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            editor: 
new fm.NumberField({
                allowBlank: 
false,
                allowNegative: 
false,
                maxValue: 
100000
            }
)
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        }
{
            header: 
"上市时间",
            dataIndex: 
'availDate',
            width: 
105,
            renderer: formatDate,
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            editor: 
new fm.DateField({
                format: 
'm/d/y',
                minValue: 
'01/01/06',
                disabledDays: [
06],
                disabledDaysText: 
'目前还未上市'
            }
)
        }
,
        checkColumn
    ]);

        
        cm.defaultSortable 
= true;

        
//定义记录的类型
        var Plant = Ext.data.Record.create([        
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif           
{name: 'common', type: 'string' },
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif           
{ name: 'botanical', type: 'string' },
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif           
{ name: 'light' },
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif           
{ name: 'price', type: 'float' },            
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif           
{ name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y' },
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif           
{ name: 'indoor', type: 'bool' }
      ]);

        
//创建数据源
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif
        var store = new Ext.data.Store({            
            url: 
'plants.xml',            
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            reader: 
new Ext.data.XmlReader({                
                record: 
'plant'
            }
, Plant),
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            sortInfo: 
{ field: 'common', direction: 'ASC' }
        }
);

        
//创建可编辑的网格
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif
        var grid = new Ext.grid.EditorGridPanel({
            store: store,
            cm: cm,
            renderTo: 
'editor-grid',
            width: 
600,
            height: 
180,
            autoExpandColumn: 
'common',
            title: 
'可编辑的网格',
            frame: 
true,
            plugins: checkColumn,
            clicksToEdit: 
1,

img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            tbar: [
{
                text: 
'增加记录',
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                handler: 
function() {
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                    
var p = new Plant({
                        common: 
'新品种1',
                        light: 
'喜光',
                        price: 
1.0,
                        availDate: (
new Date()).clearTime(),
                        indoor: 
1
                    }
);
                    grid.stopEditing();
                    store.insert(
0, p);
                    grid.startEditing(
00);
                }

}
]
            }
);

            
//加载数据
            store.load();
        }
);

        
//复选框列改变时,保存gird的id列值
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif
        Ext.grid.CheckColumn = function(config) {
            Ext.apply(
this, config);
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            
if (!this.id) {
                
this.id = Ext.id();
            }

            
this.renderer = this.renderer.createDelegate(this);
        }
;

img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        Ext.grid.CheckColumn.prototype 
= {
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            init: 
function(grid) {
                
this.grid = grid;
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                
this.grid.on('render'function() {
                    
var view = this.grid.getView();
                    view.mainBody.on(
'mousedown'this.onMouseDown, this);
                }
this);
            }
,

img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            onMouseDown: 
function(e, t) {
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                
if (t.className && t.className.indexOf('x-grid3-cc-' + this.id) != -1{
                    e.stopEvent();
                    
var index = this.grid.getView().findRowIndex(t);
                    
var record = this.grid.store.getAt(index);
                    record.set(
this.dataIndex, !record.data[this.dataIndex]);
                }

            }
,

img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            renderer: 
function(v, p, record) {
                p.css 
+= ' x-grid3-check-col-td';
                
return '<div class="x-grid3-check-col' + (v ? '-on' : ''+ ' x-grid3-cc-' + this.id + '"> </div>';
            }

        }
;
</script>

<select name="sellight" id="sellight" style="display: none;">
    
<option value="阴"></option>
    
<option value="喜阴">喜阴</option>
    
<option value="半阴半光">半阴半光</option>
    
<option value="喜光">喜光</option>
    
<option value="日光">日光</option>
</select>

<div id="editor-grid"></div>
</body>
</html>

 

二.结合WCF动态读取
1.WCF服务端

img_1c53668bcee393edac0d7b3b3daff1ae.gif img_405b18b4b6584ae338e0f6ecaf736533.gif Code
[OperationContract]
        [WebInvoke(ResponseFormat 
= WebMessageFormat.Xml, Method = "GET", UriTemplate = "GetData")]
        
public T_Class[] GetData()
img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif        
{
            List
<T_Class> _Result = new List<T_Class>();
            
using (DBDataContext db = new DBDataContext())
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            
{
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                _Result 
= db.T_Classes.Where(c => (new string[] "shop""product" }).Contains(c.F_Type.ToLower())).Take(30).ToList();               
                db.Connection.Close();
            }

            
return _Result.ToArray();
        }

 

注意:为使linq to sql中的类支持WCF数据契约,还是要手动对类添加[DataContract]标志,对字段添加[DataMember]标志,否则无法序列化;另外对于System.DateTime类型的字段,最终序列化成xml时,格式类似<F_AddTime>2007-03-07T15:48:04</F_AddTime>,ExtJs不能正确识别这种格式,无奈之下,只好手动修改*.designer.cs文件中自动生成的T_Class类,把F_AddTime手动修改为System.String类型,同时人工处理返回格式,如下:

img_1c53668bcee393edac0d7b3b3daff1ae.gif img_405b18b4b6584ae338e0f6ecaf736533.gif Code
[Column(Storage="_F_AddTime", DbType="DateTime")]
        [DataMember]
        
public string F_AddTime
        {
            
get
            {
                
return CNTVS.TOOLS.Utils.FormatDateString(this._F_AddTime,"yyyy-mm-dd");
            }
            
set
            {
                
if ((this._F_AddTime != value))
                {
                    
this.OnF_AddTimeChanging(value);
                    
this.SendPropertyChanging();
                    
this._F_AddTime = value;
                    
this.SendPropertyChanged("F_AddTime");
                    
this.OnF_AddTimeChanged();
                }
            }
        }

这里,我调用了自己写的一个工具库的FormatDateString方法,当然大家也可以自己定义返回的格式,只要ExtJs能识别就可以了

2.前端页面,跟静态示例几乎一样,贴一下代码:

 

img_1c53668bcee393edac0d7b3b3daff1ae.gif img_405b18b4b6584ae338e0f6ecaf736533.gif Code
img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="03_Grid_Editable.aspx.cs" Inherits="Ajax_WCF._3_Grid_Editable" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    
    
<link rel="stylesheet" type="text/css" href="js/ext2.2/resources/css/ext-all.css" /> 
     
<script type="text/javascript" src="js/ext2.2/adapter/ext/ext-base.js"></script>    
    
<script type="text/javascript" src="js/ext2.2/ext-all.js"></script>
    
<title>可编辑的网格</title>
</head>
<body>
img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif
<script type="text/javascript">  

img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif    Ext.onReady(
function() {
        Ext.QuickTips.init();

img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        
function newGuid() {
            
var guid = "";
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            
for (var i = 1; i <= 32; i++{
                
var n = Math.floor(Math.random() * 16.0).toString(16);
                guid 
+= n;
                
if ((i == 8|| (i == 12|| (i == 16|| (i == 20))
                    guid 
+= "-";
            }

            
return guid;
        }


img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        
function formatDate(value) {
            
return value ? value.dateFormat('Y年m月d日') : '';
        }
;

        
var fm = Ext.form;
        
        
//定义复选框列
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif
        var checkColumn = new Ext.grid.CheckColumn({
            header: 
"显示?",
            dataIndex: 
'F_isShow',
            width: 
55
        }
);

        
//定义网格的列模板
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif
        var cm = new Ext.grid.ColumnModel([{
            id: 
'F_ID',
            header: 
"分类ID",
            dataIndex: 
'F_ID',
            width: 
220,
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            editor: 
new fm.TextField({
                allowBlank: 
false
            }
)
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        }
{
            header: 
"分类名称",
            dataIndex: 
'F_ClassName',
            width: 
130,
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            editor: 
new fm.TextField({
                allowBlank:
false               
            }
)
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        }
,{
            header: 
"类别",
            dataIndex: 
'F_Type',
            width: 
130,
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            editor: 
new fm.ComboBox({
                allowBlank:
false,
                typeAhead: 
true,
                triggerAction: 
'all',
                transform: 
'selType',
                lazyRender: 
true,
                listClass: 
'x-combo-list-small'
            }
)
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        }
{
            header: 
"排序号",
            dataIndex: 
'F_Orders',
            width: 
70,
            align: 
'right',           
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            editor: 
new fm.NumberField({
                allowBlank: 
false,
                allowNegative: 
false,
                maxValue: 
100000
            }
)
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        }
{
            header: 
"添加时间",
            dataIndex: 
'F_AddTime',
            width: 
105,
            renderer: formatDate,
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            editor: 
new fm.DateField({
                format: 
'm/d/y',
                minValue: 
'01/01/06',
                disabledDays: [
06],
                disabledDaysText: 
'不能早于2001年01月06日'
            }
)
        }
,
        checkColumn
    ]);

        
        cm.defaultSortable 
= true;

        
//定义记录的类型
        var T_Class = Ext.data.Record.create([        
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif           
{ name: 'F_ID', type: 'string' },
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif           
{ name: 'F_ClassName', type: 'string' },
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif           
{ name: 'F_ShortName',type:"string" },
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif           
{ name: 'F_ParentID', type: 'string' },
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif           
{ name: 'F_Depth', type: 'float' },
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif           
{ name: 'F_RootID', type: 'float' },
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif           
{ name: 'F_Orders', type: 'float' },
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif           
{ name: 'F_ParentIDStr', type: 'string' },
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif           
{ name: 'F_ParentNameStr', type: 'string' },
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif           
{ name: 'F_ReadMe', type: 'string' },
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif           
{ name: 'F_AddTime', type: 'date', dateFormat: 'Y-m-d' },
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif           
{ name: 'F_Type' ,type:"string"},
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif           
{ name: 'F_MaxPage', type: "float" },
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif           
{ name: 'F_No', type: "float" },
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif           
{ name: 'F_isShow', type: "bool" },
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif           
{ name: 'F_AutoID', type: "float" }           
      ]);

        
//创建数据源
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif
        var store = new Ext.data.Store({            
            url: 
'MyService.svc/GetData',            
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            reader: 
new Ext.data.XmlReader({                
                record: 
'T_Class'
            }
, T_Class),
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            sortInfo: 
{ field: 'F_ID', direction: 'ASC' }
        }
);

        
//创建可编辑的网格
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif
        var grid = new Ext.grid.EditorGridPanel({
            store: store,
            cm: cm,
            renderTo: 
'editor-grid',
            width: 
750,
            height: 
300,
            autoExpandColumn: 
'F_ID',
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            
/**//*title: '基本网格示例',*/
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            viewConfig: 
{ columnsText: '显示列', sortAscText: '升序', sortDescText: '降序' },
            frame: 
false,
            plugins: checkColumn,
            clicksToEdit: 
1,

img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            tbar: [
{
                text: 
'增加记录',
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                handler: 
function() {
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                
var p = new T_Class({
                        F_ID:newGuid(),
                        F_ClassName:
"新分类1",
                        F_ShortName:
"",
                        F_ParentID:
"",
                        F_Depth:
0,
                        F_RootID:
0,
                        F_Orders:
0,
                        F_ParentIDStr:
"",
                        F_ParentNameStr:
"",
                        F_ReadMe:
"",
                        F_AddTime:(
new Date()).clearTime(),
                        F_Type:
"shop",
                        F_MaxPage:
0,
                        F_No:
"",
                        F_isShow:
0,
                        F_AutoID:
0                         
                    }
);
                    grid.stopEditing();
                    store.insert(
0, p);
                    grid.startEditing(
00);
                }

}
]
            }
);

            
//加载数据
            store.load();
        }
);

        
//复选框列改变时,保存gird的id列值
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif
        Ext.grid.CheckColumn = function(config) {
            Ext.apply(
this, config);
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            
if (!this.id) {
                
this.id = Ext.id();
            }

            
this.renderer = this.renderer.createDelegate(this);
        }
;

img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        Ext.grid.CheckColumn.prototype 
= {
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            init: 
function(grid) {
                
this.grid = grid;
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                
this.grid.on('render'function() {
                    
var view = this.grid.getView();
                    view.mainBody.on(
'mousedown'this.onMouseDown, this);
                }
this);
            }
,

img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            onMouseDown: 
function(e, t) {
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                
if (t.className && t.className.indexOf('x-grid3-cc-' + this.id) != -1{
                    e.stopEvent();
                    
var index = this.grid.getView().findRowIndex(t);
                    
var record = this.grid.store.getAt(index);
                    record.set(
this.dataIndex, !record.data[this.dataIndex]);
                }

            }
,

img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            renderer: 
function(v, p, record) {
                p.css 
+= ' x-grid3-check-col-td';
                
return '<div class="x-grid3-check-col' + (v ? '-on' : ''+ ' x-grid3-cc-' + this.id + '"> </div>';
            }

        }
;
</script>

<select name="selType" id="selType" style="display: none;">
    
<option value="shop">商家分类</option>
    
<option value="product">产品分类</option>
    
<option value="place">地区分类</option>    
</select>
<form id="form1" runat="server">
    
<div id="editor-grid"></div>
</form>
</body>
</html>

 转载请注明来自"菩提树下的杨过"http://www.cnblogs.com/yjmyzz/archive/2008/08/29/1279307.html





 

目录
相关文章
|
5月前
|
前端开发 算法 JavaScript
从基础到进阶:实现div控件的拖拽和缩放功能
从基础到进阶:实现div控件的拖拽和缩放功能
81 0
|
9天前
|
前端开发
element菜单组件样式修改NavMenu导航菜单
本文介绍了如何修改Element UI的NavMenu导航菜单组件的样式,包括激活菜单项的颜色、菜单项hover颜色、父级菜单hover颜色以及菜单行高。提供了相应的CSS代码示例,并展示了如何将这些样式应用到实际的NavMenu组件中。
18 3
element菜单组件样式修改NavMenu导航菜单
|
3月前
|
开发框架 前端开发 JavaScript
在Winform界面使用自定义用户控件及TabelPanel和StackPanel布局控件
在Winform界面使用自定义用户控件及TabelPanel和StackPanel布局控件
|
3月前
|
前端开发 JavaScript
Elementplus如何使面包屑往左边移动,右边头像下拉菜单如何写,下拉菜单如何靠中一点,下拉菜单出现文字不对齐怎么办,如何设置鼠标样式,如何使用阿里妈妈icon,如何点击icon全屏
Elementplus如何使面包屑往左边移动,右边头像下拉菜单如何写,下拉菜单如何靠中一点,下拉菜单出现文字不对齐怎么办,如何设置鼠标样式,如何使用阿里妈妈icon,如何点击icon全屏
Elementplus如何使面包屑往左边移动,右边头像下拉菜单如何写,下拉菜单如何靠中一点,下拉菜单出现文字不对齐怎么办,如何设置鼠标样式,如何使用阿里妈妈icon,如何点击icon全屏
|
5月前
|
索引
[Qt5&控件] 下拉框ComBoBox和层叠窗口StackedWidget控件组合使用
[Qt5&控件] 下拉框ComBoBox和层叠窗口StackedWidget控件组合使用
133 0
Winform动态设置TableLayoutPanel等宽高
转自博客: http://blog.csdn.net/langyuewu/article/details/38865423最近有个项目要修改,看完后果断决定重构,里面很多不规范的地方,布局大部分都是计算出来的,但是基本没有采用布局控件,不能自适应,其中有类似九宫格的布局方式,放在WPF,那真是一个控件秒秒钟能搞定的事情,好多年没做winform了,拿回来还是很容易上手。
1585 0
swing实现QQ登录界面1.0( 实现了同一张图片只加载一次)、(以及实现简单的布局面板添加背景图片控件的标签控件和添加一个关闭按钮控件)
swing实现QQ登录界面1.0( 实现了同一张图片只加载一次)、(以及实现简单的布局面板添加背景图片控件的标签控件和添加一个关闭按钮控件)
227 0
swing实现QQ登录界面1.0( 实现了同一张图片只加载一次)、(以及实现简单的布局面板添加背景图片控件的标签控件和添加一个关闭按钮控件)