[CLOSED] multiline text not working in button

  1. #1

    [CLOSED] multiline text not working in button

    I needed to add a multiline text button but is not rendering after the <br/> element. How can i achieve this as sencha button works with <br/> tag
    Click image for larger version. 

Name:	screenshot9.png 
Views:	86 
Size:	4.4 KB 
ID:	5095
    @(Html.X().Panel()
    .X(10)
    .Y(10)
    .Hidden(true)
     .ID("pnlAppConf")
    .Layout(LayoutType.HBox)
    .Border(false)
        .AutoDoLayout(true)
       .Items(i=>
                  {
                      i.Add(
                          (@Html.X().Button()
                          .ID("btnVisualGlobal")
                              .Height(100)
                              .Width(100)
                              .IconUrl("../resources/icons/Flag_red.png")
                              .IconAlign(IconAlign.Top)
                              .Cls("x-btn-default-large")
                              .Text("Visual Global <br/> Constants") 
                              
                              
                              //.DirectEvents(de => { de.Click.Url = Url.Action("CreateWindow");
                              //de.Click.ExtraParams.Add(new { obj = "App Config" });
                              //})
                              .Margin(15)
                              .Handler("SlidePanelReverse(this);")
                          ));
                      i.Add(
    
                      (@Html.X().Image()
                      .ImageUrl("../resources/icons/right-arrow.png")
                      .Align(System.Web.UI.WebControls.ImageAlign.AbsMiddle)
                     .Width(100)
                     .Height(100)
                     .Margin(15)
                      ));
                      
                      i.Add(
                                 (@Html.X().Button()
                                 .ID("btnSecurity")
                                     .Height(100)
                                     .Width(100)
    
                                     .IconUrl("../resources/icons/Flag_blue.png")
                                     .IconAlign(IconAlign.Top)
                                     .Cls("x-btn-default-large")
                                     .Text("Security")
                                     //.DirectEvents(de => { de.Click.Url = Url.Action("CreateWindow");
                                                           
    
                                     //})
                                     .Margin(15)
    
                                 ));       
                  }
    
          )
           
          )
    Last edited by Daniil; Nov 22, 2012 at 2:37 PM. Reason: [CLOSED]
  2. #2
    You can Html field to put some html tag:

    <style>
    	.x-btn-default-large .x-btn-icon  {
    		height: 48px !important;
    	}
    	
    	.x-btn-default-large .x-btn-inner {
    		padding-top: 48px !important;
    	}
    </style>
    @(Html.X().Panel()
    	.X(10)
    	.Y(10)
    	.Hidden(false)
    	.ID("pnlAppConf")
    	.Layout(LayoutType.HBox)
    	.Border(false)
    	.AutoDoLayout(true)
    	.Items(i =>
    			{
    				i.Add(
    					(@Html.X().Button()
    						.ID("btnVisualGlobal")
    						.Height(100)
    						.Width(100)
    						.IconUrl("../Content/Flag_red.png")
    						.IconAlign(IconAlign.Top)
    						.Cls("x-btn-default-large")
    						.Scale(ButtonScale.Large)
    						.Html("Visual <br /> <b> Global </b> <br/> Constants")
    						.Margin(15)
    						.Handler("SlidePanelReverse(this);")
    						));
    				
    				i.Add(
    					(@Html.X().Image()
    						.ImageUrl("../Content/Forward.png")
    						.Align(System.Web.UI.WebControls.ImageAlign.AbsMiddle)
    						.Width(100)
    						.Height(100)
    						.Margin(15)
    						));
    
    				i.Add(
    					(@Html.X().Button()
    						.ID("btnSecurity")
    						.Height(100)
    						.Width(100)
    						.IconUrl("../Content/Flag_blue.png")
    						.IconAlign(IconAlign.Top)
    						.Cls("x-btn-default-large")
    						.Scale(ButtonScale.Large)
    						.Html("Security <br /> is <br /> <i>important</i>")
    						.Margin(15)
    						));
    			}
    	)
    	
    )
  3. #3
    Hi,

    Quote Originally Posted by pawangyanwali View Post
    sencha button works with <br/> tag
    Could you demonstrate a code sample?
  4. #4
    Quote Originally Posted by Daniil View Post
    Hi,



    Could you demonstrate a code sample?
    I tried Html but did not work, I will post the code shortly.
    Click image for larger version. 

Name:	screenshot10.png 
Views:	64 
Size:	28.9 KB 
ID:	5114
    Here is the code
    Style Sheet
    <style>
    .x-item-selected div.ux-desktop-shortcut-bg 
        {
             
            width: 0px !important;
            height: 0px !important;
                
        }
             
        .x-view-over .ux-desktop-shortcut-bg {
            width: 0px !important;
            height: 0px !important;
        }
        .ux-wallpaper {
            display: none;
        }
         
        .ux-desktop-shortcut-text {
            color: black;
        }
     
        .x-btn-default-large .x-btn-icon 
        {
            height: 48px;
            border-radius: 10px;
        }
     
        .x-btn-default-large .x-btn-inner
    {
        line-height: 115px !important;
        text-align: left;
        display: inline;
        float: left;
       
    }
    </style>
    Desktop.cshtml
    @using System.Collections;
    @using System.Linq.Expressions;
    
    @Html.X().ResourceManager()
    @{
        ViewBag.Title = "Desktop";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
    @section headtag
    {
        <link rel="stylesheet" href="@Url.Content("~/resources/css/main.css")" />
        
        <script src="@Url.Content("~/resources/js/main.js")"></script>
        
    }
    @section example
    {
        @(Html.X().Desktop()
              .ID("compdesktop")
                      .Listeners(l => l.Ready.Handler = "HideComponent(this.desktop, this);")
              .DesktopConfig(
                  (@Html.X().DesktopConfig()
                      .DDShortcut(false)
                      .AlignToGrid(true)
                      .ContentFromPartial("DesktopModule")
                  )
    
              ) 
              )
    
    }
    DesktopController.cs
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    using CompDesktop.Models;
    using Ext.Net;
    using Ext.Net.MVC;
    
    namespace CompDesktop.Controllers
    {
         [DirectController]
        public class DesktopController : Controller
        {
            //
            // GET: /Desktop/
    
            public ActionResult Desktop()
            {
                return View(new ModuleBuilder().BuildModules());
            }
            public ActionResult Index()
            {
                return View();
            }
            public ActionResult GetTreeNodes(string node)
            {
                return this.Content(new FavModel().BuildNodes().ToJson());
            }
            [DirectMethod]
            [OutputCache(Duration = 86400, VaryByParam = "theme")]
            public DirectResult GetThemeUrl(string theme)
            {
                Theme temp = (Theme)Enum.Parse(typeof(Theme), theme);
    
                this.Session["Ext.Net.Theme"] = temp;
    
                return this.Direct(temp == Ext.Net.Theme.Default ? "Default" : MvcResourceManager.GetThemeUrl(temp));
            }
             
    
        }
    }
    DesktopModule.cshtml
    @using CompDesktop.Models;
    @(Html.X().Panel()
        .X(10)
        .Y(10)
        .ID("breadCrumb")
    .Layout(LayoutType.Table)
    .Items(i=>
               
                   i.Add(
                       (@Html.X().HyperLink()
                       .Text("Home")
                      
                       )
                       )
               
    
    )
          )
    @(Html.X().Panel()
    .X(10)
    .Y(10)
     .ID("pnlMain")
    .Layout(LayoutType.HBox)
    .Border(false)
        .AutoDoLayout(true)
       .Items(i=>
                  {
                      
                      
                      foreach(var model in Model)
                      {
                      var myModel = model as CompDesktop.Models.Modules;
                          i.Add(
                          (@Html.X().Button()
                           .Height(100)
                           .Width(100)
                            .ID ( myModel.ModuleId.ToString())
                            .IconUrl ( myModel.IconName)
                            .IconAlign( IconAlign.Top)
                            .Cls( "x-btn-default-large")
                            .Html ( myModel.Text)
                              .Margin ( 15)
                              .Handler ( "SlidePanel(this)")
                          )
                              );
    
    
                          //var myModel = model as CompDesktop.Models.Modules;
                          //var btn = new Button();
                          //btn.ID = myModel.ModuleId.ToString();
                          //btn.IconUrl = myModel.IconName;
                          //btn.IconAlign = IconAlign.Top;
                          //btn.Cls = "x-btn-default-large";
                          //btn.Html = myModel.Text;
                          //btn.Margin = 15;
                          //btn.Handler = "SlidePanel(this)";
    
                      }
                      
                      
                      
                      
                      
                     // i.Add(
                     //     (@Html.X().Button()
                     //     .ID("btnAdminApp")
                     //         .Height(100)
                     //         .Width(100)
                     //         .IconUrl("../resources/icons/Box.png")
                     //         .IconAlign(IconAlign.Top)
                     //         .Cls("x-btn-default-large")
                     //         .Text("App Config")
                     //         //.DirectEvents(de => { de.Click.Url = Url.Action("CreateWindow");
                     //         //de.Click.ExtraParams.Add(new { obj = "App Config" });
                     //         //})
                     //         .Margin(15)
                     //         .Handler("SlidePanel(this);")
                     //     ));
                     // i.Add(
    
                     // (@Html.X().Image()
                     // .ImageUrl("../resources/icons/right-arrow.png")
                     // .Align(System.Web.UI.WebControls.ImageAlign.AbsMiddle)
                     //.Width(100)
                     //.Height(100)
                     //.Margin(15)
                     // ));
                      
                      //i.Add(
                      //           (@Html.X().Button()
                      //           .ID("btnCycleApp")
                      //               .Height(100)
                      //               .Width(100)
                                     
                      //               .IconUrl("../resources/icons/Chart_bar.png")
                      //               .IconAlign(IconAlign.Top)
                      //               .Cls("x-btn-default-large")
                      //               .Text("Cycle Config")
                      //               //.DirectEvents(de => { de.Click.Url = Url.Action("CreateWindow");
                                                           
    
                      //               //})
                      //               .Margin(15)
    
                      //           ));       
                  }
    
          )
           
          )
    @(Html.X().Panel()
    .X(10)
    .Y(10)
    .Hidden(true)
     .ID("pnlAppConf")
    .Layout(LayoutType.HBox)
    .Border(false)
        .AutoDoLayout(true)
       .Items(i=>
                  {
                      i.Add(
                          (@Html.X().Button()
                          .ID("btnVisualGlobal")
                              .Height(100)
                              .Width(100)
                              .IconUrl("../resources/icons/Flag_red.png")
                              .IconAlign(IconAlign.Top)
                              .Cls("x-btn-default-large")
                              .Text("Visual Global <br/> Constants") 
                              //.DirectEvents(de => { de.Click.Url = Url.Action("CreateWindow");
                              //de.Click.ExtraParams.Add(new { obj = "App Config" });
                              //})
                              .Margin(15)
                              .Handler("SlidePanelReverse(this);")
                          ));
                      i.Add(
    
                      (@Html.X().Image()
                      .ImageUrl("../resources/icons/right-arrow.png")
                      .Align(System.Web.UI.WebControls.ImageAlign.AbsMiddle)
                     .Width(100)
                     .Height(100)
                     .Margin(15)
                      ));
                      
                      i.Add(
                                 (@Html.X().Button()
                                 .ID("btnSecurity")
                                     .Height(100)
                                     .Width(100)
    
                                     .IconUrl("../resources/icons/Flag_blue.png")
                                     .IconAlign(IconAlign.Top)
                                     .Cls("x-btn-default-large")
                                     .Text("Security")
                                     //.DirectEvents(de => { de.Click.Url = Url.Action("CreateWindow");
                                                           
    
                                     //})
                                     .Margin(15)
    
                                 ));       
                  }
    
          )
           
          )
    FavModel.cs
    using System;
    using System.Collections;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using System.Web;
    using Ext.Net;
    
    namespace CompDesktop.Models
    {
        public class FavModel
        {
            public NodeCollection BuildNodes()
            {
                //build a sample node
                NodeCollection nc = new NodeCollection(false);
                for(int i = 0; i < 10; i++)
                {
                    Node n = new Node()
                                 {
                                     Text = "Node " + i,
                                     IconCls = "",
                                     Icon = Icon.Application
                   
                                 };
                   
                    AddChildNode(n);
                    nc.Add(n);
                }
                return nc;
            }
    
            private void AddChildNode(Node n)
            {
                for(int i = 0; i < 5; i++)
                {
                    n.Children.Add(new Node() {Text="Child " + i, Icon = Icon.ApplicationDouble, Leaf = true});
                }
            }
            
        }
    
        public class ModuleBuilder
        {
            internal static string IconsRoot = "~/resources/icons";
            public List<string> GetIconsNames()
            {
                string path = HttpContext.Current.Server.MapPath(IconsRoot);
                 var root = new DirectoryInfo(path);
                FileInfo[] fileInfo = root.GetFiles();
    
                List<string> icons = (from file in fileInfo let img = System.Drawing.Image.FromFile(file.FullName) where img.Width == 48 && img.Height == 48 select "../resources/icons/" + file.Name).ToList();
                return icons;
            }
    
            
            public List<Modules> BuildModules()
            {
                 
                int num = new Random().Next(0, 10);
                var modules = new List<Modules>();
                var icons = GetIconsNames();
                
                
                    for (int i = 0; i < 10; i++)
                    {
                        var mod = new Modules()
                        {
                            Name = "Module" + i,
                            IsEnabled = num % 2 == 0,
                            Disbaled = num % 2 == 0 ? "disabled" : "",
                            Enabled = num % 2 == 0 ? "" : "disabled",
                            ModuleId = i,
                            IconName = icons[i],
                            Text = "Module <br/> <b>" + i + "</b>"
                        };
                        modules.Add(mod);
                    }
                
                return modules;
            }
        }
    
        public class Modules
        {
            public string Name { get; set; }
            public string IconName { get; set; }
            public bool IsEnabled { get; set; }
            public int ModuleId { get; set; }
            public string Disbaled { get; set; }
            public string Enabled { get; set; }
            public int SortOrder { get; set; }
            public string Text { get; set; }
       
        }
    }
    Last edited by pawangyanwali; Nov 16, 2012 at 3:27 PM.
  5. #5
    Quote Originally Posted by Baidaly View Post
    You can Html field to put some html tag:

    <style>
    	.x-btn-default-large .x-btn-icon  {
    		height: 48px !important;
    	}
    	
    	.x-btn-default-large .x-btn-inner {
    		padding-top: 48px !important;
    	}
    </style>
    @(Html.X().Panel()
    	.X(10)
    	.Y(10)
    	.Hidden(false)
    	.ID("pnlAppConf")
    	.Layout(LayoutType.HBox)
    	.Border(false)
    	.AutoDoLayout(true)
    	.Items(i =>
    			{
    				i.Add(
    					(@Html.X().Button()
    						.ID("btnVisualGlobal")
    						.Height(100)
    						.Width(100)
    						.IconUrl("../Content/Flag_red.png")
    						.IconAlign(IconAlign.Top)
    						.Cls("x-btn-default-large")
    						.Scale(ButtonScale.Large)
    						.Html("Visual <br /> <b> Global </b> <br/> Constants")
    						.Margin(15)
    						.Handler("SlidePanelReverse(this);")
    						));
    				
    				i.Add(
    					(@Html.X().Image()
    						.ImageUrl("../Content/Forward.png")
    						.Align(System.Web.UI.WebControls.ImageAlign.AbsMiddle)
    						.Width(100)
    						.Height(100)
    						.Margin(15)
    						));
    
    				i.Add(
    					(@Html.X().Button()
    						.ID("btnSecurity")
    						.Height(100)
    						.Width(100)
    						.IconUrl("../Content/Flag_blue.png")
    						.IconAlign(IconAlign.Top)
    						.Cls("x-btn-default-large")
    						.Scale(ButtonScale.Large)
    						.Html("Security <br /> is <br /> <i>important</i>")
    						.Margin(15)
    						));
    			}
    	)
    	
    )
    Also the problem that we are having is the icons are not rearranging if the browser size is changed despite of DoAutolayout is set to true.
  6. #6
    I don't see where are you setting value for Html attribute? There is only myModel.Text, I don't know what you have in this Field.

    Can you run my example and make screenshot and make screenshot of html markup of buttons in FireBug or Chrome like this Click image for larger version. 

Name:	desktop.png 
Views:	76 
Size:	67.8 KB 
ID:	5123?

    Quote Originally Posted by pawangyanwali View Post
    Also the problem that we are having is the icons are not rearranging if the browser size is changed despite of DoAutolayout is set to true.
    You have to do this manually, because you are using Absolute Positioning. Also, I recommend to you look following examples:

    https://examples2.ext.net/#/Layout/ColumnLayout/Basic/
    https://examples2.ext.net/#/Layout/HBoxLayout/Basic/
    https://examples2.ext.net/#/Layout/VBoxLayout/Basic/
    https://examples2.ext.net/#/Layout/T...ple_in_Markup/

Similar Threads

  1. [CLOSED] How to: TextField with multiline text and new lines
    By digitek in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Dec 20, 2011, 12:57 PM
  2. group header text multiline problem
    By wp_joju in forum 1.x Help
    Replies: 0
    Last Post: Dec 21, 2010, 10:54 AM
  3. [CLOSED] TextField Reset Text from ServerSide Not Working
    By webclouder in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: May 11, 2010, 1:25 PM
  4. [CLOSED] Text align left for button text
    By macap in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jul 09, 2009, 10:52 AM
  5. [CLOSED] Multiline Text Problem in StatusBar
    By thedarklord in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 23, 2009, 4:13 PM

Posting Permissions