ext 行单机事件_使用基础EXT JS进行Cfgrid和行单击以及编辑

ext 行单机事件

CFGRID Custom Functionality Series -  Part 1CFGRID定制功能系列-第1部分

Hi Guys, I was once asked how it is possible to to add a hyperlink in the cfgrid and open the window to show the data. Now this is quite simple, I have to use the EXT JS library for this and I achieved what I needed. Here I will demonstrate how this thing can be done in ColdFusion CFGRID and in easy Way. Nothing extra ordinary is required, Just a Basic Knowledge of How JavaScript works is Enough.

大家好，我曾经被问到如何在cfgrid中添加超链接并打开显示数据的窗口。 现在这很简单，我必须为此使用EXT JS库，并且达到了所需。 在这里，我将演示如何在ColdFusion CFGRID中以简单的方式完成此操作。 不需要任何普通的知识，仅需要有关JavaScript工作原理的基本知识即可。

Let Me start with the Tutorial now.  I will split this tutorial in the following way.

现在让我从教程开始。 我将通过以下方式拆分本教程。

1. Populate a CFGRID with CFC Binding and Show the DATA in the CFGRID

1.使用CFC绑定填充CFGRID，并在CFGRID中显示数据

2. WE will create Custom Toolbar at Bottom for Showing the records

2.我们将在底部创建自定义工具栏以显示记录

3. We will create the Hyperlink to the Column we need.

3.我们将创建指向所需列的超链接。

4. We will modify the Column to look a bit seperate so it can be noticed that this is a hyperlink

4.我们将修改“列”以使其看起来有点分离，以便可以注意到这是一个超链接

5. We will now open the cfwindow or the Normal window on the click of this link and see how it goes.

5.现在，单击此链接，我们将打开cfwindow或“普通”窗口，并查看其运行方式。

So we will start with the Code. I will show how we can populate the grid. The Following method is use to Populate Grid with my Bind Value

因此，我们将从代码开始。 我将展示如何填充网格。 以下方法用于使用我的绑定值填充网格

<cfoutput>
        <cfscript>
  args = {};
  args.bind = "cfc:CFC.myCFC.getDataForGrid({cfgridpage},{cfgridpagesize},
  {cfgridsortcolumn},{cfgridsortdirection})";
  args.delete = TRUE;
  args.format = "html";
  args.insert = false;
  args.name = "SchedulesGrid";
  args.pagesize = "5";
  args.selectmode = "browse";
  args.striperows = TRUE;
  args.autowidth = true;
  args.height = "205";
</cfscript>
        <cfform name="SchedulesForm">
          <cfgrid attributecollection="#args#" colHeaderBold="yes" collapsible="true" title="View Created Profile: <b>#Myquery.ProfileName#</b>">
           <cfgridcolumn name="ScheduleDetailID" header=" ID" display="no" headerbold="yes" />
            <cfgridcolumn name="ScheduleProfileID" header=" Schedule Profile ID" display="no" headerbold="yes" />
            <cfgridcolumn name="type" header="Type of " width="108" headerbold="yes" />
            <cfgridcolumn name="intervals" header="Intervals" width="108"  headerbold="yes"/>
            <cfgridcolumn name="IntervalUnit" header="Unit" width="108"  headerbold="yes"/>
            <cfgridcolumn name="duration" header="Duration" width="108"  headerbold="yes"/>
            <cfgridcolumn name="to_whom" header="Followed" width="108" headerbold="yes" />
            <cfgridcolumn name="reasonDetail" header="Reason" width="108" headerbold="yes"/>
            <cfgridcolumn name="frequencyName" header="Frequency" width="108" headerbold="yes" />
            <cfgridcolumn name="Template" header="Template(s) attached" width="137" headerbold="yes">
          </cfgrid>
        </cfform>
      </cfoutput>

Above Code, Pretty Simple, I am just binding one CFC to the cfgrid and populating its values in the cfgrid columns, if you copy the above code and run it as it is, it will show you the query results. I assume here that you know how we return values from the query, we basically use QueryConvertForGrid to get back our results, So I am not going to explain that thing here

在代码上方，很简单，我只是将一个CFC绑定到cfgrid并将其值填充在cfgrid列中，如果您复制上述代码并按原样运行，它将向您显示查询结果。 我在这里假设您知道我们如何从查询中返回值，我们基本上使用QueryConvertForGrid来获取结果，所以在这里我将不做解释

Now our Next Scenario, we all have seen now that we can get the results from the cfgrid. Now I have a situation where I need to create a link to the column. The cfgrid columns start from 0

现在我们的下一个场景，我们所有人都已经看到，我们可以从cfgrid获取结果。 现在，我需要创建到该列的链接。 cfgrid列从0开始

In my Case, you can see that I have two fields in the grid which are set to display as "NO", I will create a link on the "TYPE" column of the cfgrid. Now here we go with our Javascript:

在我的案例中，您可以看到网格中有两个字段设置为显示为“ NO”，我将在cfgrid的“ TYPE”列上创建一个链接。 现在在这里，我们使用我们JavaScript：

<script type="text/javascript">
function showWindow(thisID) {
	window.open('details.cfm?DetailID=' + thisID,'Details','height=250,width=500,location=0,status=0,toolbar=0,resizable=0');
}
function init(){
	grid = ColdFusion.Grid.getGridObject("SchedulesGrid");
	cm = grid.getColumnModel();
	cm.setRenderer(cm.getIndexById('TYPE'), hrefLinkCreator);	
	var tbar=Ext.DomHelper.insertFirst(grid.el,{tag:'div',id:Ext.id()},true);
	var bbar = Ext.DomHelper.overwrite(grid.bbar,{tag:'div',id:Ext.id()},true);
	gbbar = new Ext.PagingToolbar({
	renderTo:bbar,
	store: grid.store, 
		pageSize: 5,
		displayInfo: true,
		displayMsg: '<b>Showing {0} - {1} out of {2}</b>',
		emptyMsg: "<b>No Record</b>"
		});
	var ds = grid.getStore();
	gridEl = grid.getGridEl();
		grid.loadMask = true;
		grid.getGridEl().mask("Please wait - loading data ...");
		ds.on('load',function(){
			grid.getGridEl().unmask();
    });
	grid.on('cellclick',function(grid,rowIndex,columnIndex,e){
		//	We only want action on the 'Details' column
		if(columnIndex==2){
			//	Show the window
			var thisID = ColdFusion.getElementValue("SchedulesGrid","SchedulesForm","ScheduleDetailID");
			showWindow(thisID);
		}
	}); 
};
function hrefLinkCreator(value) {
  return '<b style="color:#000;text-decoration:underline;">' + value + '</b>';
}
</script>

Now check this Code:

现在检查此代码：

I am creating one Init function and doing all my processing here

我正在创建一个Init函数，并在这里进行所有处理

let take it line by line

让我们逐行

1. First I am getting the Grid Object name and storing it in the variable grid.

1.首先，我要获取Grid Object名称并将其存储在变量grid中。

2. Next, Create another variable and using the "getColumnModel()" of EXT js, I am storing the Column Details

2.接下来，创建另一个变量，并使用EXT js的“ getColumnModel（）”，我将存储列详细信息

3. I am using the setRenderer to detect the gridColumn by its Name, Check the Name i referred with getIndexbyId should be in Capital letters, and then I apply one function to it. Which is used at the end of the script to create a link to that renderer.

3.我正在使用setRenderer通过它的名称检测gridColumn，检查用getIndexbyId引用的名称应该用大写字母表示，然后将一个函数应用于它。 在脚本末尾使用它来创建到该渲染器的链接。

4. I am creating a toolbar for bottom and top panels and adding the code to detect the records available. the information of this will be shown in the bottom right side of the cfgrid.

4.我正在为底部和顶部面板创建一个工具栏，并添加代码以检测可用的记录。 该信息将显示在cfgrid的右下方。

5. "var ds = grid.getStore();
      gridEl = grid.getGridEl();
            grid.loadMask = true;
            grid.getGridEl().mask("Please wait - loading data ...");
            ds.on('load',function(){
                  grid.getGridEl().unmask();
    });" -  This code is something which users need it in many cases. This is Just displaying the Loading icon, in the case if you have records which are are many and the query is taking a lot of time to show these records on the page, it will display a nice loading icon inside the cfgrid.

5.“

6. This is the one line where I render the cell grid.on('cellclick',function(grid,rowIndex,columnIndex,e){ and detect the columnindex which is 2 in my case and create a link on it. I just added the

6.这是我渲染单元格grid.on（'cellclick'，functi 上（网格，ro wIndex，col umnIndex，e ）{，并检测我的情况下columnIndex为2并在其上创建一个链接。 我刚刚添加了

if(columnIndex==2){if（columnIndex == 2）{

                  //      Show the window

//显示窗口

                  var thisID = ColdFusion.getElementValue("TouchSchedulesGrid","TouchSchedulesForm","TouchScheduleDetailID");

var thisID = ColdFusion.getElementValue （“ TouchSch edulesGrid “，” TouchSc 对于 m“，” TouchS 时间表 ailID“）;

                  showWindow(thisID);

showWindow（thisID）;

            }

}

to detect the value of the gridcolumn and attach that value to the showWindow function. At the top of the script, if you see I have added the showWindow() function which will open a popup to the user passing the id and based upon that, you can detect the value and do anything you want to to on the details section of the opened window .

以检测gridcolumn的值并将该值附加到showWindow函数。 在脚本的顶部，如果您看到我添加了showWindow（）函数，该函数将为通过id的用户打开一个弹出窗口，并基于此函数，您可以检测该值并在详细信息部分中执行任何操作打开的窗户的一部分。

Last is the Function hrefLinkCreator() which is used in the setRenderer to create a link and color code it so it looks different and easily noticeable that this is a hyperlink.

最后是Function hrefLinkCreator（），该函数在setRenderer中用于创建链接并对其进行颜色编码，以使其看起来不同并且很容易注意到这是超链接。

That's all the cfgrid is ready with your custom Amendments.

cfgrid即可使用您的自定义修正案准备就绪。

Ok, at last I forgot, I told that if user needs to open the cfwindow then what should be done. That is simple enough

好的，最后我忘了，我告诉我，如果用户需要打开cfwindow，那么应该怎么做。 那很简单

Just replace the showWindow  code with this one as:

只需将showWindow代码替换为：

showWindow = function() {
                var day = new Date();  
        	PID  = 'Details' + day.getTime();    
        	var windowOptions = new Object();  
                  windowOptions.width = 700;  
                  windowOptions.height = 300;  
                  windowOptions.x = 400;  
                  windowOptions.y = 400; 
                  windowOptions.modal = true;  
                  windowOptions.refreshOnShow = true; 
                  windowOptions.destroyOnClose = true;
                  windowOptions.resizeable = true;  
                  windowOptions.initshow = true;  
                  windowOptions.draggable = true;  
                  windowOptions.closable = true; 
     		ColdFusion.Window.create(PID,'Details','details.cfm?DetailID=' + thisID + '&random=' + Math.random(Math.random() * 10000000000), windowOptions); 
     }
}

At the bottom End You just need to add the following :

在最底端，您只需要添加以下内容：

<cfset AjaxOnLoad("init")>

<cfset AjaxOnLoad（“ init”）>

else it will not work

否则它将无法正常工作

Cheers. Comment/Suggest if you need more Details to more features. I will update the article.

干杯。 如果您需要更多详细信息以使用更多功能，请发表评论/建议。 我将更新本文。

This is a series. I will increasing the series with more and more features and playing cfgrid

这是一个系列。 我将增加具有更多功能的系列，并玩cfgrid

Please vote it if you find it useful

如果您觉得有用，请投票

Thanks

谢谢

翻译自: https://www.experts-exchange.com/articles/10751/Cfgrid-and-Row-Clicking-and-editing-using-underlying-EXT-JS.html

ext 行单机事件