PDA

View Full Version : [CLOSED] the selected combobox text disapear when click other cell?



hdsoso
Jul 07, 2013, 4:03 AM
please see video
http://screencast.com/t/h5LFQS71
above video show 2 problem
1, when click cell , the sell show [Object Object],how to remove it, show directly the combobox's items.
2,when select one of the combobox's item, the click other cell, the selected text disappear.



<Model>
<ext:Model ID="Model1" runat="server" IDProperty="id">
<Fields>
<ext:ModelField runat="server" Name="id">
</ext:ModelField>
<ext:ModelField runat="server" Name="role"></ext:ModelField>
<ext:ModelField runat="server" Name="menu"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:RowNumbererColumn ID="RowNumbererColumn1" runat="server" />
<ext:Column ID="Column1" runat="server" DataIndex="id" Text="编号"></ext:Column>
<ext:Column ID="Column2" runat="server" Text="角色" DataIndex="role">
<Renderer Fn="roleRenderer" />
<Editor>
<ext:ComboBox runat="server">
<Items>
<ext:ListItem runat="server" Text="text1" Value="1" />
<ext:ListItem runat="server" Text="text2" Value="2" />
<ext:ListItem runat="server" Text="text3" Value="3" />
</Items>
</ext:ComboBox>
</Editor>
</ext:Column>
<ext:Column ID="Column3" runat="server" DataIndex="menu" Flex="1" Text="菜单">
<Renderer Fn="menuRenderer" />
</ext:Column>

</Columns>
</ColumnModel>

Daniil
Jul 08, 2013, 5:31 AM
Hi @hdsoso,

The issues mean that the Column's values (DataIndex="role") don't match the ComboBox's values (Value="1", Value="2", etc.).

To say more concrete we need a full test case.

hdsoso
Jul 09, 2013, 1:11 AM
Hi @hdsoso,

The issues mean that the Column's values (DataIndex="role") don't match the ComboBox's values (Value="1", Value="2", etc.).

To say more concrete we need a full test case.

role is a object relation to ef object


namespace model.crm.hdsoso.com
{
using System;
using System.Collections.Generic;

public partial class rolemenu
{
public int id { get; set; }
public int roleid { get; set; }
public int menuid { get; set; }

public virtual menu menu { get; set; }
public virtual role role { get; set; }
}
}

database is
6505

<ext:AjaxProxy Url="~/admin/pages/role_menu_handler.ashx"> call finally


public class RoleMenuDao
{
crmEntities ent = new crmEntities();
public List<rolemenu> PageRoleList(int start, int limit, out int count)
{
int totalRecords = ent.rolemenus.Count();
count = totalRecords;
var ll = ent.rolemenus.OrderByDescending(s=>s.id).Skip(start).Take(limit).ToList();
return ll;
}
}

Daniil
Jul 09, 2013, 5:11 AM
Please try to add Mode="Row" for the ComboBox's Items.

<ext:ComboBox runat="server">
<Items>
<ext:ListItem runat="server" Text="text1" Value="1" Mode="Raw" />
<ext:ListItem runat="server" Text="text2" Value="2" Mode="Raw" />
<ext:ListItem runat="server" Text="text3" Value="3" Mode="Raw" />
</Items>
</ext:ComboBox>

hdsoso
Jul 09, 2013, 1:25 PM
Please try to add Mode="Row" for the ComboBox's Items.

<ext:ComboBox runat="server">
<Items>
<ext:ListItem runat="server" Text="text1" Value="1" Mode="Raw" />
<ext:ListItem runat="server" Text="text2" Value="2" Mode="Raw" />
<ext:ListItem runat="server" Text="text3" Value="3" Mode="Raw" />
</Items>
</ext:ComboBox>

it dose not work,please see the video http://screencast.com/t/h5LFQS71

hdsoso
Jul 09, 2013, 2:59 PM
I have changed ComboBox to selectbox .
now there are two question.
1,when select one of selectbox, then focus blur, the selected item disapear, how to avoid the selected item disapear?
2,how to auto select first item of selectbox?


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="role_menu.aspx.cs" Inherits="extdemo.admin.pages.role_menu" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script>
var roleRenderer = function (value) {
if (!Ext.isEmpty(value)) {
return value.rolename;
}
return value;
};
var menuRenderer = function (value) {
if (!Ext.isEmpty(value)) {
return value.name;
}
return value;
};
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager runat="server"></ext:ResourceManager>
<ext:GridPanel runat="server" ID="gp_role" Title="角色菜单管理">
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="btn_add" runat="server" Icon="Add" Text="新增">
<Listeners>
<Click Handler="App.store_role.insert(0,{rolename:'新角色'});App.btn_ save.enable();"></Click>
</Listeners>
</ext:Button>
<ext:Button runat="server" Text="删除" Icon="Delete" ID="btn_del">
<Listeners>
<Click Handler="var selection = #{RowSelectionModel}.getSelection();
if (selection) {
#{gp_role}.store.remove(selection);
};App.btn_save.enable();" />
</Listeners>
</ext:Button>
<ext:Button ID="btn_save" runat="server" Icon="Disk" Text="确定" Disabled="True">
<DirectEvents>
<Click OnEvent="e_save" Before="return #{store_role}.isDirty();">
<ExtraParams>
<ext:Parameter Name="data" Value="#{store_role}.getChangedData()" Mode="Raw" Encode="true" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>

</Items>
</ext:Toolbar>
</TopBar>
<Store>
<ext:Store runat="server" ID="store_role">
<Proxy>
<ext:AjaxProxy Url="~/admin/pages/role_menu_handler.ashx">
<ActionMethods Read="GET"></ActionMethods>
<Reader>
<ext:JsonReader Root="data" />
</Reader>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="id">
<Fields>
<ext:ModelField runat="server" Name="id">
</ext:ModelField>
<ext:ModelField runat="server" Name="role"></ext:ModelField>
<ext:ModelField runat="server" Name="menu"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:RowNumbererColumn ID="RowNumbererColumn1" runat="server" />
<ext:Column ID="Column1" runat="server" DataIndex="id" Text="编号"></ext:Column>
<ext:Column ID="Column2" runat="server" Text="角色" DataIndex="role">
<Renderer Fn="roleRenderer" />
<Editor>
<ext:SelectBox runat="server" ID="cb_role" DisplayField="rolename" ValueField="id" EmptyText="选择角色">
<Store>
<ext:Store runat="server" ID="store_role1">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField runat="server" Name="id"></ext:ModelField>
<ext:ModelField runat="server" Name="rolename"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
</ext:SelectBox>
</Editor>
</ext:Column>
<ext:Column ID="Column3" runat="server" DataIndex="menu" Flex="1" Text="菜单">
<Renderer Fn="menuRenderer" />
</ext:Column>

</Columns>
</ColumnModel>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar1" runat="server">
</ext:PagingToolbar>
</BottomBar>
<Plugins>
<ext:CellEditing ID="CellEditing1" runat="server" ClicksToEdit="1" />
</Plugins>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel" Mode="Multi" runat="server" />
</SelectionModel>

</ext:GridPanel>
</form>
</body>
</html>




using Ext.Net;
using Service;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using model.crm.hdsoso.com;

namespace extdemo.admin.pages
{
public partial class role_menu : System.Web.UI.Page
{
RoleService _roleService = new RoleService();
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
store_role1.DataSource = _roleService.GetAllRole();
store_role1.DataBind();
}
}

protected void e_save(object sender, DirectEventArgs e)
{

string data = e.ExtraParams["data"];
ChangeRecords<role> roles = new StoreDataHandler(e.ExtraParams["data"]).BatchObjectData<role>();
for (int i = roles.Created.Count - 1; i >= 0; i--)
{
var role1 = new role();
role1.rolename = roles.Created[i].rolename;
_roleService.Add(role1);
}
foreach (role deleted in roles.Deleted)
{
_roleService.Delete(deleted);
}
foreach (role updated in roles.Updated)
{
_roleService.Update(updated);
}
store_role.Reload();
btn_save.Disable();
}
}
}




using System.Web;
using Ext.Net;
using Service;

namespace extdemo.admin.pages
{
/// <summary>
/// role_menu_handler 的摘要说明
/// </summary>
public class role_menu_handler : IHttpHandler
{
readonly RoleMenuService _roleMenuService = new RoleMenuService();
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "application/json";
var requestParams = new StoreRequestParameters(context);
int start = requestParams.Start;
int limit = requestParams.Limit;
int count;
var data = _roleMenuService.PageRoleList(start, limit, out count);
var datas = new Paging<object>(data, count);
context.Response.Write(JSON.Serialize(datas));
}

public bool IsReusable
{
get
{
return false;
}
}
}
}

hdsoso
Jul 09, 2013, 4:41 PM
I try to add blur event listener, but not trigger.


var fn_blur= function(item, e) {
alert(item); // do not trigger the event
}

<ext:Column ID="Column2" runat="server" Text="角色" DataIndex="role">
<Renderer Fn="roleRenderer" />
<Listeners>
<Blur Fn="fn_blur"></Blur>
</Listeners>

Baidaly
Jul 10, 2013, 12:28 AM
Hello!

Loot at the sample below. Does it work as expected? You should set the same names to Grid's model and to SelectBox's model and use data from the SelectBox's store for renderer.


2,how to auto select first item of selectbox?

I don't quite understand when you want to select the first item? You can use the following events:

http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.plugin.CellEditing-event-beforeedit
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.field.ComboBox-event-expand



<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
this.store_role1.DataSource = Role.GetAll();
this.store_role1.DataBind();

this.store_role.DataSource = Employee.GetAll();
this.store_role.DataBind();
}

public class Employee
{
public int id { get; set; }
public string menu { get; set; }
public Role role { get; set; }

public int roleid
{
get { return this.role != null ? this.role.id : -1; }
}

public static List<Employee> GetAll()
{
return new List<Employee>
{
new Employee
{
id = 1,
menu = "menu1",
role = Role.GetAll()[0]
},
new Employee
{
id = 2,
menu = "menu2",
role = Role.GetAll()[2]
}
};
}
}

public class Role
{
public int id { get; set; }
public string rolename { get; set; }

public static List<Role> GetAll()
{
return new List<Role>
{
new Role {id = 1, rolename = "Role A"},
new Role {id = 2, rolename = "Role B"},
new Role {id = 3, rolename = "Role C"}
};
}
}
</script>

<script>
var roleRenderer = function (value) {
if (!Ext.isEmpty(value)) {
return App.store_role1.getById(value).data.rolename;
}
return value;
};

var menuRenderer = function (value) {
if (!Ext.isEmpty(value)) {
return value.name;
}
return value;
};
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager runat="server"></ext:ResourceManager>

<ext:GridPanel runat="server" ID="gp_role" Title="角色菜单管理">
<Store>
<ext:Store runat="server" ID="store_role">
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="id">
<Fields>
<ext:ModelField runat="server" Name="id">
</ext:ModelField>
<ext:ModelField runat="server" Name="roleid"></ext:ModelField>
<ext:ModelField runat="server" Name="menu"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:RowNumbererColumn ID="RowNumbererColumn1" runat="server" />
<ext:Column ID="Column1" runat="server" DataIndex="id" Text="编号"></ext:Column>
<ext:Column ID="Column2" runat="server" Text="角色" DataIndex="roleid">
<Renderer Fn="roleRenderer" />
<Editor>
<ext:SelectBox runat="server" ID="cb_role" DisplayField="rolename" ValueField="id" EmptyText="选择角色">
<Store>
<ext:Store runat="server" ID="store_role1">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField runat="server" Name="id"></ext:ModelField>
<ext:ModelField runat="server" Name="rolename"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
</ext:SelectBox>
</Editor>
</ext:Column>
<ext:Column ID="Column3" runat="server" DataIndex="menu" Flex="1" Text="菜单">
<Renderer Fn="menuRenderer" />
</ext:Column>

</Columns>
</ColumnModel>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar1" runat="server">
</ext:PagingToolbar>
</BottomBar>
<Plugins>
<ext:CellEditing ID="CellEditing1" runat="server" ClicksToEdit="1" />
</Plugins>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel" Mode="Multi" runat="server" />
</SelectionModel>

</ext:GridPanel>
</form>
</body>
</html>